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

Responsive cake webpage #493

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

Responsive cake webpage #493

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
763503f
Responsive cake webpage
fowobi Feb 8, 2023
347e380
update
fowobi Jun 2, 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 @@
{
"liveServer.settings.port": 5503
}
113 changes: 110 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,119 @@
<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 -->

<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="/style.css"/>

<title>Cake webpage</title>
</head>

<body>
<!-- Add your markup here -->
<div class="super-container">
<header class="header">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9jI_ZW44evhLDNw72CRxKhmQDkV9KAryROw&usqp=CAU"alt="cake-logo"class="header-logo-img"/>
</div>

<div class="header-logo-right">
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>

</div>


<div class="slogan">
<h1 class="slogan">The best cakes in town delivered to your door.</h1>
</div>


</div>

</header>
<div class="nav-items">
<nav>
<div class="nav-list">
<div>
<span class="navigation-item-home">Home</span>
</div>
<div>
<span class="navigation-item">Cakes</span>
</div>
<div>
<span class="navigation-item">OrderIn</span>
</div>
<div>
<span class="navigation-item">Lessons</span>
</div>
<div>
<span class="navigation-item">About</span>
</div>
</div>



</nav>
</div>


<div class="cake-feature">
<article class="welcome-container">
<h2>Welcome</h2>
<p>We specialise in creating truly bespoke cakes which our customers create in their imagination.
If you can tell us about it,we'll make it into cake.
Be it a wedding,birthday and any other celebration,let us design the perfect cake for your special day.
</p>
</article>

<article class="Big-cake-container">
<img class="big-cake-img" src="https://images.unsplash.com/photo-1584982890941-b788ae5a54df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTg0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=60"alt="vanilla-chocolate-fruit-cake"/>
</article>
</div>
<article class="gallery-container">

<div class="gallery-image-container">
<img src="https://images.unsplash.com/photo-1602630236440-a829a1d70114?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjQwfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60"alt="fluffy-chocolate-cake"class="fluffy-chocolate-cake"/>
</div>
<div class="gallery-image-container">
<img src="https://images.unsplash.com/photo-1615735486329-c61cd40bfcc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjgyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60"alt="fluffy-cake" class="="fluffy-cake"/>
</div>
<div class="gallery-image-container">
<img src="https://images.unsplash.com/photo-1474625342403-1b8a2c0f7215?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MzQyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60"alt="Chocolate-vanilla-cup-cake"class="Chocolate-vanilla-cup-cake"/>
</div>
<div class="gallery-image-container">
<img src="https://images.unsplash.com/photo-1567022405855-fc2ce6befe33?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NDYwfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60"alt="ice-cream-cup-cake"class="ice-cream-cup-cake"/>
</div>
</article>



<footer class="social-media-container">
<ul>
<div class="media">
<div>
<a href="https://www.facebook.com/">Facebook</a>
</div>
<div>
<a href="https://twitter.com/">Twitter</a>
</div>
<div>
<a href="https://www.instagram.com/">Instagram</a>
</div>
</div>
</ul>
<p class="copy">copyright &copy;2023 fowobi.</p>
</footer>
</div>
</body>

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

body{
margin: 0;
background-color: rgba(255, 99, 71, 0.5);
}

.super-container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 250px 300px 480px 570px px;
row-gap: 60px;
min-width: 480px;


}

.header{
display: flex;
align-items: center;
background-color: #bbc7c7;


}

.header-logo-img{
margin-left: 1rem;
border-radius: 15px;
}
.slogan{
font-size: 1.5rem;
padding-top: 5rem;
padding-left: 1rem;
font-style: italic;
}
.welcome-container h2{
font-size: 50px;
margin-left: 1rem;



}
.welcome-container p{
font-size: 30px;
margin-left: 1rem;
font-style: italic;

}
.welcome-container{
margin-bottom: 5rem;

}

.Big-cake-container{
margin-left: 1rem;


}

.big-cake-img{
height: 100%;

}
.social-media-container{
margin-top: 1rem;
background-color: #bbc7c7;

}
nav{
display:none;
}
.gallery-container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
margin-left: 1rem;
row-gap: 10px;

}


.navbar{
display: none;
}

.hamburger{
display:block;
float: right;
width: 35px;
height: 30px;
cursor: pointer;



}
.line{
display: block;
width: 100%;
height: 4px;
margin: 6px 0;
background-color: #333;
}

.copy{
font-size: large;
text-align: center;

}
.media{
flex-direction: column;
}

/* responsive */

@media screen and (min-width:900px) {
body{
background-color: pink;

}
.gallery-container{
display: flex;
gap: 2%;
margin-left: 5rem;

}
.cake-feature{
display:flex;
flex-direction: row-reverse;
padding-bottom: 3rem;
height: 400px;



}
.slogan{
margin-left: 15rem;
font-size: 32px;

}

.social-media-container{
width: 90rem;
font-size: 22px;




}
nav{
display: block;
border: 5px solid lightblue;
font-size: 28px;
font-style: italic;
text-align: center;
background-color: #bbc7c7;
color: white;
}
.nav-list{
display: flex;
justify-content: space-evenly;
margin-left: 32rem;
}
.navigation-item-home{
border-radius: 5px;



}
.media{
/* border: 5px solid red; */
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 65rem;
margin-left: 10rem;


}

.hamburger{
display:none;
}
}


@media screen and (min-width:1100px) {
body{
background-color:violet;
}
.social-media-container{
width: 120rem;
font-size: 24px;



}
.gallery-container{
display: flex;
gap: 4%;
margin-left: 15rem;

}
.welcome-container p{
font-size: 38px;
font-style: italic;

}
.cake-feature{
display:flex;
flex-direction: row-reverse;
padding-bottom: 3rem;
height: 400px;
margin-left: 2rem;



}
.welcome-container{

margin-left: 1rem;

}
.slogan{
margin-left: 23rem;
font-size: 38px;

}
.copy{
font-size: x-large;
text-align: center;

}
.media{
margin-left: 20rem;
}
}