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

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #278

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

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #278

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
Binary file added img/AsterixetObelix.jpg
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 img/FuzzyBubbles-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added img/FuzzyBubbles-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added img/Insta2_small.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.
Binary file added img/Obelix1.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.
Binary file added img/cake-cherries.jpg
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 img/cake-cherriesHW3.jpg
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 img/cheesecake.jpg
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 img/cheesecake2.jpg
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 img/cheesecakeHW3.jpg
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 img/chocolate-cake.jpg
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 img/chocolate-cakeHW3.jpg
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 img/chocolate-cakeHW3.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.
Binary file added img/donut.jpg
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 img/donutHW3.jpg
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 img/facebook1_small.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.
Binary file added img/happy-birthday-cake.jpg
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 img/happy-birthday-cakeHW3.jpg
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 img/happy-birthday-cakeHW3.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.
Binary file added img/luxury-cup-cake.jpg
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.
3 changes: 3 additions & 0 deletions img/menu-hamburger.svg
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 img/twitter1_small.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.
197 changes: 195 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,204 @@
<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 -->
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- Add your markup here -->
<main class="homepage-container">
Copy link

Choose a reason for hiding this comment

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

I would organise the tags like the following:

<body>
   <header></header>
   <main></main>
   <footer></footer>
</body>

I would then only have the main to displayed as a grid since header and footer sections do not require a grid. This would make your page cleaner and easier to organise

<section class="hero-box">
<section class="hero-flexbox">
<img src="img/AsterixetObelix.jpg" class="AsterixetObelix" alt="Obelix holding cakes with Asterix standing next to him">

<section class="menu-quote-container">

<!--
For the hamburger menu button I have chosen to use the functionality found at https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
-->

<header>
<!-- (A) MENU WRAPPER -->
<nav class="hamnav">

<!-- (B) THE HAMBURGER -->

<!-- &#9776; is the HTML symbol for the “3 lines hamburger icon” -->
<label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"/>

<!-- (C) MENU ITEMS -->
<div class="hamitems">
<ul>
<li>
<a href="#">HOME</a>
</li>

<li>
<a href="#">CAKES</a>
</li>

<li>
<a href="#">ORDERING</a>
</li>

<li>
<a href="#">LESSONS</a>
</li>

<li>
<a href="#">ABOUT US</a>
</li>
</ul>
</div>
</nav>
</header>


<header class="mobile-heading">
<div class="mainheading">
<p>
<span><em>ASTERISK ET OBELIX</em></span>
<span><em>CAKES!</em></span>
</p>
</div>
<div class="thequote">
<p><em>
<span>We Just Do Great Cakes!</span>
<span></span>
<span></span>The best cakes in town</span>
<span>delivered to your door</span>
</em></p>
</div>
</header>


</section>
</section>

<header class="menu-header">
<nav class="navigation-bar">
<ul>
<li class="navigation-item">
<a class="navigation-link" href="#">HOME</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">CAKES</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">ORDERING</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">LESSONS</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">ABOUT US</a>
</li>
</ul>
</nav>
</header>
</section>

<section class="content-box">
<p>
<span>We make all types of same-day cakes</span>
<span>from Cupcakes, Celebration Cakes,</span>
<span>Birthday Cakes, Chocolate cakes, Novelty cakes,</span>
<span>Bespoke cakes and even same-day Wedding Cakes.</span>
<span></span>
</p>

<p class="mobile-prompt">
<!-- &#8595; is the symbol for a down-pointing arrow-->
&#8595;Hover over the images below for more information&#8595;
</p>

<p class="tablet-prompt">
Hover over the image to the left and the images below for more information
</p>
</section>

<!-- NOTE: In order for this to work properly, the hierarchy and placement of these classes matters!! -->
<section class="cake-box">
Copy link

Choose a reason for hiding this comment

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

This section and the 4 cake images should be your main content and you can actually achieve a clean grid by having this structure:

<main class="main">
	<section class="main-image">
		<img alt="image1" class="images" src="image5.jpg"/>
	</section>
	<section class="main-text">
		Welcome and other texts
	</section>
	<section class="small-image image1">
		<img alt="image1" class="images" src="image1.jpg"/>
	</section>
	<section class="small-image image2">
		<img alt="image2" class="images" src="image2.jpg"/>
	</section>
	<section class="small-image image3">
		<img alt="image3" class="images" src="image3.jpg"/>
	</section>
	<section class="small-image image4">
		<img alt="image4" class="images" src="image4.jpg"/>
	</section>
</main>

You can apply the main class as a grid which contains 2 columns and 4 rows in mobile or 4 columns and 2 rows in desktop


<section class="hover-content">
<div class="hover-content-overlay"></div>
<img src="img/cake-cherriesHW3.jpg" class="maincake" class="hover-content-image" alt="A cake topped with cherries">

<div class="hover-content-details fadeIn-bottom">
<h3 class="hover-content-title">Cakes</h3>
<p>From Chocolate Cakes, to Fruity Cakes, to cheesecakes and so many more, there is a cake for any celebration and occasion.
Why not personalise a special birthday message on your chosen cake to make the celebration extra special.
ASTERISK ET OBELIX online cake range from classic cakes to the more showstopping cakes,
there really is something for everyone.
</p>
</div>
</section>
</section>

<section class="FourCakes-FlexBox ">

<section class="ColumnFlexBox">

<section class="RowFlexBox">

<figure class="hoverwrap">
<img id="close" src="img/cheesecakeHW3.jpg" class="display-a-cake" alt="A Cheese Cake">
<!-- THE HOVER TEXT: -->
<div class="hovercap">Our collection includes cakes that also make for delectable desserts, such as our elegant,
creamy Strawberry Summer Cheesecake and Apricot Cheesecake
</div>
</figure>

<figure class="hoverwrap">
<img src="img/chocolate-cakeHW3.png" class="display-a-cake" alt="A Chocolate Cake">
<!-- THE HOVER TEXT: -->
<div class="hovercap">We are a little health-conscious and like to make sure our cakes are irresistibly delicious
without using too much fat and sugar "just as much as needed to make something delicious".
</div>
</figure>
</section>

<section class="RowFlexBox">
<figure class="hoverwrap">
<img src="img/donutHW3.jpg" class="display-a-cake" alt="A Donut">
<!-- THE HOVER TEXT: -->
<div class="hovercap">We can help you deliver cakes all over London within the scheduled delivery time.
You can avail the same day and next day delivery services.
For making any celebration truly special, we are always available with your desired cake on time
to offer you our unique taste.</div>
</figure>

<figure class="hoverwrap">
<img src="img/happy-birthday-cakeHW3.png" class="display-a-cake" alt="A Birthday Cake with the words HAPPY BIRTHDAY">
<!-- THE HOVER TEXT: -->
<div class="hovercap">So, whether you're looking for an extra special birthday cake,
a cheesecake to top off a dinner party
or simply fancy some office treats,
we're ready to whisk, pipe and sprinkle some
happiness into your day.
</div>
</figure>
</section>

</section>

</section>

<footer class="FooterContainer">
<section class="ButtonsContainer">
<p class="footer-button">ORDER NOW</p>
<p class="footer-button">FAQ</p>
<p class="footer-button">CONTACT US</p>
</section>

<section class="copyright">
<p>ASTERISK ET OBELIX CAKES &copy; 2021</p>
</section>
</footer>

</main>

</body>


</html>
Loading