Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

NW6| Fidaa Bashir| Cake co| Week 3 #184

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

NW6| Fidaa Bashir| Cake co| Week 3 #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c91b53f
header
Oct 30, 2023
4ad9387
Update
Nov 4, 2023
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "/Cakes-Co/index.html"
}
Binary file added Cakes-Co/img/background-img.webp
View file
Open in desktop
Binary file not shown.
Binary file added Cakes-Co/img/img1.avif
View file
Open in desktop
Binary file not shown.
Binary file added Cakes-Co/img/img2.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Cakes-Co/img/img3.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Cakes-Co/img/img4.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Cakes-Co/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 53 additions & 11 deletions Cakes-Co/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,58 @@
<!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" />
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
</head>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- Add your markup here -->
</body>
<body>
<!-- header -->
<header>
<img class="logo-img" src="./img/logo.png" alt="logo" />
<div class="inner-header">
<label class="ham-label" for="ham-checkbox">
<input type="checkbox" id="ham-checkbox" />
</label>
<aside class="menu-aside">
<nav>
<a href="">Home</a>
<a href="">Cakes</a>
<a href="">Order</a>
<a href="">Lessons</a>
<a href="">About</a>
</nav>
</aside>
<p class="motto-p">The best cakes in town delivered to your door</p>
</div>
</header>
<!-- main -->
<main>
<section class="p-sec">
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae
voluptatem accusantium, necessitatibus cum accusamus, id cumque harum
voluptates ipsum nisi vero illo dolore! Doloribus, quae hic. Facilis
voluptate nobis eum.
</p>
</section>
<section class="hero-sec">
<img src="./img/background-img.webp" alt="vanilla chocolate cake" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using good semantic html and some nice alt text

</section>
<section class="img-sec">
<img src="./img/img1.avif" alt="" />
<img src="./img/img2.jpeg" alt="" />
<img src="./img/img3.jpeg" alt="" />
<img src="./img/img4.jpeg" alt="" />
</section>
</main>

</html>
<!-- Add your markup here -->
<!-- Add your markup here -->
<!-- Add your markup here -->
<!-- Add your markup here -->
</body>
</html>
154 changes: 153 additions & 1 deletion Cakes-Co/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,153 @@
/* Add your styling here */
* {
margin: 0px;
padding: 0px;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
img {
width: 100%;
height: 100%;
}
:root {
--bar-width: 30px;
--bar-height: 5px;
--gap: 30px;
}

.logo-img {
width: 100px;
height: 100px;
align-self: center;
}
header {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The header looks really good, good work

background-color: blanchedalmond;
width: auto;
height: 140px;
display: flex;
justify-content: space-between;
align-items: stretch;
padding: 30px;
}
.inner-header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.motto-p {
text-align: right;
max-width: 20ch;
}

.ham-label {
display: flex;
flex-direction: column;
gap: 5px;
z-index: 3;
}

.ham-label input,
.ham-label::before,
.ham-label::after {
content: "";
width: var(--bar-width);
height: var(--bar-height);
background-color: black;
}

.ham-label input {
appearance: none;
outline: none;
pointer-events: none;
}

.menu-aside {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs some iteration to be more like the wireframe, hamburger menu on mobile and horizontail menu on desktop

position: absolute;
background-color: grey;
width: 220px;
height: 400px;
top: 0px;
right: 0px;
z-index: 2;
display: none;
}

.ham-label:has(input:checked) + .menu-aside {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can see where you're going with this, good work 👍

display: block;
}

nav {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This display would be what we want when the hamburger menu is open on mobile but it shouldn't be open by default and on desktop, it should be with the links next to eachother

align-items: center;
justify-content: center;
}

main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
gap: var(--gap);
}

.p-sec {
grid-column: 1/-1;
grid-row: 1/2;
}
.hero-sec {
grid-column: 1/-1;
grid-row: 2/3;
}
.img-sec {
grid-column: 1/-1;
grid-row: 3/-1;

display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: var(--gap);
}

@media screen and (min-width: 640px) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good - it's responsive and mobile first as requested by the intructions

main {
margin-top: 100px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 2fr 1fr;
}
.p-sec {
grid-column: 2/-1;
grid-row: 1/2;
}
.hero-sec {
grid-column: 1/2;
grid-row: 1/2;
}

.img-sec {
grid-column: 1/-1;
grid-row: 2/-1;

grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}

.ham-label {
display: none;
}
.menu-aside {
position: absolute;
background-color: grey;
width: 220px;
height: 400px;
top: 0px;
right: 0px;
z-index: 2;
display: block;
}
}