How would I separate this code into 2 different pages? 1st homepage and 2nd New Orleans page. I am having trouble refining my code. Chicago Public Restroom Locator POTTY SPOTTY About Locations Contacts Le Catering About Potty Spotty More Information Description Hereseasonal Locations. Description Here. New Orleans First Bathroom Bathroom Description Second Bathroom Bathroom Description Third Bathroom Bathroom Description Fourth Bathroom Bathroom Description Fifth Bathroom Bathroom Description Contact Description Service, Address You can also contact us by phone 00553123-2323 or email blank@blank.com, or you can send us a message here: SEND MESSAGE Powered by w3.css
How would I separate this code into 2 different pages? 1st homepage and 2nd New Orleans page. I am having trouble refining my code.
<!DOCTYPE html>
<html>
<head>
<title>Chicago Public Restroom Locator</title>
<meta charset="UTF-8">
<meta name="POTTY SPOTTY" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Insert Website Here">
<style>
body {font-family: "Times New Roman", Georgia, Serif;}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display";
letter-spacing: 5px;
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">
<a href="#home" class="w3-bar-item w3-button">POTTY SPOTTY</a>
<!-- Right-sided navbar links. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#menu" class="w3-bar-item w3-button">Locations</a>
<a href="#contact" class="w3-bar-item w3-button">Contacts</a>
</div>
</div>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
<img class="w3-image" src="Insert Picture" alt="Insert Picture" width="1600" height="800">
<div class="w3-display-bottomleft w3-padding-large w3-opacity">
<h1 class="w3-xxlarge">Le Catering</h1>
</div>
</header>
<!-- Page content -->
<div class="w3-content" style="max-width:1100px">
<!-- About Section -->
<div class="w3-row w3-padding-64" id="about">
<div class="w3-col m6 w3-padding-large w3-hide-small">
<img src="Image.jpeg" class="w3-round w3-image w3-opacity-min" alt="Location" width="600" height="750">
</div>
<div class="w3-col m6 w3-padding-large">
<h1 class="w3-center">About Potty Spotty</h1><br>
<h5 class="w3-center">More Information</h5>
<p class="w3-large">Description Here<span class="w3-tag w3-light-grey">seasonal</span> Locations.</p>
<p class="w3-large w3-text-grey w3-hide-medium">Description Here.</p>
</div>
</div>
<hr>
<!-- Menu Section -->
<div class="w3-row w3-padding-64" id="menu">
<div class="w3-col l6 w3-padding-large">
<h1 class="w3-center">New Orleans</h1><br>
<h4>First Bathroom</h4>
<p class="w3-text-grey">Bathroom Description</p><br>
<h4>Second Bathroom</h4>
<p class="w3-text-grey">Bathroom Description</p><br>
<h4>Third Bathroom</h4>
<p class="w3-text-grey">Bathroom Description</p><br>
<h4>Fourth Bathroom</h4>
<p class="w3-text-grey">Bathroom Description</p><br>
<h4>Fifth Bathroom</h4>
<p class="w3-text-grey">Bathroom Description</p>
</div>
<div class="w3-col l6 w3-padding-large">
<img src="Image.jpg" class="w3-round w3-image w3-opacity-min" alt="New Orleans" style="width:100%">
</div>
</div>
<hr>
<!-- Contact Section -->
<div class="w3-container w3-padding-64" id="contact">
<h1>Contact</h1><br>
<p>Description</p>
<p class="w3-text-blue-grey w3-large"><b>Service, Address</b></p>
<p>You can also contact us by phone 00553123-2323 or email blank@blank.com, or you can send us a message here:</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16" type="number" placeholder="How many people" required name="People"></p>
<p><input class="w3-input w3-padding-16" type="datetime-local" placeholder="Date and time" required name="date" value="2020-11-16T20:00"></p>
<p><input class="w3-input w3-padding-16" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
<p><button class="w3-button w3-light-grey w3-section" type="submit">SEND MESSAGE</button></p>
</form>
</div>
<!-- End page content -->
</div>
<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-32">
<p>Powered by <a href="Website" title="Potty Spotty" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 6 images
