Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

ZA2 - Ele Mashige - Homework 3 - Cakes Project #301

Open
EleMashige wants to merge 10 commits into
base: master
Choose a base branch
from
Open

ZA2 - Ele Mashige - Homework 3 - Cakes Project #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
567b8bd
update
EleMashige Jun 20, 2022
b1d2445
update
EleMashige Jun 20, 2022
e185cfd
updated
EleMashige Jun 20, 2022
423888c
update
EleMashige Jun 21, 2022
a9055b7
updated
EleMashige Jun 22, 2022
ced41ed
Update
EleMashige Jun 22, 2022
bcd7168
updated
EleMashige Jun 23, 2022
5f74ea4
update
EleMashige Jun 23, 2022
3025dcf
updated
EleMashige Jun 23, 2022
960157e
updated
EleMashige Jun 23, 2022
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
98 changes: 88 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,94 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Responsive Cake webpage</title>
<link rel="stylesheet" href="style.css" />
<!-- Add a link to your css file here -->
</head>
</head>

<body>
<!-- Add your markup here -->
</body>
<body>
<div class="container">
<div class="header">
<div class="nested-grid-1">
<img class="cupcake-img" src="https://images.unsplash.com/photo-1561741403-3f7c1f93d0a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzZ8fGN1cGNha2V8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=603" alt="cupcake-img">

<p>The best cakes in town delivered to your door!</p>
</div>
</div>
</div>
<div class="nav">
<nav class="nav-items">
<a class="nav-list" href="">HOME</a>
<a class="nav-list" href="">CAKES</a>
<a class="nav-list" href="">ORDERING</a>
<a class="nav-list" href="">LESSONS</a>
<a class="nav-list" href="">ABOUT</a>
</nav>
</div>
<div class="section">

</html>
<div class="nested-grid">
<div>
<img class="cake-img" src="https://images.unsplash.com/photo-1569289522127-c0452f372d46?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDd8fGNha2V8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60" alt="cake-image">
</div>
<div class="welcome">
<h2>Welcome</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore
adipisci vel esse eligendi officia harum dicta minus assumenda nihil
magnam! Doloremque enim nesciunt omnis, dolorem ratione repudiandae
corporis quisquam officia!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis
nisi velit ab ut dicta neque obcaecati natus doloribus, nam pariatur
consequuntur laborum illum accusantium. Eum autem architecto officiis
veritatis rerum.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Exercitationem, cumque incidunt! Facere natus necessitatibus nemo
possimus? Voluptatibus, voluptate. Molestiae aliquid, ut quisquam
commodi tenetur obcaecati nisi deleniti nesciunt cupiditate est!
</p>
</div>
</div>
</div>

<div class="footer">
<div class="footer-grid">
<div>
<img class="footer-img" src="https://media.istockphoto.com/photos/flying-donuts-isolated-on-a-white-background-picture-id1308291972?b=1&k=20&m=1308291972&s=170667a&w=0&h=tc8Z-vRebog2H9fEvElwITJJqlKBkdPN3u0W0RUfnNE=" alt="cake-image">
</div>
<div>
<img class="footer-img" src="https://media.istockphoto.com/photos/cake-picture-id172185640?b=1&k=20&m=172185640&s=170667a&w=0&h=qoHpgGIGXKwSfOGH7QPBtJOycep5E0XR8EhDqbqJnQU=" alt="cake-image">
</div>
<div>
<img class="footer-img" src="https://images.unsplash.com/photo-1570727624862-3008fe67a6be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg2fHxkb3VnaG51dHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="cake-image">
</div>
<div>
<img class="footer-img" src="https://media.istockphoto.com/photos/blue-donut-with-sprinkles-on-a-white-isolated-background-picture-id1316979571?b=1&k=20&m=1316979571&s=170667a&w=0&h=j_B5IKG6TAQFaZ_9Lpdh1SxrdogADyV_0-xXIGWzcKs=" alt="cake-image">
</div>
</div>
</div>
<div class="footer-2">
<div class="footer2-grid">
<a class="footer2-grid-class" href="">Track My Order</a>
<a class="footer2-grid-class" href="">Careers</a>
<a class="footer2-grid-class" href="">FAQ</a>
</div>
</div>
<div class="social">
<div class="social-list">
<a href="" class="fa fa-facebook"></a>
<a href="" class="fa fa-twitter"></a>
<a href="" class="fa fa-instagram"></a>
</div>
</div>
</div>
</body>
</html>
150 changes: 149 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,149 @@
/* Add your styling here */

.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin-top: 40px;
grid-template-areas: "header header header header"
"nav nav nav nav"
"section section section section"
"footer footer footer footer"
"footer-2 footer-2 footer-2 footer-2"
"socials socials socials socials";
grid-gap: 50px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.header {
grid-area: header;
height: 120px;

}

.nav {
grid-area: nav;
margin-top: -500px;
}
.section {
grid-area: section;
align-self: center;
justify-self: end;
}
.footer {
grid-area: footer;
margin-top: 120px;
}
.footer-2 {
grid-area: footer-2;
}
.socials {
grid-area: socials;
}

.nested-grid-1 {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 30px;
align-items: flex-end;
text-align: end;
font-style: italic;
}
.heading {
display: grid;
grid-template-columns: 2fr 1fr;
margin: 30px;
}


.cupcake-img {
width: 300px;
height: auto;
}

.nav-items {
display: flex;
flex-direction: row;
justify-content:flex-end;
margin-top: 100px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 12px;
}

.nav-list {
text-decoration: none;
margin-left: 30px;
background-color: #F68989;
color: white;
width: 100px;
height: 15px;
border-radius: 7%;
text-align: center;
padding: 2px;
}

.nested-grid {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 30px;
align-items:center;
text-align:end;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.cake-img {
width: 600px;
height: auto;

}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer-img {
width: 300px;
height: auto;
}
.footer2-grid {
display: flex;
flex-direction: row;
justify-content: center;
padding: 30px;
border-radius: 50%;
padding-top: 70px;
}
.footer2-grid-class {
text-decoration: none;
margin-left: 30px;
background-color: #F68989;
width: 100px;
height: 15px;
border-radius: 7%;
text-align: center;
color: white;
font-size: 12px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.social-list {
display: flex;
flex-direction: row;
justify-content: center;
}
.fa {
text-decoration: none;
margin-left: 10px;
}
@media (max-width: 550px) {
.nested-grid-1 {
grid-template-columns: 1fr;
}
}
@media (max-width: 550px) {
.nested-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 550px) {
.footer-grid {
grid-template-columns: 1fr;
}
}