Device Sync
This commit is contained in:
@@ -1,37 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My First Sample Site</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Heading One</h1>
|
||||
<ul>
|
||||
<li><a href=#>Contact Us</a></li>
|
||||
<li><a href=#>Call Us</a></li>
|
||||
<li><a href=#>More Info</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quidem explicabo animi accusamus temporibus ex error odit porro dolore in quasi nulla <b>voluptatem consectetur labore, quis, autem, voluptates</b> id natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, nesciunt deleniti, exercitationem totam amet a laudantium ut tenetur itaque quos similique in molestiae eligendi ipsam voluptatibus repellendus vitae sequi consequatur.</p>
|
||||
<b><i>This is a smaller paragraph!</i></b>
|
||||
|
||||
<h2>Heading Two</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde illo ratione culpa nisi. Repellat, at! Eaque quasi, sequi, quo exercitationem similique provident incidunt, temporibus nam repellendus dolores vero dolor sed? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti deserunt quaerat quas, non ipsa pariatur? Nulla cum ullam, dolore autem repellat voluptatum est modi fuga a odit at repudiandae dolor!</p>
|
||||
<img src="img/brick.jpg" alt="A picture of bricks" height="150">
|
||||
<img src="img/rust.jpg" alt="A picture of rust" height="150">
|
||||
<img src="img/wood.jpg" alt="A picture of wood" height="150">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quidem rem, autem deserunt pariatur ex quos ab excepturi quasi odit veritatis labore vitae animi fugit dicta, totam commodi. Cumque, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores cum illum, tempore nisi maxime est aut delectus exercitationem sapiente veritatis id vero enim, reiciendis blanditiis quis temporibus voluptate dolorum dignissimos?</p>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
<li>Fouth item</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>© 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
|
||||
</footer>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My First Sample Site</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Heading One</h1>
|
||||
<ul>
|
||||
<li><a href=#>Contact Us</a></li>
|
||||
<li><a href=#>Call Us</a></li>
|
||||
<li><a href=#>More Info</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quidem explicabo animi accusamus temporibus ex error odit porro dolore in quasi nulla <b>voluptatem consectetur labore, quis, autem, voluptates</b> id natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, nesciunt deleniti, exercitationem totam amet a laudantium ut tenetur itaque quos similique in molestiae eligendi ipsam voluptatibus repellendus vitae sequi consequatur.</p>
|
||||
<b><i>This is a smaller paragraph!</i></b>
|
||||
|
||||
<h2>Heading Two</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde illo ratione culpa nisi. Repellat, at! Eaque quasi, sequi, quo exercitationem similique provident incidunt, temporibus nam repellendus dolores vero dolor sed? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti deserunt quaerat quas, non ipsa pariatur? Nulla cum ullam, dolore autem repellat voluptatum est modi fuga a odit at repudiandae dolor!</p>
|
||||
<img src="img/brick.jpg" alt="A picture of bricks" height="150">
|
||||
<img src="img/rust.jpg" alt="A picture of rust" height="150">
|
||||
<img src="img/wood.jpg" alt="A picture of wood" height="150">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quidem rem, autem deserunt pariatur ex quos ab excepturi quasi odit veritatis labore vitae animi fugit dicta, totam commodi. Cumque, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores cum illum, tempore nisi maxime est aut delectus exercitationem sapiente veritatis id vero enim, reiciendis blanditiis quis temporibus voluptate dolorum dignissimos?</p>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
<li>Fouth item</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>© 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -1,22 +1,22 @@
|
||||
body {
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: deepskyblue;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
body {
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: deepskyblue;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>About Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>About the Travel Spot</h1>
|
||||
<img src="./img/paris.jpg" alt="The eiffel tower">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt <b>iusto fugiat!</b></p>
|
||||
<h2>Satisfaction Guaranteed!</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti libero commodi, nesciunt sed non a necessitatibus iste illum architecto eum cumque quo nemo, praesentium magni vero facilis iusto. Quaerat, nulla! Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet dicta, similique facilis impedit corporis repellat aliquid autem veritatis eaque eos, velit cupiditate ratione enim vel dolorum, laborum ut. Ipsum.</p>
|
||||
<p>Four Reasons to travel with us</p>
|
||||
<ol>
|
||||
<li>customer service</li>
|
||||
<li>prices</li>
|
||||
<li>variety</li>
|
||||
<li>experience</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>About Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>About the Travel Spot</h1>
|
||||
<img src="./img/paris.jpg" alt="The eiffel tower">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt <b>iusto fugiat!</b></p>
|
||||
<h2>Satisfaction Guaranteed!</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti libero commodi, nesciunt sed non a necessitatibus iste illum architecto eum cumque quo nemo, praesentium magni vero facilis iusto. Quaerat, nulla! Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet dicta, similique facilis impedit corporis repellat aliquid autem veritatis eaque eos, velit cupiditate ratione enim vel dolorum, laborum ut. Ipsum.</p>
|
||||
<p>Four Reasons to travel with us</p>
|
||||
<ol>
|
||||
<li>customer service</li>
|
||||
<li>prices</li>
|
||||
<li>variety</li>
|
||||
<li>experience</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Contact Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>Contact the Travel Spot</h1>
|
||||
<p>152 King Street <br> London, Ontario N6R 4T5
|
||||
<br>
|
||||
<b>tel: </b><a href="tel:5195559045">519 555-9045</a>
|
||||
<br>
|
||||
<b>email: </b><a href="mailto:info@travel.com">info@travel.com</a>
|
||||
</p>
|
||||
<h2>Special Prices</h2>
|
||||
<table class="priceTable">
|
||||
<caption style="caption-side: bottom; text-align: left;">
|
||||
<br>
|
||||
<b>Note: </b><p>Meals are not included.</p>
|
||||
</caption>
|
||||
<tr>
|
||||
<th>Destination</th>
|
||||
<th>1 Week</th>
|
||||
<th>2 Weeks</th>
|
||||
<th>3 Weeks</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Paris</th>
|
||||
<td>$850</td>
|
||||
<td>$1,250</td>
|
||||
<td>$1,990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Italy</th>
|
||||
<td>$750</td>
|
||||
<td>$1,000</td>
|
||||
<td>$1,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Brazil</th>
|
||||
<td>$900</td>
|
||||
<td>$1,300</td>
|
||||
<td>$2,100</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Contact Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>Contact the Travel Spot</h1>
|
||||
<p>152 King Street <br> London, Ontario N6R 4T5
|
||||
<br>
|
||||
<b>tel: </b><a href="tel:5195559045">519 555-9045</a>
|
||||
<br>
|
||||
<b>email: </b><a href="mailto:info@travel.com">info@travel.com</a>
|
||||
</p>
|
||||
<h2>Special Prices</h2>
|
||||
<table class="priceTable">
|
||||
<caption style="caption-side: bottom; text-align: left;">
|
||||
<br>
|
||||
<b>Note: </b><p>Meals are not included.</p>
|
||||
</caption>
|
||||
<tr>
|
||||
<th>Destination</th>
|
||||
<th>1 Week</th>
|
||||
<th>2 Weeks</th>
|
||||
<th>3 Weeks</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Paris</th>
|
||||
<td>$850</td>
|
||||
<td>$1,250</td>
|
||||
<td>$1,990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Italy</th>
|
||||
<td>$750</td>
|
||||
<td>$1,000</td>
|
||||
<td>$1,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Brazil</th>
|
||||
<td>$900</td>
|
||||
<td>$1,300</td>
|
||||
<td>$2,100</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Home Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>Welcome to the Travel Spot</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum autem odio voluptas similique quae quam totam, est sapiente neque omnis veniam pariatur sint, culpa mollitia, porro facilis deserunt eum dicta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque provident cum, est iusto, a suscipit beatae expedita voluptatem dignissimos harum porro sint eveniet tempore. Et itaque dolorum recusandae quis soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas quidem voluptatibus amet, reiciendis sit eligendi nihil! Ducimus praesentium delectus at itaque quaerat blanditiis rem asperiores adipisci facilis aliquam? Error, libero!</p>
|
||||
<img src="./img/barbados.jpg" alt="A beach in Barbados">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt iusto fugiat!</p>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="en-CA">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Home Page - Travel Spot</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="/img/logo.jpg" alt="Company logo">
|
||||
<ul class="mainNav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1>Welcome to the Travel Spot</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum autem odio voluptas similique quae quam totam, est sapiente neque omnis veniam pariatur sint, culpa mollitia, porro facilis deserunt eum dicta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque provident cum, est iusto, a suscipit beatae expedita voluptatem dignissimos harum porro sint eveniet tempore. Et itaque dolorum recusandae quis soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas quidem voluptatibus amet, reiciendis sit eligendi nihil! Ducimus praesentium delectus at itaque quaerat blanditiis rem asperiores adipisci facilis aliquam? Error, libero!</p>
|
||||
<img src="./img/barbados.jpg" alt="A beach in Barbados">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt iusto fugiat!</p>
|
||||
<hr>
|
||||
<p>Copyright © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +1,29 @@
|
||||
.mainNav {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.priceTable {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
caption p {
|
||||
display: inline;
|
||||
}
|
||||
.mainNav {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.priceTable {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
caption p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@@ -1,115 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration - Travel Spot</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="EN">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="img/logo.jpg" alt="Company logo">
|
||||
<hr>
|
||||
<h1>Sign Up</h1>
|
||||
<h2>Your next travel starts here!</h2>
|
||||
<p>Fill in the form below:</p>
|
||||
|
||||
<label for="regDate">Registration date:</label>
|
||||
<input type="datetime-local" id="regDate" name="regDate">
|
||||
<br><br>
|
||||
|
||||
<!--Personal Information form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email"><br>
|
||||
<label for="telephone">Phone:</label>
|
||||
<input type="tel" id="telephone" name="telephone"><br>
|
||||
<label for="passport" name="passport">Passport:</label>
|
||||
<input type="file" id="passport" name="passport"><br>
|
||||
<label for="stress">What is your stress level?</label>
|
||||
<input type="range" id="stress" name="stress">
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Destination form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Destination</legend>
|
||||
<p>Tell us where you want to go:</p>
|
||||
<label for="pplTravelling">How many people will be travelling?</label>
|
||||
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
||||
<label for="period">Preferred Travel Period:</label>
|
||||
<select id="period" name="period" required>
|
||||
<option value="select">-Select-</option>
|
||||
<option value="summer">Summer</option>
|
||||
<option value="winter">Winter</option>
|
||||
</select><br>
|
||||
<label for="destination">Destination:</label>
|
||||
<input type="text" id="destination" name="destination"><br>
|
||||
<label for="departDate">Date of Departure:</label>
|
||||
<input type="date" id="departDate" name="departDate"><br>
|
||||
<label for="returnDate">Date of Return:</label>
|
||||
<input type="date" id="returnDate" name="returnDate"><br>
|
||||
<label for="includeFlight">Include Flight</label>
|
||||
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
||||
<label for="includeHotel">Include Hotel</label>
|
||||
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
||||
<label for="includeMeals">Include Meals</label>
|
||||
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Experience field-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Experience</legend>
|
||||
<p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
|
||||
<label for="lastDest">Last Destination:</label>
|
||||
<input type="text" id="lastDest" name="lastDest"><br>
|
||||
|
||||
<!--First radio button group-->
|
||||
<label>How do you rate the flight?</label>
|
||||
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
||||
<label for="flightRateGood">Good</label>
|
||||
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
||||
<label for="flightRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
||||
<label for="flightRateBad">Bad</label><br>
|
||||
|
||||
<!--Second radio button group-->
|
||||
<label>How do you rate the hotel?</label>
|
||||
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
||||
<label for="hotelRateGood">Good</label>
|
||||
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
||||
<label for="hotelRateNorm">Normal</label>
|
||||
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
||||
<label for="hotelRateBad">Bad</label><br>
|
||||
|
||||
<!--Third radio button group-->
|
||||
<label>How do you rate the meal?</label>
|
||||
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
||||
<label for="mealRateGood">Good</label>
|
||||
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
||||
<label for="mealRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
||||
<label for="mealRateBad">Bad</label><br>
|
||||
|
||||
<label for="experienceText">Describe your experience:</label><br>
|
||||
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>Copyright © 2025. Travel Spot.</p>
|
||||
</footer>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration - Travel Spot</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="EN">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="img/logo.jpg" alt="Company logo">
|
||||
<hr>
|
||||
<h1>Sign Up</h1>
|
||||
<h2>Your next travel starts here!</h2>
|
||||
<p>Fill in the form below:</p>
|
||||
|
||||
<label for="regDate">Registration date:</label>
|
||||
<input type="datetime-local" id="regDate" name="regDate">
|
||||
<br><br>
|
||||
|
||||
<!--Personal Information form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email"><br>
|
||||
<label for="telephone">Phone:</label>
|
||||
<input type="tel" id="telephone" name="telephone"><br>
|
||||
<label for="passport" name="passport">Passport:</label>
|
||||
<input type="file" id="passport" name="passport"><br>
|
||||
<label for="stress">What is your stress level?</label>
|
||||
<input type="range" id="stress" name="stress">
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Destination form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Destination</legend>
|
||||
<p>Tell us where you want to go:</p>
|
||||
<label for="pplTravelling">How many people will be travelling?</label>
|
||||
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
||||
<label for="period">Preferred Travel Period:</label>
|
||||
<select id="period" name="period" required>
|
||||
<option value="select">-Select-</option>
|
||||
<option value="summer">Summer</option>
|
||||
<option value="winter">Winter</option>
|
||||
</select><br>
|
||||
<label for="destination">Destination:</label>
|
||||
<input type="text" id="destination" name="destination"><br>
|
||||
<label for="departDate">Date of Departure:</label>
|
||||
<input type="date" id="departDate" name="departDate"><br>
|
||||
<label for="returnDate">Date of Return:</label>
|
||||
<input type="date" id="returnDate" name="returnDate"><br>
|
||||
<label for="includeFlight">Include Flight</label>
|
||||
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
||||
<label for="includeHotel">Include Hotel</label>
|
||||
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
||||
<label for="includeMeals">Include Meals</label>
|
||||
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Experience field-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Experience</legend>
|
||||
<p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
|
||||
<label for="lastDest">Last Destination:</label>
|
||||
<input type="text" id="lastDest" name="lastDest"><br>
|
||||
|
||||
<!--First radio button group-->
|
||||
<label>How do you rate the flight?</label>
|
||||
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
||||
<label for="flightRateGood">Good</label>
|
||||
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
||||
<label for="flightRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
||||
<label for="flightRateBad">Bad</label><br>
|
||||
|
||||
<!--Second radio button group-->
|
||||
<label>How do you rate the hotel?</label>
|
||||
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
||||
<label for="hotelRateGood">Good</label>
|
||||
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
||||
<label for="hotelRateNorm">Normal</label>
|
||||
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
||||
<label for="hotelRateBad">Bad</label><br>
|
||||
|
||||
<!--Third radio button group-->
|
||||
<label>How do you rate the meal?</label>
|
||||
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
||||
<label for="mealRateGood">Good</label>
|
||||
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
||||
<label for="mealRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
||||
<label for="mealRateBad">Bad</label><br>
|
||||
|
||||
<label for="experienceText">Describe your experience:</label><br>
|
||||
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>Copyright © 2025. Travel Spot.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,85 +1,85 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9fafc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2a6ebb;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #2a6ebb;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 6px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #2a6ebb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1d4f88;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 0.9em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9fafc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2a6ebb;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #2a6ebb;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 6px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #2a6ebb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1d4f88;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 0.9em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
@@ -1,111 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="./styles/styles.css">
|
||||
<title>Sandy's Cooking Blog</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<img class="logo" src="images/smileyface.png" alt="smily face" />
|
||||
<h1 class="main-heading">Sandy's Cooking Blog</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main Menu-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">About Sandy</a></li>
|
||||
<li><a href="#">Recipe Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main Page-->
|
||||
<main>
|
||||
<!-- Recipes -->
|
||||
<section>
|
||||
<div class="recipe-card">
|
||||
<h2>Dinner Party Ideas</h2>
|
||||
<div class="author">By: <strong>John</strong></div>
|
||||
<div class="publish-date">Jan 11, 2022</div>
|
||||
<img src="images/dinnerparty.jpg" alt="Dinner party food" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||
tempus nec, gravida eu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Weeknight Meals</h2>
|
||||
<div class="author">By: <strong>Mary</strong></div>
|
||||
<div class="publish-date">Jan 07, 2022</div>
|
||||
<img src="images/dinner.jpg" alt="Nice dinner" />
|
||||
<p>
|
||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||
non, leo. Phasellus suscipit felis non est.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Superbowl Snacks</h2>
|
||||
<div class="author">By: <strong>Sandy</strong></div>
|
||||
<div class="publish-date">Jan 06, 2022</div>
|
||||
<img src="images/nachos.jpg" alt="Plate of nachos" />
|
||||
<p>
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||
quis libero. Vivamus quam.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="about-sandy">
|
||||
<h2>About Sandy</h2>
|
||||
|
||||
<img src="images/smileyface.png" class="logo" alt="smiley face" />
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||
</p>
|
||||
<p>
|
||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
Copyright <strong>©</strong> 2025. Developed by
|
||||
<strong>Levi McLean</strong>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="./styles/styles.css">
|
||||
<title>Sandy's Cooking Blog</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<img class="logo" src="images/smileyface.png" alt="smily face" />
|
||||
<h1 class="main-heading">Sandy's Cooking Blog</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main Menu-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">About Sandy</a></li>
|
||||
<li><a href="#">Recipe Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main Page-->
|
||||
<main>
|
||||
<!-- Recipes -->
|
||||
<section>
|
||||
<div class="recipe-card">
|
||||
<h2>Dinner Party Ideas</h2>
|
||||
<div class="author">By: <strong>John</strong></div>
|
||||
<div class="publish-date">Jan 11, 2022</div>
|
||||
<img src="images/dinnerparty.jpg" alt="Dinner party food" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||
tempus nec, gravida eu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Weeknight Meals</h2>
|
||||
<div class="author">By: <strong>Mary</strong></div>
|
||||
<div class="publish-date">Jan 07, 2022</div>
|
||||
<img src="images/dinner.jpg" alt="Nice dinner" />
|
||||
<p>
|
||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||
non, leo. Phasellus suscipit felis non est.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Superbowl Snacks</h2>
|
||||
<div class="author">By: <strong>Sandy</strong></div>
|
||||
<div class="publish-date">Jan 06, 2022</div>
|
||||
<img src="images/nachos.jpg" alt="Plate of nachos" />
|
||||
<p>
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||
quis libero. Vivamus quam.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="about-sandy">
|
||||
<h2>About Sandy</h2>
|
||||
|
||||
<img src="images/smileyface.png" class="logo" alt="smiley face" />
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||
</p>
|
||||
<p>
|
||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
Copyright <strong>©</strong> 2025. Developed by
|
||||
<strong>Levi McLean</strong>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,126 +1,126 @@
|
||||
/* Beginner elements */
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/squares_bg.png);
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Header and logo */
|
||||
.logo {
|
||||
opacity: 30%;
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Dancing Script", cursive;
|
||||
color: teal;
|
||||
font-size: 2rem;
|
||||
text-shadow: 2px 2px 4px grey;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Navbar styling */
|
||||
nav {
|
||||
background-color: white;
|
||||
border-top: 5px solid teal;
|
||||
border-bottom: 5px solid teal;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
a {
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Recipe card styling */
|
||||
.recipe-card {
|
||||
margin: 2rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid grey;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 4px grey;
|
||||
}
|
||||
|
||||
.recipe-card img {
|
||||
display: block;
|
||||
margin: 1.5rem auto;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.recipe-card p {
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
margin: 2rem;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.author {
|
||||
text-align: right;
|
||||
margin-right: 1rem;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
text-align: right;
|
||||
color: rgba(75, 75, 75, 0.507);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* About section styling */
|
||||
.about-sandy {
|
||||
background-color: grey;
|
||||
background-image: url(../images/squares_bg.png);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.about-sandy p {
|
||||
text-align: left;
|
||||
line-height: 1.6rem;
|
||||
margin: 2rem;
|
||||
color: lightgrey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-sandy h2 {
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
text-shadow: 2px 2px 4px black;
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
background: teal;
|
||||
font-size: 1rem;
|
||||
color: lightgrey;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
footer strong {
|
||||
color: white;
|
||||
/* Beginner elements */
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/squares_bg.png);
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Header and logo */
|
||||
.logo {
|
||||
opacity: 30%;
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Dancing Script", cursive;
|
||||
color: teal;
|
||||
font-size: 2rem;
|
||||
text-shadow: 2px 2px 4px grey;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Navbar styling */
|
||||
nav {
|
||||
background-color: white;
|
||||
border-top: 5px solid teal;
|
||||
border-bottom: 5px solid teal;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
a {
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Recipe card styling */
|
||||
.recipe-card {
|
||||
margin: 2rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid grey;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 4px grey;
|
||||
}
|
||||
|
||||
.recipe-card img {
|
||||
display: block;
|
||||
margin: 1.5rem auto;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.recipe-card p {
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
margin: 2rem;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.author {
|
||||
text-align: right;
|
||||
margin-right: 1rem;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
text-align: right;
|
||||
color: rgba(75, 75, 75, 0.507);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* About section styling */
|
||||
.about-sandy {
|
||||
background-color: grey;
|
||||
background-image: url(../images/squares_bg.png);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.about-sandy p {
|
||||
text-align: left;
|
||||
line-height: 1.6rem;
|
||||
margin: 2rem;
|
||||
color: lightgrey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-sandy h2 {
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
text-shadow: 2px 2px 4px black;
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
background: teal;
|
||||
font-size: 1rem;
|
||||
color: lightgrey;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
footer strong {
|
||||
color: white;
|
||||
}
|
||||
@@ -1,111 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Sandy's Cooking Blog</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<img class="header-logo" src="images/smileyface.png" />
|
||||
<h1 class="header-title">Sandy's Cooking Blog</h1>
|
||||
|
||||
<nav class="header-nav">
|
||||
<ul class="header-nav-list">
|
||||
<li class="header-nav-list-item"><a href="#">Home</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">Categories</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">About Sandy</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">Recipe Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Page-->
|
||||
<main>
|
||||
<!-- Recipes -->
|
||||
<section class="recipes">
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Dinner Party Ideas</h2>
|
||||
<div class="recipe-by">By: <strong>John</strong></div>
|
||||
<div class="recipe-date">Jan 11, 2022</div>
|
||||
<img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
|
||||
<p class="recipe-desc">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||
tempus nec, gravida eu.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Weeknight Meals</h2>
|
||||
<div class="recipe-by">By: <strong>Mary</strong></div>
|
||||
<div class="recipe-date">Jan 07, 2022</div>
|
||||
<img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
|
||||
<p class="recipe-desc">
|
||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||
non, leo. Phasellus suscipit felis non est.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Superbowl Snacks</h2>
|
||||
<div class="recipe-by">By: <strong>Sandy</strong></div>
|
||||
<div class="recipe-date">Jan 06, 2022</div>
|
||||
<img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
|
||||
<p class="recipe-desc">
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||
quis libero. Vivamus quam.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="about">
|
||||
<h2 class="about-title">About Sandy</h2>
|
||||
<img class="about-logo" src="images/smileyface.png" />
|
||||
<p class="about-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||
</p>
|
||||
<p class="about-text">
|
||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p>Copyright <strong>©</strong> 2025.</p>
|
||||
<p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Sandy's Cooking Blog</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<img class="header-logo" src="images/smileyface.png" />
|
||||
<h1 class="header-title">Sandy's Cooking Blog</h1>
|
||||
|
||||
<nav class="header-nav">
|
||||
<ul class="header-nav-list">
|
||||
<li class="header-nav-list-item"><a href="#">Home</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">Categories</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">About Sandy</a></li>
|
||||
<li class="header-nav-list-item"><a href="#">Recipe Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Page-->
|
||||
<main>
|
||||
<!-- Recipes -->
|
||||
<section class="recipes">
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Dinner Party Ideas</h2>
|
||||
<div class="recipe-by">By: <strong>John</strong></div>
|
||||
<div class="recipe-date">Jan 11, 2022</div>
|
||||
<img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
|
||||
<p class="recipe-desc">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||
tempus nec, gravida eu.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Weeknight Meals</h2>
|
||||
<div class="recipe-by">By: <strong>Mary</strong></div>
|
||||
<div class="recipe-date">Jan 07, 2022</div>
|
||||
<img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
|
||||
<p class="recipe-desc">
|
||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||
non, leo. Phasellus suscipit felis non est.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="recipe">
|
||||
<h2 class="recipe-title">Superbowl Snacks</h2>
|
||||
<div class="recipe-by">By: <strong>Sandy</strong></div>
|
||||
<div class="recipe-date">Jan 06, 2022</div>
|
||||
<img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
|
||||
<p class="recipe-desc">
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||
quis libero. Vivamus quam.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="about">
|
||||
<h2 class="about-title">About Sandy</h2>
|
||||
<img class="about-logo" src="images/smileyface.png" />
|
||||
<p class="about-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||
</p>
|
||||
<p class="about-text">
|
||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p>Copyright <strong>©</strong> 2025.</p>
|
||||
<p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,303 +1,303 @@
|
||||
/* global settings */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: url(../images/squares_bg.png);
|
||||
color: #686868;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header-logo {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
opacity: 30%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: "Dancing script";
|
||||
font-size: 4.2rem;
|
||||
text-align: center;
|
||||
color: teal;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
border-top: 5px solid teal;
|
||||
border-bottom: 5px solid teal;
|
||||
padding: 0.4rem 0;
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.header-nav-list-item {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.header-nav-list-item a:link,
|
||||
.header-nav-list-item a:visited {
|
||||
font-size: 2.4rem;
|
||||
color: #686868;
|
||||
}
|
||||
|
||||
.header-nav-list-item a:hover,
|
||||
.header-nav-list-item a:active {
|
||||
color: teal;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.recipes {
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.recipe {
|
||||
margin: 2rem 1rem;
|
||||
border: 1px solid grey;
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 2.4rem 1.2rem;
|
||||
}
|
||||
|
||||
.recipe:hover {
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(-10px);
|
||||
/* we will learn this later. Don't worry about this line*/
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-family: "Dancing script";
|
||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
font-size: 3.6rem;
|
||||
color: teal;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
.recipe-by,
|
||||
.recipe-by strong,
|
||||
.recipe-date {
|
||||
text-align: right;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
width: 80%;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.recipe-desc {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 2.4rem;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
|
||||
/* About */
|
||||
.about {
|
||||
padding: 2.4rem;
|
||||
background-color: rgb(82, 82, 82);
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-family: "Dancing script";
|
||||
font-size: 4.8rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
/* use white colour + opacity or grey font color to achieve this result*/
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
font-size: 1.8rem;
|
||||
margin: 2rem 0;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: teal;
|
||||
color: rgb(207, 207, 207);
|
||||
text-align: center;
|
||||
padding: 3.6rem 0;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.footer-name {
|
||||
color: #fff;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 820px) {
|
||||
/* Header */
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 33%;
|
||||
transform: translateY(-50%);
|
||||
width: 25%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.header-nav-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipe {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
display: block;
|
||||
width: 30%;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.recipe-desc {
|
||||
display: inline-block;
|
||||
width: 65%;
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-logo {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-top: 2rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* Footer needs no changes */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
/* Header */
|
||||
.header-logo {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipes {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 8rem;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recipe-by {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.recipe-date {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.recipe-desc {
|
||||
width: 95%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-title {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3.6rem 2rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-name {
|
||||
float: none;
|
||||
}
|
||||
/* global settings */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: url(../images/squares_bg.png);
|
||||
color: #686868;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header-logo {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
opacity: 30%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: "Dancing script";
|
||||
font-size: 4.2rem;
|
||||
text-align: center;
|
||||
color: teal;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
border-top: 5px solid teal;
|
||||
border-bottom: 5px solid teal;
|
||||
padding: 0.4rem 0;
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.header-nav-list-item {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.header-nav-list-item a:link,
|
||||
.header-nav-list-item a:visited {
|
||||
font-size: 2.4rem;
|
||||
color: #686868;
|
||||
}
|
||||
|
||||
.header-nav-list-item a:hover,
|
||||
.header-nav-list-item a:active {
|
||||
color: teal;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.recipes {
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.recipe {
|
||||
margin: 2rem 1rem;
|
||||
border: 1px solid grey;
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding: 2.4rem 1.2rem;
|
||||
}
|
||||
|
||||
.recipe:hover {
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(-10px);
|
||||
/* we will learn this later. Don't worry about this line*/
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-family: "Dancing script";
|
||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
font-size: 3.6rem;
|
||||
color: teal;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
.recipe-by,
|
||||
.recipe-by strong,
|
||||
.recipe-date {
|
||||
text-align: right;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
width: 80%;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.recipe-desc {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 2.4rem;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
|
||||
/* About */
|
||||
.about {
|
||||
padding: 2.4rem;
|
||||
background-color: rgb(82, 82, 82);
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-family: "Dancing script";
|
||||
font-size: 4.8rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
/* use white colour + opacity or grey font color to achieve this result*/
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
font-size: 1.8rem;
|
||||
margin: 2rem 0;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: teal;
|
||||
color: rgb(207, 207, 207);
|
||||
text-align: center;
|
||||
padding: 3.6rem 0;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.footer-name {
|
||||
color: #fff;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 820px) {
|
||||
/* Header */
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 33%;
|
||||
transform: translateY(-50%);
|
||||
width: 25%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.header-nav-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipe {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
display: block;
|
||||
width: 30%;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.recipe-desc {
|
||||
display: inline-block;
|
||||
width: 65%;
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-logo {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-top: 2rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* Footer needs no changes */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
/* Header */
|
||||
.header-logo {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipes {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 8rem;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recipe-by {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.recipe-date {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.recipe-desc {
|
||||
width: 95%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-title {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3.6rem 2rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-name {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -1,186 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" lang="en">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lab 6</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Lab 6</h1>
|
||||
<h2>Bootstrap Components</h2><br>
|
||||
<div class="container text-center">
|
||||
<div class="row align-items-start">
|
||||
<div class="col">
|
||||
<strong>Accordian</strong>
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item’s accordion body.</strong> The base elements of the
|
||||
accordian
|
||||
was
|
||||
taken from the Bootstrap documentation.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item’s accordion body.</strong> I only changed the interior
|
||||
content
|
||||
of
|
||||
the accordian, although content isn't all that imporant.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item’s accordion body.</strong> It just saves a lot of time
|
||||
instead of
|
||||
writing out the code by hand to take the documentation examples.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><br>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Modal (Personal favourite)</strong><br>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal Demo</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Modal outline was also taken from the bootsrap documentation
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><br><br>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Card</strong>
|
||||
<div class="card">
|
||||
<img src="./synthwave.webp" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card Demo</h5>
|
||||
<p class="card-text">Just a simple card with the default image placeholder</p>
|
||||
<a href="#" class="btn btn-primary">Do Something</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Container Example</h2>
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Movie
|
||||
</div>
|
||||
<div class="col">
|
||||
Genre
|
||||
</div>
|
||||
<div class="col">
|
||||
Director
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Kill Bill
|
||||
</div>
|
||||
<div class="col">
|
||||
Action
|
||||
</div>
|
||||
<div class="col">
|
||||
Quentin Tarantino
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
The Room
|
||||
</div>
|
||||
<div class="col">
|
||||
Romance
|
||||
</div>
|
||||
<div class="col">
|
||||
Tommy Wiseau
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Star Wars
|
||||
</div>
|
||||
<div class="col">
|
||||
Action
|
||||
</div>
|
||||
<div class="col">
|
||||
George Lucas
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Form Demo</h2>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="emailInput" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="emailInput">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="genderSelect" class="form-label">Gender</label>
|
||||
<select class="form-select" aria-label="Gender Selection">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="Male">Male</option>
|
||||
<option value="Female">Female</option>
|
||||
<option value="Other">Other</option>
|
||||
<option value="NotSay">Prefer not to say</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ageSelect" class="form-label">Age</label>
|
||||
<input type="range" class="form-range" min="1" max="99" id="ageSelect">
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-lg">Submit</button>
|
||||
</form>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" lang="en">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lab 6</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Lab 6</h1>
|
||||
<h2>Bootstrap Components</h2><br>
|
||||
<div class="container text-center">
|
||||
<div class="row align-items-start">
|
||||
<div class="col">
|
||||
<strong>Accordian</strong>
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item’s accordion body.</strong> The base elements of the
|
||||
accordian
|
||||
was
|
||||
taken from the Bootstrap documentation.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item’s accordion body.</strong> I only changed the interior
|
||||
content
|
||||
of
|
||||
the accordian, although content isn't all that imporant.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item’s accordion body.</strong> It just saves a lot of time
|
||||
instead of
|
||||
writing out the code by hand to take the documentation examples.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><br>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Modal (Personal favourite)</strong><br>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal Demo</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Modal outline was also taken from the bootsrap documentation
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><br><br>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Card</strong>
|
||||
<div class="card">
|
||||
<img src="./synthwave.webp" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card Demo</h5>
|
||||
<p class="card-text">Just a simple card with the default image placeholder</p>
|
||||
<a href="#" class="btn btn-primary">Do Something</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Container Example</h2>
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Movie
|
||||
</div>
|
||||
<div class="col">
|
||||
Genre
|
||||
</div>
|
||||
<div class="col">
|
||||
Director
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Kill Bill
|
||||
</div>
|
||||
<div class="col">
|
||||
Action
|
||||
</div>
|
||||
<div class="col">
|
||||
Quentin Tarantino
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
The Room
|
||||
</div>
|
||||
<div class="col">
|
||||
Romance
|
||||
</div>
|
||||
<div class="col">
|
||||
Tommy Wiseau
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Star Wars
|
||||
</div>
|
||||
<div class="col">
|
||||
Action
|
||||
</div>
|
||||
<div class="col">
|
||||
George Lucas
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Form Demo</h2>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="emailInput" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="emailInput">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="genderSelect" class="form-label">Gender</label>
|
||||
<select class="form-select" aria-label="Gender Selection">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="Male">Male</option>
|
||||
<option value="Female">Female</option>
|
||||
<option value="Other">Other</option>
|
||||
<option value="NotSay">Prefer not to say</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ageSelect" class="form-label">Age</label>
|
||||
<input type="range" class="form-range" min="1" max="99" id="ageSelect">
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-lg">Submit</button>
|
||||
</form>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,24 +1,24 @@
|
||||
body {
|
||||
background-color: crimson;
|
||||
font-family: "Inter", sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 30px;
|
||||
background: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
body {
|
||||
background-color: crimson;
|
||||
font-family: "Inter", sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 30px;
|
||||
background: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1,58 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Contact</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Contact Page</h1>
|
||||
<small>Contact the owner of the page with questions or concerns below</small>
|
||||
|
||||
<!-- Nav that matches one from homepage-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<strong>Contact requests will be answered within ∞ business days</strong>
|
||||
|
||||
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Enter personal Information Below</legend>
|
||||
<label for="firstName">First Name:</label><br>
|
||||
<input type="text" name="firstName"><br>
|
||||
<label for="lastName">Last Name:</label><br>
|
||||
<input type="text" name="lastName"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="email" name="email"><br>
|
||||
<label for="phone">Phone:</label><br>
|
||||
<input type="tel" name="phone"><br>
|
||||
<label for="message">Message:</label><br>
|
||||
<textarea name="message" rows="4" cols="50"></textarea><br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer to complete semantic elements, same as homepage-->
|
||||
<footer>
|
||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||
</footer>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Contact</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Contact Page</h1>
|
||||
<small>Contact the owner of the page with questions or concerns below</small>
|
||||
|
||||
<!-- Nav that matches one from homepage-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<strong>Contact requests will be answered within ∞ business days</strong>
|
||||
|
||||
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Enter personal Information Below</legend>
|
||||
<label for="firstName">First Name:</label><br>
|
||||
<input type="text" name="firstName"><br>
|
||||
<label for="lastName">Last Name:</label><br>
|
||||
<input type="text" name="lastName"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="email" name="email"><br>
|
||||
<label for="phone">Phone:</label><br>
|
||||
<input type="tel" name="phone"><br>
|
||||
<label for="message">Message:</label><br>
|
||||
<textarea name="message" rows="4" cols="50"></textarea><br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer to complete semantic elements, same as homepage-->
|
||||
<footer>
|
||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@@ -1,176 +1,176 @@
|
||||
/* Keyframe animation */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile design */
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #f8f9fa;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 3px solid #444;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
background: #2980b9;
|
||||
color: #fff;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #1c5a85;
|
||||
transform: scale(1.07);
|
||||
}
|
||||
|
||||
section {
|
||||
background: #fff;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||
animation: fadeIn 1s ease;
|
||||
}
|
||||
|
||||
section img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 48%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: #2980b9;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background: red;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem 0;
|
||||
color: #888;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.animal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Layouts for larger screens */
|
||||
/* Tablet/Medium screen */
|
||||
@media (min-width: 600px) and (max-width: 899px) {
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
section,
|
||||
form {
|
||||
max-width: 650px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop/large Screen */
|
||||
@media (min-width: 900px) {
|
||||
body {
|
||||
padding: 0 4rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
section,
|
||||
form {
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.animal-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
/* Keyframe animation */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile design */
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #f8f9fa;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 3px solid #444;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
background: #2980b9;
|
||||
color: #fff;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #1c5a85;
|
||||
transform: scale(1.07);
|
||||
}
|
||||
|
||||
section {
|
||||
background: #fff;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||
animation: fadeIn 1s ease;
|
||||
}
|
||||
|
||||
section img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 48%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: #2980b9;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background: red;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem 0;
|
||||
color: #888;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.animal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Layouts for larger screens */
|
||||
/* Tablet/Medium screen */
|
||||
@media (min-width: 600px) and (max-width: 899px) {
|
||||
body {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
section,
|
||||
form {
|
||||
max-width: 650px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop/large Screen */
|
||||
@media (min-width: 900px) {
|
||||
body {
|
||||
padding: 0 4rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
section,
|
||||
form {
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.animal-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB |
@@ -1,127 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Home</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Levi's Pet Showcase</h1>
|
||||
<small>A collection of pet images with facts about their personality</small>
|
||||
|
||||
<!-- Nav that will match accross all pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Welcome!</h2>
|
||||
<p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small
|
||||
description
|
||||
of their personalities</p>
|
||||
|
||||
<!-- 5 Section elements for my animals-->
|
||||
<div class="animal-grid">
|
||||
<section id="mierda">
|
||||
<h3>Mierda</h3>
|
||||
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
||||
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
||||
<p>Mierda likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping with her head in a shoe</li>
|
||||
<li>Wet food</li>
|
||||
<li>Sleeping outside</li>
|
||||
<li>Playing with <a href="#frank">Frank</a></li>
|
||||
</ul>
|
||||
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
|
||||
family
|
||||
loves to joke about</p>
|
||||
</section>
|
||||
|
||||
<section id="Frank">
|
||||
<h3>Frank</h3>
|
||||
<img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600">
|
||||
<p>Frank is 3 years old and came directly after Mierda</p>
|
||||
<p>Frank likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping upside down</li>
|
||||
<li>Wet food</li>
|
||||
<li>Kibble</li>
|
||||
<li>Food that falls on the floor</li>
|
||||
</ul>
|
||||
<p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right
|
||||
next
|
||||
to <a href="#Bo">Bo</a> while he begs.</p>
|
||||
</section>
|
||||
|
||||
<section id="Rocco">
|
||||
<h3>Rocco</h3>
|
||||
<img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700">
|
||||
<p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p>
|
||||
<p>Rocco likes:</p>
|
||||
<ul>
|
||||
<li>Cuddles in bed</li>
|
||||
<li>Sleeping in boxes</li>
|
||||
<li>Scratching the cat post</li>
|
||||
<li>Drinking tap water from the faucet</li>
|
||||
</ul>
|
||||
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
|
||||
even
|
||||
tends to slip and trip on himself. He's very easily startled too.</p>
|
||||
</section>
|
||||
|
||||
<section id="Bo">
|
||||
<h3>Bo</h3>
|
||||
<img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700">
|
||||
<p>Bo is 9 months old and is the newest addition to our family</p>
|
||||
<p>Bo likes:</p>
|
||||
<ul>
|
||||
<li>Jumping, a lot of jumping</li>
|
||||
<li>Walking with his backpack on</li>
|
||||
<li>Belly rubs</li>
|
||||
<li>Dried pigs ear treats (delicious, I know)</li>
|
||||
</ul>
|
||||
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
|
||||
off
|
||||
the
|
||||
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
||||
</section>
|
||||
|
||||
<section id="Jax">
|
||||
<h3>Jax</h3>
|
||||
<img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700">
|
||||
<p>Jax was 9 years old when he past, which was about a year ago now.</p>
|
||||
<p>Jax Liked:</p>
|
||||
<ul>
|
||||
<li>Barking, he loved the sound of his own voice</li>
|
||||
<li>The cats!</li>
|
||||
<li>The dog park</li>
|
||||
<li>Water, he was quite the swimmer</li>
|
||||
</ul>
|
||||
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
|
||||
a
|
||||
Great
|
||||
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer that will match accross all pages -->
|
||||
<footer>
|
||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||
</footer>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<title>Pet Showcase - Home</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Levi's Pet Showcase</h1>
|
||||
<small>A collection of pet images with facts about their personality</small>
|
||||
|
||||
<!-- Nav that will match accross all pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Welcome!</h2>
|
||||
<p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small
|
||||
description
|
||||
of their personalities</p>
|
||||
|
||||
<!-- 5 Section elements for my animals-->
|
||||
<div class="animal-grid">
|
||||
<section id="mierda">
|
||||
<h3>Mierda</h3>
|
||||
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
||||
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
||||
<p>Mierda likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping with her head in a shoe</li>
|
||||
<li>Wet food</li>
|
||||
<li>Sleeping outside</li>
|
||||
<li>Playing with <a href="#frank">Frank</a></li>
|
||||
</ul>
|
||||
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
|
||||
family
|
||||
loves to joke about</p>
|
||||
</section>
|
||||
|
||||
<section id="Frank">
|
||||
<h3>Frank</h3>
|
||||
<img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600">
|
||||
<p>Frank is 3 years old and came directly after Mierda</p>
|
||||
<p>Frank likes:</p>
|
||||
<ul>
|
||||
<li>Sleeping upside down</li>
|
||||
<li>Wet food</li>
|
||||
<li>Kibble</li>
|
||||
<li>Food that falls on the floor</li>
|
||||
</ul>
|
||||
<p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right
|
||||
next
|
||||
to <a href="#Bo">Bo</a> while he begs.</p>
|
||||
</section>
|
||||
|
||||
<section id="Rocco">
|
||||
<h3>Rocco</h3>
|
||||
<img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700">
|
||||
<p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p>
|
||||
<p>Rocco likes:</p>
|
||||
<ul>
|
||||
<li>Cuddles in bed</li>
|
||||
<li>Sleeping in boxes</li>
|
||||
<li>Scratching the cat post</li>
|
||||
<li>Drinking tap water from the faucet</li>
|
||||
</ul>
|
||||
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
|
||||
even
|
||||
tends to slip and trip on himself. He's very easily startled too.</p>
|
||||
</section>
|
||||
|
||||
<section id="Bo">
|
||||
<h3>Bo</h3>
|
||||
<img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700">
|
||||
<p>Bo is 9 months old and is the newest addition to our family</p>
|
||||
<p>Bo likes:</p>
|
||||
<ul>
|
||||
<li>Jumping, a lot of jumping</li>
|
||||
<li>Walking with his backpack on</li>
|
||||
<li>Belly rubs</li>
|
||||
<li>Dried pigs ear treats (delicious, I know)</li>
|
||||
</ul>
|
||||
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
|
||||
off
|
||||
the
|
||||
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
||||
</section>
|
||||
|
||||
<section id="Jax">
|
||||
<h3>Jax</h3>
|
||||
<img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700">
|
||||
<p>Jax was 9 years old when he past, which was about a year ago now.</p>
|
||||
<p>Jax Liked:</p>
|
||||
<ul>
|
||||
<li>Barking, he loved the sound of his own voice</li>
|
||||
<li>The cats!</li>
|
||||
<li>The dog park</li>
|
||||
<li>Water, he was quite the swimmer</li>
|
||||
</ul>
|
||||
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
|
||||
a
|
||||
Great
|
||||
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!-- Footer that will match accross all pages -->
|
||||
<footer>
|
||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user