Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inperson wednesday Jonnathan Saavedra submission #90

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Inperson wednesday Jonnathan Saavedra submission #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 41 additions & 24 deletions alternating.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Store</title>
</head>
<body>
<main>
<h2>Our Cookies</h2>
<p>Checkout our latest and delicious cookies.</p>

<h3>Mint Chocolate</h3>
<p>Tasty mint chocolate cookies</p>
<img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Store</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<h3>Peanut Butter</h3>
<p>Yummy peanut buttery goodness</p>
<img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
<body>
<main class="container">
<div class="row">
<div class="col">
<h2>Our Cookies</h2>
<p>Checkout our latest and delicious cookies.</p>
</div>

<h3>Oatmeal</h3>
<p>Your fitness instructors favorite</p>
<img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
<div class="col order-3">
<h3>Mint Chocolate</h3>
<p>Tasty mint chocolate cookies</p>
<img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
</div>

<h3>Chocolate Chip</h3>
<p>Gooey chocolate you'll love</p>
<img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
</main>
</body>
</html>
<div class="col order-2">
<h3>Peanut Butter</h3>
<p>Yummy peanut buttery goodness</p>
<img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
</div>

<div class="col order-4">
<h3>Oatmeal</h3>
<p>Your fitness instructors favorite</p>
<img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
</div>

<div class="col order-1">
<h3>Chocolate Chip</h3>
<p>Gooey chocolate you'll love</p>
<img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
</div>
</div>
</main>
</body>

</html>
44 changes: 43 additions & 1 deletion css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,43 @@
/* Add custom css styles here */

.header-section {
height: 400px;
background-image: url("/images/coffee-biscuits.jpg");
background-size: cover;
background-position: center;
display: flex;
justify-content: center; align-items: center;
text-align: center;
}

.header-content {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.header-content h1 {
font-size: 3em;
margin: 0;
}

.header-content p {
font-size: 1.5em;
}

.about-us-section {
background-color: #f8f9fa;
border-radius: 10px;
}

.about-us-section h2 {
font-size: 2em;
margin-bottom: 20px;
}

.about-us-section p {
font-size: 1.1em;
line-height: 1.6;
}

.footer-section{
background-color: rgb(57, 57, 253);
color: white;
}
87 changes: 53 additions & 34 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Store</title>
</head>
<body>
<header>
<h1>Cookie Store</h1>
<p>Buy our awesome cookies. All proceeds go to charity!</p>
</header>

<main>
<h2>Our Cookies</h2>
<p>Checkout our latest and delicious cookies.</p>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Store</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<h3>Mint Chocolate</h3>
<p>Tasty mint chocolate cookies</p>
<img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
<body>
<header class="header-section">
<div class="header-content">
<h1>Cookie Store</h1>
<p>Buy our awesome cookies. All proceeds go to charity!</p>
</div>
</header>

<h3>Peanut Butter</h3>
<p>Yummy peanut buttery goodness</p>
<img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
<main class="container text-center">
<h2>Our Cookies</h2>
<p>Checkout our latest and delicious cookies.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<h3>Mint Chocolate</h3>
<p>Tasty mint chocolate cookies</p>
<img src="images/mint-cookie.png" alt="A single mint chocolate cookie" />
</div>

<h3>Oatmeal</h3>
<p>Your fitness instructors favorite</p>
<img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
<div class="col-12 col-md-6 col-lg-3">
<h3>Peanut Butter</h3>
<p>Yummy peanut buttery goodness</p>
<img src="images/peanut-cookie.png" alt="A single peanut butter cookie" />
</div>

<h3>Chocolate Chip</h3>
<p>Gooey chocolate you'll love</p>
<img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
</main>
<div>
<h2>About us</h2>
<div class="col-12 col-md-6 col-lg-3">
<h3>Oatmeal</h3>
<p>Your fitness instructors favorite</p>
<img src="images/oatmeal-cookie.png" alt="A single oatmeal cookie" />
</div>

<img src="images/bakers.svg" alt="illustrations of two people baking" />
<div>
<div class="col-12 col-md-6 col-lg-3">
<h3>Chocolate Chip</h3>
<p>Gooey chocolate you'll love</p>
<img src="images/chip-cookie.png" alt="A single chocolate chip cookie" />
</div>
</main>
<div class="container about-us-section my-5">
<h2 class="text-center">About us</h2>
<div class="row align-items-center">
<div class="col-12 col-md-4">
<img src="images/bakers.svg" alt="illustrations of two people baking" class="img-fluid" />
</div>
<div class="col-12 col-md-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
Expand All @@ -45,13 +62,15 @@ <h2>About us</h2>
mollit anim id est laborum.
</div>
</div>
<footer>
</div>
<footer class="footer-section text-center py-4">
<h2>Contact us</h2>
<div>
100 Broadway Avenue,<br />
New York, NY 10001 <br />
(212) 555-1234
</div>
</footer>
</body>
</html>
</footer>
</body>

</html>
Loading