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

West Midlands - Khalid Elsafi - HTML/CSS - Week_3 #79

Closed
alsafi25 wants to merge 4 commits into from
Closed

West Midlands - Khalid Elsafi - HTML/CSS - Week_3 #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f34ef8
html structure created
alsafi25 Nov 27, 2020
a975c5a
header, logo and nav style
alsafi25 Nov 27, 2020
2386812
Navigation bar added
alsafi25 Nov 28, 2020
59691cb
Footer added
alsafi25 Nov 28, 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 .DS_Store
View file
Open in desktop
Binary file not shown.
75 changes: 75 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,85 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<!-- Responsive -->
<link rel="stylesheet" href="style.css">
<link href="css/responsive.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>
<!-- Add your markup here -->

<!-- Main Header-->
<header class="header">
<div class="logo-div">
<img class="logo" src="https://thumbs.dreamstime.com/b/wedding-cakes-tiered-indoor-party-45788964.jpg" alt="Logo Image " width="100 ">
</div>
<div class="contact ">
<ul>
<li>
<div class="call ">Call us</div>
</li>
<li>257 ILkeston Road</li>
<li>Nottingham </li>
<li> Contact Number 011566774</li>
<li>Opeing Hours Mon-Sat: 9:00 AM to 07:00 PM</li>
</ul>
</div>

</header>
<nav class="navigation">
<ul class="nav-buttons">
<li>Home</li>
<li>Cakes</li>
<li>Ordering</li>
<li>Lessons</li>
<li>About</li>
</ul>
</nav>
<section class="information">
<aside>
<h1>Best Cake Shop in Nottingham</h1>
<p>We offer a variety of different sizes, types and flavours of delicious cakes at Modern cakes in Nottingham, baked in store and served fresh on the counter for our customers every day. Whether you fancy sponge, carrot, chocolate cake or anything
else, our artisan bakers have the expertise and skill to craft up any kind of cake for any occasion. Give us a call on 07429451123 or pop in to our cake shop to check out our selection of freshly baked.</p>

</aside>
<div>
<img class="image1" src="https://images.unsplash.com/photo-1562777717-dc6984f65a63?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTh8fGNha2V8ZW58MHx8MHw%3D&auto=format&fit=crop&w=800&q=60" alt="" width="600" />
</div>
</section>
<section class="cakes">
<figure class="cake">
<img class="cake-img" alt="profiteroles" src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fGNha2V8ZW58MHx8MHw%3D&auto=format&fit=crop&w=800&q=60">
<figcaption>Backed cup cake</figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="fruit tart" src="https://images.unsplash.com/photo-1552689486-ce080445fbb6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjd8fGNha2V8ZW58MHx8MHw%3D&auto=format&fit=crop&w=800&q=60">
<figcaption>Rainbow Coverd Cake</figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="sacher torte" src="https://images.unsplash.com/photo-1562022791-1ee0dc5f8b1a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDl8fGNha2V8ZW58MHx8MHw%3D&auto=format&fit=crop&w=800&q=60">
<figcaption>Cake Wth strowberry topping </figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="millefoglie" src="https://images.unsplash.com/photo-1562440499-64c9a111f713?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8Y2FrZSUyMGJpcnRoZGF5fGVufDB8fDB8&auto=format&fit=crop&w=800&q=60">
<figcaption>Maccron on cake</figcaption>
</figure>
</section>
<nav>
<footer>
<div class="footer-item">
<h4>Site map</h4>
<h4>Contact</h4>
<h4>Delivery</h4>
</div>
</footer>

</nav>

</body>

</html>
136 changes: 136 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,137 @@
/* Add your styling here */


/*Header and logo stlye*/

body {
padding: 0;
margin: auto;
max-width: 1000px;
background-color: white;
}

.header {
display: flex;
list-style: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: rgb(255, 249, 240);
}

ul {
display: flex;
list-style-type: none;
flex-direction: column;
justify-content: space-around;
margin-left: 50px;
}

.logo {
border-radius: 50%;
width: 200px;
}

.call {
font-size: 20px;
margin-bottom: 20px;
font-weight: bold;
}

@media screen and (min-width: 900px) {
body {
background: rgb(218, 226, 238);
}
}


/*navba& liknd-buttons styling*/

.nav-buttons {
display: flex;
flex-direction: row;
padding: 3%;
margin: 0;
justify-content: space-between;
background-color: rgb(174, 123, 240);
border-radius: 2%;
}

.navigation {
border-radius: 2%;
}

.buttons li:hover {
color: #021e24;
font-weight: bold;
}


/* information section style*/

aside {
width: 40%;
}

.information {
display: flex;
margin-top: 10px;
}

.image1 {
max-width: 100%;
height: 300px;
border-radius: 2%;
}


/* Cakes styles */

.cakes {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgb(174, 123, 240);
color: #0a3f35;
border-radius: 1%;
margin-bottom: 20px;
}

.cake {
text-align: center;
max-width: 100%;
height: 200px;
border-radius: 2px;
}

.cake:hover {
background-color: rgb(214, 196, 214);
}

.cake-img {
width: auto;
max-width: 350px;
height: auto;
max-height: 100%;
}

figcaption {
margin: 1rem;
}


/* footer*/

.footer-item {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 100px;
padding-left: 20px;
padding-right: 20px;
}

footer {
background-color: rgb(245, 237, 237);
}