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

West Midlands class 2 - Liew Teh - HTML/CSS (Lesson 3) - week 4 #65

Closed
liewteh wants to merge 7 commits into from
Closed

West Midlands class 2 - Liew Teh - HTML/CSS (Lesson 3) - week 4 #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8e3476d
html draft
ltteh Nov 25, 2020
72dd1a6
Added CSS (Flexbox)
ltteh Nov 25, 2020
3f5afb8
Updated Flex style
ltteh Nov 26, 2020
d72b51b
More Flex CSS update
ltteh Nov 26, 2020
29a7571
Updated Link's hover color
ltteh Nov 26, 2020
1ace3b8
updated footer nav color
ltteh Nov 26, 2020
6689030
Beautify website
ltteh Nov 27, 2020
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/Cake 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.
111 changes: 109 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,118 @@
<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 -->
<header>
<div class="logo-div">
<img class="logo" src="images/Cake Logo.png" alt="Bakery Logo">
<button>
<a href="#contact">Contact Us</a>
</button>
</div>
</header>

<nav>
<ul class="header-nav">
<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</a>
</li>
</ul>
</nav>

<main>
<div class="text">
<h1>Welcome to <strong>LT Bakery</strong>
</h1>
<p><em>Your one stop shop for all delicious cakes</em>
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo turpis nec lacinia blandit. Fusce
at diam ligula. Ut volutpat, lacus et dictum hendrerit, eros metus dapibus mauris, sit amet facilisis
ligula odio a libero. Nulla egestas, tellus ut volutpat pretium, quam ligula gravida lectus, ac viverra
urna ipsum id neque. In egestas non odio id vulputate. Mauris pharetra dolor nec sodales scelerisque.
Pellentesque sollicitudin mauris porta, consequat mi at, tempor tellus. Sed eleifend hendrerit enim quis
varius. Morbi aliquam fringilla turpis vitae placerat. Aliquam odio nibh, egestas sed dapibus nec,
faucibus quis lectus. Vivamus porta porttitor ante, vitae porta metus dictum nec. Duis id tristique
erat, imperdiet vulputate elit.
</p>
</div>
<img class="main-img" src="https://p0.pikrepo.com/preview/146/356/blue-and-white-floral-cake.jpg"
alt="Blue and white floral cake">
</main>

<section class="cakes">
<figure>
<img class="cake"
src="https://c.pxhere.com/photos/b4/48/gingerbread_house_christmas_pastries_christmas_gingerbread_decoration_parties_candy_royal_icing-768337.jpg!d"
alt="Christmas cake">
<figcaption>
Christmas Cake
</figcaption>
</figure>
<figure>
<img class="cake" src="https://i.redd.it/pvrwtovoma751.jpg" alt="Spaghetti and meatballs gravity cake">
<figcaption>
Spaghetti and Meatballs Gravity Cake
</figcaption>
</figure>
<figure>
<img class="cake" src="https://i.insider.com/5d9e1cf38348690b2e706a94?width=600&format=jpeg&auto=webp"
alt="Doritos cake">
<figcaption>
Doritos Cake
</figcaption>
</figure>
<figure>
<img class="cake" src="https://www.howtocookthat.net/public_html/wp-content/comment-image/289633.jpg?x19907"
alt="Bag design cake">
<figcaption>
Bag Design Cake
</figcaption>
</figure>
</section>

<footer>
<ul class="footer-nav">
<li>
<a href="#">Site Map</a>
</li>
<li>
<a href="#">Delivery</a>
</li>
<li>
<a href="#">Return/Refund</a>
</li>
<li>
<a href="#">Terms and Conditions</a>
</li>
</ul>
<div id="contact">
<h2>
Contact Us
</h2>
<p><strong>LT Bakery</strong></p>
<p>xxxx shoplot,</p>
<p>street</p>
<p>postcode</p>
<p><em>Phone number: xxx-xxx-xxxxxxxx</em></p>
<p><em>Email: abcde@lt.com</em></p>
</div>
</footer>

</body>

</html>
168 changes: 167 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,167 @@
/* Add your styling here */
/* Import Google Font*/
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great|Architects+Daughter&display=swap');

/* Reset margin and padding */
html,
figure {
margin: 0;
padding: 0;
}

/* set font type */
h1,
h2,
button {
font-family: 'Fredericka the Great', cursive;
}

a,
p,
figcaption {
font-family: 'Architects Daughter', cursive;
}

/* top styling */
body {
padding: 2rem;
margin: auto;
min-width: 300px;
}

.logo {
max-width: 5rem;
}

.logo-div {
display: flex;
justify-content: space-between;
align-items: center;
}

button,
a {
font-size: 1.5rem;
}

button a:hover {
color: tomato;
}

/* top navigation bar */
.header-nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: violet;
}

.header-nav li {
padding: 1rem;
}

a {
text-decoration: none;
}

.header-nav a:hover {
color: yellow;
}

ul {
list-style: none;
}

/* Main section */
main {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: khaki;
}

main .text {
max-width: 50%;
padding: 1rem;
flex-direction: column;
}

.text p {
font-size: 1.1rem;
}

.main-img {
min-width: 120px;
max-width: 500px;
object-fit: contain;
padding: 3rem;
padding-right: 1rem;
align-self: flex-start;
}

/* Types of cakes */
.cakes {
padding-top: 3rem;
padding-bottom: 10rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
background-color: lightpink;
}

.cakes figure {
padding-top: 1rem;
width: auto;
max-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
color: rgb(131, 8, 231);
font-weight: bolder;
}

figcaption {
text-align: center;
}

.cake {
max-width: 50%;
}

/* footer styling */
footer {
display: flex;
justify-content: space-around;
}

/* footer navigation */
footer {
background-color: rgb(109, 227, 243);
padding-top: 1rem;
}

.footer-nav {
display: flex;
align-items: top;
flex-wrap: wrap;
margin-top: 0;
padding-left: 0;
}

.footer-nav li {
margin-left: 2rem;
}

footer a {
font-size: 1.3rem;
}

footer a:hover {
color: rgb(214, 20, 30);
}

#contact h2,
#contact p {
margin: 0;
}