Scribd
Upload
20 views20 pages

Solomon Hotel in Lal-lo, Cagayan

Uploaded by

Cristine Versoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views20 pages

Solomon Hotel in Lal-lo, Cagayan

Uploaded by

Cristine Versoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Home Page

<!-- The title of the webpage -->


<title>Home - Municipality of Lal-lo</title>

<!-- Link to an external stylesheet -->


<link rel="stylesheet" href="styles.css">

<!-- The body of the webpage -->


<body>

<!-- A div element with a class of "bst" -->


<div class="bst">
<!-- An image element with a source, alt text, and styles -->
<img src="D:\cpko\Downloads\logo-removebg-preview.png" alt="Image description" style="float:
left; margin-right: 1px;" width="100" height="100">

<!-- A heading element with text and styles -->


<h2 style="text-align:left;font-family: Bernard MT Condensed;">Municipality of Lal-lo</h2>

<!-- A paragraph element with text and styles -->


<p style="text-align: left;">P. Dupaya Street, Centro, Lal-lo, Philippines</p>

<!-- A paragraph element with an ID and styles -->


<p id="date-time" style="text-align: right;"></p>
</div>

<!-- A script element that updates the date and time -->
<script>
function updateDateTime() {
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit',
minute: '2-digit', second: '2-digit' };
const dateTimeString = now.toLocaleString('en-US', options);
document.getElementById('date-time').innerText = dateTimeString;
}

updateDateTime();
</script>

<!-- A header element with a navigation menu -->


<header>
<nav>
<ul>
<!-- List items with links to other pages -->
<li><a href="home.html">HOME</a></li>
<li><a href="transparency.html">Transparency</a></li>
<li><a href="opportunities.html">Opportunities</a></li>
<li><a href="business.html">Business</a></li>
<li><a href="tourism.html">Tourism</a></li>
<li><a href="about.html">About Lallo</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</header>

<!-- A div element with a class of "frame" -->


<div class="frame">
<!-- A div element with a class of "imgContainer" -->
<div class="imgContainer">
<!-- Multiple image elements with sources and alt text -->
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\6.jpg" alt="">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\5.jpg" alt="">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\4.jpg" alt="">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\3.jpg" alt="">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\2.jpg" alt="">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\1.jpg" alt="">
</div>
</div>

<!-- A div element with a class of "Hotline" and styles -->


<div class="Hotline" style="padding: 15px; float: right; margin-top: 50px; margin-right:450px;">
<!-- An image element with a source, height, and width -->
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\eh.jpg"
height="600px" width="350px">
</div>

<!-- A div element with a class of "table-container" -->


<div class="table-container">
<!-- A div element with a class of "col-sm-12 col-lg-12" and styles -->
<div class="col-sm-12 col-lg-12" style="padding: 15px; margin-left: 50px; margin-right: 400px; ">
<!-- A div element with a class of "announcement-holder" and styles -->
<div class="announcement-holder" style="padding: 15px; box-shadow: 0px 0px 1px 1px #cccccc;
">
<!-- A heading element with text and styles -->
<h2 class="font-weight-bold text-danger"><img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\hotline.jpg" height="50" width="50">Hospital Hotlines</h2>
<!-- A table element with a body -->
<table class="table">
<!-- Table rows -->
<tbody>
<!-- Table rows with cells -->
<tr>
<!-- Cells with text -->
<td class="font-weight-bold">Lyceum of Aparri Hospital</td>
<td>
<!-- An iframe element with attributes -->
<iframe width="250" height="100 " <img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\1.jpg" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><br>3515 Aparri Cagayan Valley<br>(078) 822 8843
</td>
</tr>
<tr>
<td class="font-weight-bold">Matilde A. Olivas District Hospital</td>
<td>
<!-- An iframe element with attributes -->
<iframe width="250" height="100" <img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\1.jpg" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><br>0997-065-8768
</td>
</tr>
<tr>
<td class="font-weight-bold">Lasam District Hospital</td>
<td>
<!-- An iframe element with attributes -->
<iframe width="250" height="100" <img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\1.jpg" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><br>03524 Centro II Cagayan Valley
</td>
</tr>
<tr>
<td class="font-weight-bold">Aparri Christian Hospital, Inc.</td>
<td>
<!-- An iframe element with attributes -->
<iframe width="250" height="100" <img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\1.jpg" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><br>Diego Silang St, Aparri, 3515 Cagayan<br> (078) 888 2447
</td>
</tr>
</tbody>
</table>
</div>

<!-- A div element with a class of "col-sm-12 col-lg-12" and styles -->
<div class="col-sm-12 col-lg-12" style="padding: 5px; margin-left: 20px; margin-right: 10px;
"></div>

<!-- A div element with a class of "announcement-holder" and styles -->


<div class="announcement-holder" style="padding: 15px; box-shadow: 0px 0px 1px 1px #cccccc;
">
<!-- A heading element with text and styles -->
<h2 class="font-weight-bold text-danger"><img src="C:\Users\Cristine\Desktop\cris_website -
Copy\main menu\images\news.jpg" height="90" width="90"> Updates</h2>
<!-- A table element with a body -->
<table class="table">
<!-- Table rows -->
<tbody>
<!-- Table rows with cards -->
<tr>
<!-- Cards with images, headings, paragraphs, and small text -->
<div class="card-body">
<div class="card shadow-sm">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\7.jpg"
class="image-fluid" width="250px" height="250px">
<div class="card-body">
<h3 class="font-weight-bold">LGU LAL-LO LAUNCHES BRGY. FUSINA BHS </h3>
<p>To further the healthcare services in the municipality of Lal-lo, the Local Government
Unit of Lal-lo, headed by Hon. Mayor Florante C. Pascual, CPA, through its Rural Health Unit (RHU)
inaugurated and blessed the Fusina Barangay Health Station (BHS) on May 30, 2024, witnessed by
Vice Mayor Hon. Maria Olivia B. Pascual.
The erection of the newly inaugurated BHS aims to cater the basic healthcare needs of
the residents of Brgy. Fusina and nearby barangays.
</p>
<small class="card-text">2024-05-28 08:53:03</small>
</div>
</div>
</div>
</tr>
<tr>
<!-- Another card -->
<div class="card-body">
<div class="card shadow-sm">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\8.jpg"
class="image-fluid" width="250px" height="250px">
<div class="card-body">
<h3 class="font-weight-bold">REGION 2 NUTRITION EVALUATION TEAM ASSESSES LAL-
LO'S NUTRITION PROGRAM FOR AWARD RENEWAL </h3>
<p>The Nutrition Evaluation Team (NET) of Region 2 conducted its 2024 Monitoring and
Evaluation of Local Level Plan Implementation Protocol (MELLPI Pro) in the municipality of Lal-lo at
the Lal-lo Multipurpose Center’s Function Hall today, May 31, 2024. <br>
<a href="https://www.facebook.com/share/p/u9GwdCUnh7FEMPxQ/">read
more</a>.</p>
<small class="card-text">2024-05-28 08:53:03</small>
</div>
</div>
</div>
</tr>
<tr>
<!-- Another card -->
<div class="card-body">
<div class="card shadow-sm">
<img src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\images\9.jpg"
class="image-fluid" width="250px" height="250px">
<div class="card-body">
<h3 class="font-weight-bold">ATTENTION: TO ALL JOB SEEKERS </h3>
<p>The Altima Manpower Agency, Inc. will be having their Special Recruitment Activity on
May 8-10, 2024 at the Lal-lo Municipal Hall Lobby, 9:00 AM to 3:00 PM.<br>
<a href="https://www.facebook.com/share/p/8Y72X8ov9oW2d9Wf/">read
more</a>.</p>
<small class="card-text">2024-05-28 08:53:03</small>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<!-- A div element with a class of "facts" and styles -->


<div class="facts" >
<hr>
<h1 style="text-align: center; "> Quick Facts about Lal-lo</h1>
<hr>
<!-- Paragraphs with text -->
<p>Lal-lo, officially the Municipality of Lal-Lo (Ibanag: Ili nat Lal-lo; Ilocano: Ili ti Lal-lo; Tagalog:
Bayan ng Lal-lo), is a 1st class municipality in the province of Cagayan, Philippines. According to the
2015 census, it has a population of 44, 506 people. During the Spanish colonial period, Lal-lo was
known as Ciudad de Nueva Segovia and was the seat of the Diocese of Nueva Segovia before it was
moved to Vigan in Ilocos Sur.</p>
<p> </p>
<p>The Municipality of Lal-lo is one of the first four cities in the Philippines. Others are Cebu (1565);
Manila 1571; and Naga (1575). Lal-lo (formerly named Nueva Segovia) for a time enjoyed the lavish
gifts of the Papal Throne. It was named Nueva Segovia by Juan Pablo Carreon in 1581. It was visited by
Juan Salcedo in 1572 and Luis Perez Dasmariñas in 1592. Because of its navigable river, it was chosen
the capital of Cagayan Valley. It was also the seat of the Diocese created by Pope Clement VIII on
August 15, 1595 till the seat was transferred to Vigan, Ilocos Sur in 1755. It was the capital of Cagayan
up to 1839 when the Provincial Government was moved to Tuguegarao, Miguel Buenavides, O. P., a
very famous personage among the missionaries at that time was elected bishop to the diocesan home
in Nueva Segovia. He later found the University of Santo Tomas.</p>
<p> </p>
<p>There is a widespread belief that Lal-lo town without peer when it comes to mestizas- that
racial mixture of Malay, Spanish, Chinese and American which is the genetic formula for haunting
loveliness. It is common place that when you talk about mestizas, you will have a horde of eager
listeners. But in Lal-lo, consensus says people will laugh at you. They are so familiar with them that
they are taken for granted as household commodities like Kodak and Coca Cola. Like its beautiful
women, Lal-lo has a beautiful history.</p>
<p> </p>
<p>At first blush, Lal-lo could be easily mistaken for on American mining ghost town. But, tropical
growth sparkling in the warm sunshine, seem to vie for the opportunity to tell stories about its happy
dead day.</p>
<p> </p>
<p>Its early inhabitants were the Ybanags. Most of their women are engaged in weaving clothes.
One step in the preparation of the thread before weaving is winding, which was manipulated with the
aid of a crude implement. According to Julian Malumbres, O.P. the Spanish historian, the natives
subsequently called the town after a piece of thread “hilo”. In Ibanag, the thread is called “il-lo-c”,
distorted to Lal-loc. Others, however, said that the name Lal-lo was derived from the big; strong,
whirling current of the Cagayan River called in the dialect “mal-lal- lal-lo”, which is found up to this
time near the point of a “bato” or stone along the bank of the river.</p>
<p> </p>
<p>The early settlers of Lal-lo are the native Ibanags who built their communities along the banks of
the Cagayan River. Their main livelihood was fishing and they caught fish in great quantities. The very
productive culture of rice was introduced by the migrants who came from the Ilocos provinces. They
arrived yearly by big wooden boats called “virays” or “pangco” to sell their native wares composed of
clay pots, molasses, salt, onions, garlic and sinamay clothes for barter. Later, finding the rich soil of
Lal-lo very productive and satisfying their natural love for agriculture and industry, intermarried with
the native Ibanags and begun the opening of wide homesteads which created an exodus of Ilocanoes
to the municipality.</p>
<p style="text-align: right;">(Source: Wikipedia and LGU Lal-lo)</p>
</div>

<!-- A div element with a class of "container-fluid" and an ID of "footer" -->


<div class="container-fluid" id="footer" style="margin-top: auto; ">
<!-- A row element with two columns -->
<div class="row">
<div class="col-md-4">
<!-- A heading element with text and styles -->
<h5 style="margin-left: 30px;">Government Links</h5>
<!-- An unordered list with links to government websites -->
<ul style="margin-left: 50px;">
<li><a href="https://www.officialgazette.gov.ph/">Republic of the Philippines Official
Gazette</a></li>
<li><a href="https://op-proper.gov.ph/">Office of the President</a></li>
<li><a href="http://legacy.senate.gov.ph/">Senate of the Philippines</a></li>
<li><a href="https://www.congress.gov.ph/">House of the Representatives</a></li>
<li><a href="https://sc.judiciary.gov.ph/">Supreme Court</a></li>
<li><a href="https://dilg.gov.ph/">Department of Interior &amp; Local Government</a></li>
<li><a href="http://www.csc.gov.ph/">Civil Service Commision</a></li>
<li><a href="https://dfa.gov.ph/">Department of Foreign Affairs</a></li>
<li><a href="http://www.tourism.gov.ph/general_information.aspx">Department of
Tourism</a></li>
<li><a href="https://pia.gov.ph/">Philippine Information Agency</a></li>
<li><a href="https://dict.gov.ph/">Department of Information &amp; Communication
Technology</a></li>
<li><a href="http://kapalong.gov.ph/">Open Data</a></li>
<li><a href="http://kapalong.gov.ph/">Freedom of Information</a></li>
<li><a href="https://fdpp.dilg.gov.ph/">Full Disclosure Portal</a></li>
</ul>
</div>

<div class="col-md-4">
<!-- A heading element with text -->
<h5>Contact Us</h5>
<!-- A form with input fields and a submit button -->
<form action="javascript:void(0);">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="email" >Type in your concern</label>
<textarea rows="3" cols="30" class="form-control" style="resize: none;">
</textarea>
</div>
<button id="submit-button" type="submit" class="btn text-light">Submit</button>
</form>

<!-- A script element that displays a confirmation box when the form is submitted -->
<script>
document.querySelector('form').addEventListener('submit', function(event) {

event.preventDefault();

// Display a confirm box


var confirmation = confirm('Are you sure you want to submit this form?');

// Check if the user confirmed the action


if (confirmation) {
// Do something if the user confirmed (e.g. submit the form)
alert('Form submitted!');
} else {
// Do something if the user cancelled (e.g. nothing)
alert('Form submission cancelled.');
}
});
</script>

<!-- A horizontal rule and an address, telephone number, and email address -->
<hr>
<div class="add">
<small>
<h4>Address:<br><h5>Lallo Cagayan, Philippines</h5></h4>
<h4>Telephone Number:<br><h5>(084) 807 0004</h5></h4>
<h4>Email Address:<br><h5>[email protected]</h5></h4>
</small>
</div>
</div>
</div>
</div>

<!-- A div element with a class of "container-fluid" and an ID of "sub-footer" -->


<div class="container-fluid" id="sub-footer">
<!-- A row element with two columns -->
<div class="row">
<div class="col-md-6">
<!-- A paragraph element with text -->
<div class="float-left">
<p style="text-align: center;"> © The unofficial Website of Municipality of Lallo. All Right
Reserved 2019.</p>
</div>
</div>
<div class="col-md-6">
<!-- A div element with a class of "float-right" -->
<div class="float-right">
<!-- Social media icons here -->
</div>
</div>
</div>
</div>
</div>

</body>
</html>

Css In home page:

 The body selector sets the font, margin, and padding for the entire body of the
website.
 The header selector sets the background color, text color, display, justify-content,
padding, and font size for the header element.
 The nav selector sets the display, justify-content, width, and text-align for the
navigation menu.
 The nav ul selector sets the display, list-style, margin, and padding for the unordered
list within the navigation menu.
 The nav ul li selector sets the margin for the list items within the navigation menu.
 The nav ul li a selector sets the color for the links within the navigation menu.
 The nav ul li a:hover selector sets the color for the links when the user hovers over
them.
 The .bst selector sets the border color, border style, background color, and margin
for the element with the class "bst".
 The #section1.section, #section2.section, #section3.section,
and #section4.section selectors set the padding, background color, border radius,
box shadow, and margin for the elements with the class "section" and the IDs
"section1", "section2", "section3", and "section4", respectively.
 The .plm selector sets the padding, background color, border radius, box shadow, and
margin for the element with the class "plm".
 The .facts selector sets the padding, background color, border radius, box shadow,
and margin for the element with the class "facts".
 The .frame selector sets the width, overflow, height, position, margin, and margin-left
for the element with the class "frame".
 The .imgContainer selector sets the display for the element with the class
"imgContainer".
 The .imgContainer img selector sets the width, height, and position for the images
within the element with the class "imgContainer".
 The @keyframes slide rule defines the animation for the images within the element
with the class "imgContainer".
 The .buttonn selector sets the display, padding, text-decoration, border, cursor,
width, and margin-top for the element with the class "buttonn".
 The .button-container selector sets the display, justify-content, and flex for the
element with the class "button-container".
 The .button selector sets the flex, text-align, and margin-left for the element with the
class "button".
 The .container selector sets the width and margin-left for the element with the class
"container".
 The .container .card selector sets the width, position, height, background, margin,
padding, display, flex-direction, box-shadow, transition, and margin-top for the
elements with the class "card" within the element with the class "container".
 The .main-container selector sets the display, width, justify-content, and flex for the
element with the class "main-container".
 The .pdf-container selector sets the width, height, overflow, and padding for the
element with the class "pdf-container".
 The .pdf selector sets the width and height for the element with the class "pdf".
 The #footer selector sets the margin-top, background-color, and padding for the
element with the ID "footer".
 The #footer a selector sets the color for the links within the element with the ID
"footer".
 The #footer a:hover selector sets the text-decoration for the links when the user
hovers over them within the element with the ID "footer".
 The #footer h5 selector sets the margin-bottom and color for the heading within the
element with the ID "footer".
 The #footer ul selector sets the list-style-type, padding, and margin for the
unordered list within the element with the ID "footer".
 The #footer li selector sets the margin-bottom for the list items within the element
with the ID "footer".
 The #footer form selector sets the margin-bottom for the form within the element
with the ID "footer".
 The #footer .form-control selector sets the width, padding, margin-bottom, and
display for the input element within the form within the element with the ID "footer".
 The #footer button selector sets the width, padding, margin-bottom, background-
color, and border for the button within the form within the element with the ID
"footer".
 The #footer button:hover selector sets the background-color and cursor for the
button when the user hovers over it within the form within the element with the ID
"footer".

The HTML code includes the following:

 A header element with a navigation menu, which includes links to the different
sections of the website.
 A section element for each of the main sections of the website, with a title,
description, and an element with the class "plm" containing information and an image.
 A "learn more" section with an image container, an iframe for embedding PDF
documents, and a "facts" section containing interesting facts about the company.
 A "get started" section with a form for collecting user information and a button for
downloading the PDF document.
 A "footer" element with links to the company's social media profiles, contact
information, and terms of service.
Transparency page:

<!-- Menu bar with three buttons -->


<div style="text-align: center;" class="menubt">
<button id="button1">Programs and Projects</button>
<button id="button2">Executive Offices</button>
<button id="button3">Historical Background</button>
</div>

<!-- Section 1: Programs and Projects -->


<div id="section1" class="section">
<!-- Title with background color and padding -->
<h2 style="text-align: center;background-color: antiquewhite;padding: 20px;">Notable programs
and projects related to Lal-lo, Cagayan:</h2>

<!-- List of programs and projects -->


<h4>Solar Power Plant:</h4>
<p>The project is expected to be operational by early next year, producing 188 gigawatt-hours of
renewable energy annually, enough to power approximately 75,000 households while avoiding
around 112,405 metric tons of carbon dioxide emissions.</p>

<!-- More programs and projects -->


<h4>Farm Learning System (FLS) and Dairy Buffalo Production (DBP):</h4>
<p>The FLS-DBP is a 34-week learning modality that focuses on dairy buffalo production. </p>

<!--... -->

</div>

<!-- Section 2: Executive Offices -->


<div id="section2" class="section">
<!-- Title with background color and padding -->
<h2 style="text-align: center;background-color: antiquewhite;padding: 20px;">Executive
Offices</h2>

<!-- List of executive offices -->


<ul style="list-style-type:square;">
<li>Office of the Mayor</li>
<li>Municipal Accounting Office</li>
<li>Municipal Budget Office</li>
<!--... -->
</ul>
</div>

<!-- Section 3: Historical Background -->


<div id="section3" class="section">
<!-- Title with background color and padding -->
<h2 style="text-align: center;background-color: antiquewhite;padding: 20px;">Let’s delve into the
historical background of Lal-lo, Cagayan:</h2>

<!-- Historical background information -->


<h4>Origins and Early History:</h4>
<p>Lal-lo, previously known as Nueva Segovia, holds a significant place in Philippine history as one
of the first cities established in the country, alongside Manila, Cebu, and Naga. During colonial times,
Lal-lo served as the center of trade and religious activities in Northern Luzon.</p>
<!--... -->

<!-- Sources -->


<p style="color: blue;">
Sources:
themermaidtravels.com
en.wikipedia.org
philatlas.com
philippineculturaleducation.com.ph
investincagayanprovince.com.ph
</p>
</div>

<!-- JavaScript code for menu bar functionality -->


<script src="script.js"></script>

Opportunities page:

<div class="pdf-container">
<!-- The embed tag is used to embed a PDF file in an HTML document -->
<embed class="pdf"
<!-- The src attribute specifies the location of the PDF file -->
src="C:\Users\Cristine\Desktop\cris_website - Copy\main menu\www-investincagaya....pdf"
<!-- The width and height attributes specify the dimensions of the embedded PDF -->
width="100%" height="600px">
</div>

Business Page:

<!-- Section 1: Information about the Municipality of Lal-lo's business environment and regulations -->
<div id="section1" class="section">
<!-- Title with centered text, antiquewhite background color, and padding -->
<h2 style="text-align: center;background-color: antiquewhite;padding: 20px;">
Information about the Municipality of Lal-lo's business environment and regulations.
</h2>

<!-- Subtitle: Overview -->


<h4>Overview</h4>
<!-- Paragraph describing Lal-lo's location and population -->
<p>
Lal-lo is a coastal municipality located in the province of Cagayan.
It covers a land area of approximately 702.80 square kilometers (271.35 square miles),
which constitutes about 7.48% of Cagayan’s total area.
As of the 2020 Census, the population of Lal-lo was 48,733
</p>

<!-- Horizontal rule to separate sections -->


<hr>

<!-- Subtitle: Financial Highlights (Year 2020) with centered text -->
<h4 style="text-align: center;">Financial Highlights (Year 2020):</h4>
<!-- Horizontal rule to separate sections -->
<hr>

<!-- Unordered list with square bullets -->


<ul style="list-style-type:square;">
<!-- List item: Classification of Lal-lo as a first-class municipality -->
<li>
Lal-lo is classified as a first-class municipality with a population of over 60,000 constituents
based on a survey conducted by the Barangay Population Officers as of December 31, 2020.
</li>

<!-- List item: Number of barangays and land area -->


<li>
It has 35 barangays spread over 70,280 hectares, making it the fourth largest municipality
in the Province of Cagayan in terms of land area.
</li>

<!-- List item: Financial position of Lal-lo in 2020 -->


<li>
The financial position of Lal-lo in 2020 was as follows:
<!-- Nested unordered list with circle bullets -->
<ul style="list-style-type:circle;">
<li>Assets: PHP 678,452,765.97</li>
<li>Liabilities: PHP 325,829,340.64</li>
<li>Government Equity: PHP 352,623,425.33</li>
</ul>
</li>

<!-- List item: Financial performance highlights -->


<li>
Financial performance highlights:
<!-- Nested unordered list with circle bullets -->
<ul style="list-style-type:circle;">
<li>Income: PHP 361,257,495.59</li>
<li>Expense: PHP 312,339,842.66</li>
</ul>
</li>

<!-- Horizontal rule to separate sections -->


<hr>

<!-- Subtitle: Audit and Compliance with centered text -->


<h4 style="text-align: center;">Audit and Compliance:</h4>
<!-- Horizontal rule to separate sections -->
<hr>

<!-- List item: Audit conducted by the Commission on Audit (COA) for 2020 -->
<li>
The Commission on Audit (COA) conducted an audit of the accounts and operations of the
Municipality of Lal-lo for the year 2020. The audit aimed to determine whether management
presented the financial statements in adherence to the International Public Sector
Accounting Standards (IPSAS) and whether prevailing laws, rules, and regulations were
complied with. It also assessed the efficient and effective utilization of funds
</li>

<!-- List item: Audit conducted by the COA for 2021 -->
<li>
Similarly, the COA conducted an audit for CY 2021, focusing on financial statements
adherence to the Philippine Public Sector Accounting Standards (PPSAS) and compliance
with laws and regulations
</li>
</ul>
</div>\

Tourism Page:;

<!-- Container for the Tourism section -->


<div class="plm">
<!-- Title with centered text -->
<h1 style="text-align: center;">Tourism</h1>
<!-- Subtitle with centered text -->
<p style="text-align: center;">Explore the natural and cultural attractions of the Municipality of Lal-
lo.</p>

<!-- Container for the main content -->


<div class="main-container">

<!-- Container for the first card -->


<div class="container">
<!-- Card for the first container -->
<div class="card">
<!-- Title for the card -->
<h2>How to get there??</h2>
<!-- Description for the card -->
<p><br>Lal-lo is a coastal municipality located in the province of Cagayan, Philippines.
It’s part of the Cagayan Valley region in Luzon and is known for its rich history and
cultural heritage. It’s situated along the Cagayan River, which is
the longest and largest river in the Philippines
</p>
<!-- Button for the card -->
<a style="text-align: right;" href="how-to-get-here.html">
<button>How to Get Here</button>
</a>
</div>
</div>

<!-- Container for the second card -->


<div class="container">
<!-- Card for the second container -->
<div class="card">
<!-- Title for the card -->
<h2>What to See and Explore?? </h2>
<!-- Description for the card -->
<p><br>Lal-lo offers many attractions and places to visit.
Here are the most important ones: Magapit Suspension Bridge,
Tucalana Ruins, Reggae Ranch, and Castle in the sky. Below
you will find a complete list of places worth visiting.
</p>
<!-- Button for the card -->
<a style="text-align: right;" href="lallo-attractions.html">
<button>Lallo Attractions</button>
</a>
</div>
</div>

<!-- Container for the third card -->


<div class="container">
<!-- Card for the third container -->
<div class="card">
<!-- Title for the card -->
<h2> Lal-lo Accommodations </h2>
<!-- Description for the card -->
<p><br>A place where you can live or stay, often temporarily.
It can include various types of lodgings such as hotels, guesthouses,
hostels, and apartments. It also provide additional
services like meals and housekeeping.
</p>
<!-- Button for the card -->
<a style="text-align: right;"href="lallo-accommodations.html"><button>Lallo
Accommodations</button>
</a>
</div>
</div>

<!-- Container for the fourth card -->


<div class="container">
<!-- Card for the fourth container -->
<div class="card">
<!-- Title for the card -->
<h2> Cabibi Festival </h2>
<!-- Description for the card -->
<p><br>CABIBI FESTIVAL is the patronal town fiesta of Lal-lo in Cagayan
from August 1-4th of the year. The four-day festival features trade
fairs and street dancing to celebrate the town’s transition from
paganism into Christianity during the Spanish colonization.
</p>
<!-- Button for the card -->
<a style="text-align: right;"href="cabibi.html"><button> Cabibi Festival</button>
</a>
</div>
</div>

</div>
</div>
About Page:

This code is for a webpage that displays information about the Municipality of Lal-lo,
specifically its business environment and regulations, financial highlights, and audit
and compliance.

The first section of the code is a menu bar with buttons for different sections of the
webpage. The second section is the main content area, which currently displays
information about the business environment and regulations in Lal-lo.

The third section is a container that holds the images and information for the elected
officials of Lal-lo, including the mayor, vice mayor, and municipal councilors. The
images are displayed in a grid layout, with each image linked to a larger version of the
image when clicked.

The fourth section is a container that holds the images and information for the
barangays (villages) of Lal-lo. The images are displayed in a grid layout, with each
image linked to a larger version of the image when clicked.

The fifth section is a container that holds information about the schools in Lal-lo. The
information is displayed in a list format, with each school having its own section with a
title, location, and description.

The code also includes a script that uses the Intersection Observer API to animate the
cards on the page as they come into view. This is done by creating an
IntersectionObserver object and observing each card element on the page. When a
card comes into view, the observer triggers a callback function that changes the
visibility and animation properties of the card.

Overall, this code provides a well-organized and visually appealing way to display
information about the Municipality of Lal-lo.The use of images, grid layouts, and
animations helps to engage the user and make the content more accessible.

 class="card col-lg-3 col-md-3 col-sm-12": This is the class attribute of


the div element, which assigns one or more classes to the element. In this case, there
are four classes assigned:
 card: This is a custom class, likely defined in a CSS stylesheet, that applies specific
styles to the element. The name "card" suggests that this element might be used to
display a card-like component, such as a product card or a profile card.
 col-lg-3: This class is part of the Bootstrap CSS framework, which is a popular front-
end framework for building responsive web applications. The col-lg-3 class applies
styles to the element to make it occupy 3 columns (out of 12) on large screens
(defined as lg or large).
 col-md-3: This class is similar to the previous one, but it applies styles for medium-
sized screens (defined as md or medium). On medium screens, the element will occupy
3 columns.
 col-sm-12: This class applies styles for small screens (defined as sm or small). On
small screens, the element will occupy the full width of the container (12 columns).

In summary, this div element has four classes assigned to it:

 card: A custom class for styling the element as a card-like component.


 col-lg-3, col-md-3, and col-sm-12: Bootstrap classes that define the element's
layout and width on different screen sizes.
<script>
// Function to check if an element is in viewport
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

// Callback function to handle intersection


function handleIntersection(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.visibility = "visible";
} else {
entry.target.style.visibility = "hidden";
}
entry.target.style.animation = "slow 1.5s ease-in-out";
});
}

// Options for the IntersectionObserver


const options = {
root: null,
rootMargin: '0px',
threshold: 0.3 // Adjust this threshold as needed
};

// Create an IntersectionObserver
const observer = new IntersectionObserver(handleIntersection, options);

// Select all cards


const cards = document.querySelectorAll('.card');

// Observe each card


cards.forEach(card => {
observer.observe(card);
});
</script>

// Include external JavaScript file


<script src="script.js"></script>

Lallo Attractions page:

<!--
This is a HTML structure for a card component that displays an image with a layered effect and some
information about the image.
The outermost div has a class of "card" which likely defines the overall style and layout of the card.
-->
<div class="card">
<!--
Two img elements: one for the main image and one for the background, likely used to create a
layered effect
-->
<img src="images/ruins.jpg" class="image">
<img src="images/ruins.jpg" class="background">
<!--
A div with a class of "layer" that contains the information about the image
-->
<div class="layer">
<!--
A div with a class of "info" that contains the heading and paragraph with information about the
image
-->
<div class="info">
<h1>Tucalana Ruins</h1>
<p>It’s a place that not only tells the story of its own resilience but also offers a peaceful
retreat for those who appreciate history and nature.</p>
</div>
</div>
</div>

/*
* is a universal selector that applies styles to all elements
* margin and padding are set to 0 to remove any default spacing
* box-sizing is set to border-box to include padding and border in the element's width and height
* font-family is set to Poppins, a sans-serif font
* color is set to white, making all text white
* transition is set to 0.5s, applying a smooth transition to all properties
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: white;
transition: 0.5s;
}

/*
body styles
* width and height are set to 100% to take up the full viewport
* display is set to flex to center the content horizontally and vertically
* align-items and justify-content are set to center to center the content
*/
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

/*
body pseudo-element styles
* content is set to an empty string to create a pseudo-element
* background-image is set to an image of ruins
* position is set to absolute to position the pseudo-element behind the body
* width and height are set to 100% to take up the full viewport
* background-size is set to cover to scale the image to cover the entire element
* background-position is set to center to center the image
* filter is set to brightness(0.25) to reduce the brightness of the image
* z-index is set to -1 to place the pseudo-element behind the body
*/
body::before {
content: "";
background-image: url(images/ruins.jpg);
position: absolute;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
filter: brightness(0.25);
z-index: -1;
}

/*
main styles
* width and height are set to 800px and 500px, respectively
* display is set to flex to lay out the content in a row
* gap is set to 15px to add space between the elements
*/
main {
width: 800px;
height: 500px;
display: flex;
gap: 15px;
}

/*
card styles
* width is set to 10% to take up 10% of the parent element's width
* border-radius is set to 15px to round the corners
* cursor is set to pointer to change the cursor to a pointer on hover
* overflow is set to hidden to hide any overflowing content
*/
.card {
width: 10%;
border-radius: 15px;
cursor: pointer;
overflow: hidden;
}

/*
card hover styles
* width is set to 80% to take up 80% of the parent element's width on hover
*/
.card:hover {
width: 80%;
}
/*
card image styles
* width and height are set to 100% to take up the full width and height of the card
* object-fit is set to cover to scale the image to cover the entire element
*/
.card.image {
width: 100%;
height: 100%;
object-fit: cover;
}

/*
card image hover styles
* transform is set to scale(1.2) to scale the image up by 20% on hover
*/
.card:hover.image {
transform: scale(1.2);
}

/*
card background styles
* position is set to absolute to position the background behind the card
* left and top are set to 0 to position the background at the top-left corner
* z-index is set to -1 to place the background behind the card
* width and height are set to 100% to take up the full width and height of the card
* object-fit is set to cover to scale the background to cover the entire element
* pointer-events is set to none to prevent the background from receiving pointer events
* filter is set to brightness(0.25) to reduce the brightness of the background
* opacity is set to 0 to hide the background initially
*/
.card.background {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100vh;
object-fit: cover;
pointer-events: none;
filter: brightness(0.25);
opacity: 0;
}

/*
card background hover styles
* opacity is set to 1 to show the background on hover
*/
.card:hover.background {
opacity: 1;
}

The container has a pseudo-element with a background image. The container has a
flexbox layout, with the gap property set to add space between the card elements.
The card elements themselves are flex items, with their widths set to 10% of the
container width.
pseudo-element is a fictional element that is not actually present in the HTML
document, but is created by the browser to allow for additional styling and layout
control.

Pseudo-elements are denoted by a double colon ( ::) followed by the name of the
pseudo-element. For example, ::before and ::after are two common pseudo-
elements.

Pseudo-elements are used to:

1. Add content: Pseudo-elements can be used to add content to an element, such as an


icon or a background image.
2. Style specific parts of an element: Pseudo-elements can be used to style specific
parts of an element, such as the first letter or line of text.
3. Create complex layouts: Pseudo-elements can be used to create complex layouts,
such as creating a grid or a flexible box layout.

On hover, the card's width expands to 80% of the container width, effectively making
it "pop out" and reveal more of the background image.

The card image is positioned behind the card using absolute positioning, and it also
scales up on hover to reveal more of the image.

The card background is positioned behind the card and takes up the full width and
height of the card. It has its pointer-events property set to none to prevent it from
receiving pointer events. The background's brightness is reduced using the filter
property, and its opacity is set to 0 initially to hide it. On hover, the background's
opacity is set to 1, revealing the background image behind the card.

This solution creates a visually appealing effect where the card's image and
background "pop out" and reveal more information on hover.

Lal-lo Accommodations Page:

<!-- Container element that holds the card elements -->


<div class="container">
<!-- Card element -->
<div class="card">
<!-- Image box element that holds the image and text -->
<div class="imgBx">
<!-- Link to a URL (not specified) -->
<a href="#">
<!-- Image element -->
<img src="images/solomon.jpg">
</a>
<!-- Header element with text -->
<h2>Solomon's Hotel and Resorts</h2>
<!-- Paragraph element with text -->
<p><br>A hotel that offers a comfortable
base for exploring Lal-lo, suitable for
both solo travelers and those with companions
</p>
</div>
</div>
</div>

You might also like