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

London class 10 - Iryna Lypnyk - HTML-CSS-Coursework-Week3 #526

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added images/gallery_1.webp
Binary file not shown.
Binary file added images/gallery_2.webp
Binary file not shown.
Binary file added images/gallery_3.webp
Binary file not shown.
Binary file added images/gallery_4.webp
Binary file not shown.
Binary file added images/gallery_L.webp
Binary file not shown.
Binary file added images/welcome.webp
Binary file not shown.
Binary file added images/welcome_bg.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 85 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,94 @@
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gwendolyn&family=Open+Sans:wght@300;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
</head>

<body>
<!-- Add your markup here -->
<div class="wrapper">
<header class="header">
<nav class="menu">
<div class="menu_icon">
Copy link

Choose a reason for hiding this comment

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

For accessibility, you should probably make this a <button>. That way screen readers identify it as such.

<span></span>
<span></span>
<span></span>
</div>
Comment on lines +19 to +23

Choose a reason for hiding this comment

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

Nice custom hamburger menu icon! 👍

<ul class="menu_list">
<li class="menu_item active">
<a href="#">Home</a>
</li>
<li class="menu_item">
<a href="#">Cakes</a>
</li>
<li class="menu_item">
<a href="#">Ordering</a>
</li>
<li class="menu_item">
<a href="#">Lessons</a>
</li>
<li class="menu_item">
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<section class="welcome">
<div class="content content--welcome">
<div class="welcome_img">
</div>
<h1 class="welcome_title">
The best cake in town delivered to your door
</h1>
</div>
</section>
<section class="about content">
<div class="about_text content">
<h2 class="section_title">Welcome</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorum et exercitationem
molestiae nostrum perferendis porro possimus reiciendis reprehenderit vitae</p>
</div>
<div class="about_img"></div>
</section>
<section class="gallery content">
<ul class="gallery_list">
<li class="gallery_item">
Copy link

Choose a reason for hiding this comment

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

For all your lists, you can make the css less brittle and html more terse by removing the class on the items themselves and just select the immediate list items.

.gallery_list li {

If you are particularly concerned about nested lists then

.gallery_list > li {

Should guard the drop-down should guard you against that.

<img src="images/gallery_1.webp" alt="">
</li>
<li class="gallery_item">
<img src="images/gallery_2.webp" alt="">
</li>
<li class="gallery_item">
<img src="images/gallery_3.webp" alt="">
</li>
<li class="gallery_item">
<img src="images/gallery_4.webp" alt="">
</li>
</ul>
</section>
<footer class="footer">
<div class="socials content">
<h3 class="section_subtitle">Connect</h3>
<ul class="socials_list">
<li class="socials_item">
<a href="#">Instagram</a>
</li>
<li class="socials_item">
<a href="#">Facebook</a>
</li>
<li class="socials_item">
<a href="#">Telegram</a>
</li>
</ul>
</div>
<p class="footer_copyright">Made with love by Iryna Lypnyk</p>
</footer>
</div>


</body>

</html>
Loading