Skip to content

Commit

Permalink
final update
Browse files Browse the repository at this point in the history
  • Loading branch information
@lome-ezehi
lome-ezehi committed Aug 30, 2024
1 parent 1991de6 commit c4951aa
Showing 1 changed file with 65 additions and 68 deletions.
133 changes: 65 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,24 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Recipe.com</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

*{
font-family: 'Josefin Sans', serif;
font-optical-sizing: auto;
font-weight: normal;
}
a:hover{
font-weight: bold;
transition: ease-in-out .2s;
}

button:hover{
transition: ease 0.2s;
font-weight: bold;
}
.first p{
font-size: 20px;
}
.page-footer{
background: linear-gradient(to bottom, white, #ef6c00);
background: linear-gradient(to bottom, white, #e65100);
}
.page-footer p{
color: black;
Expand All @@ -30,21 +39,6 @@
padding-bottom: 10px;
}

/*
.card {
position:relative;
z-index:1;
}
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index: 0;
}

*/

header > nav{
z-index: 1;
Expand All @@ -60,15 +54,15 @@
} */
.section h3, h1{
color: white;
font-style: italic;
}
.section h6{
color: #ef6c00;
color: #e65100;
font-style: italic;
font-size: 20px;
}
span{
color: #ef6c00;
color: #e65100;
font-style: italic;
}
.btn{
border-radius: 10px;
Expand Down Expand Up @@ -99,29 +93,44 @@
position: relative;
text-align: center;
color: white;
cursor: pointer;
}

.image-cont a{
display: none;
}

.image-cont:hover img{
filter: brightness(.2);
transition: all.5s;
}

.image-content{
.image-cont:hover a{
display: inline;
position: absolute;
font-size: 35px;
font-size: 23px;
text-decoration: underline;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.image-cont-2 {
.image-mobile {
position: relative;
color: white;
}

.image-content-2{
.image-mobile-text{
position: absolute;
font-size: 35px;
text-decoration: underline;
top: 70px;
right: 25%;
}
p{
font-size: 16pt !important;
font-weight: normal;
}

</style>
</head>
Expand Down Expand Up @@ -211,8 +220,8 @@ <h6 style="color: white; font-size: 15px;">Explore, Cook and Create With Us.</h6
<div class="container first">
<div class="row">
<div class="col l6">
<h3><em>Start your culinary journey <span style="color: rgb(216, 100, 12);">today.</span> </em></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ipsam accusamus quis placeat rem hic voluptatem doloremque quaerat repellat aut soluta modi magni assumenda fugit, nisi ex quas velit amet!</p><br>
<h3>Start your culinary journey <span>today.</span></h3>
<p>We offer you a gateway to an expertly curated selection of global recipes, ranging from traditional dishes to innovative creations, spanning various cuisines and cooking techniques.</p><br>
<button class="btn btn-large orange darken-4">START YOUR JOURNEY</button>
</div>
<div class="col l6 hide-on-med-and-down">
Expand All @@ -228,31 +237,31 @@ <h3 class="center-align hide-on-large-only">Tap on a <span>Category</span></h3>
<div class="slider hide-on-large-only">
<ul class="slides">
<li>
<div class="image-cont-2">
<div class="image-mobile">
<a href="">
<img src="Img/cake-main.jpg" alt="">
</a>
<div class="image-content-2">
<div class="image-mobile-text">
<a href="" class="left-align" style="color: white;">Cakes <i class="material-icons">call_made</i> </a>
</div>
</div>
</li>
<li>
<div class="image-cont-2">
<div class="image-mobile">
<a href="">
<img src="Img/chicken-main.jpg" alt="">
</a>
<div class="image-content-2">
<div class="image-mobile-text">
<a href="" style="color: white;">Chicken <i class="material-icons">call_made</i> </a>
</div>
</div>
</li>
<li>
<div class="image-cont-2">
<div class="image-mobile">
<a href="">
<img src="Img/soup-main.jpg" alt="">
</a>
<div class="image-content-2">
<div class="image-mobile-text">
<a href="" style="color: white;">Soups <i class="material-icons">call_made</i> </a>
</div>
</div>
Expand All @@ -265,28 +274,16 @@ <h3 class="center-align hide-on-large-only">Tap on a <span>Category</span></h3>
<h3 style="color: black;">Select a <span>Category</span></h3><br>
<div class="row">
<div class="image-cont col l4">
<a href="#">
<img src="Img/cake-main.jpg" width="100%" alt="" style="border-radius: 10px;">
</a>
<div class="image-content">
<a href="" style="color: white;">Cakes <i class="material-icons">call_made</i> </a>
</div>
<img src="Img/cake-main.jpg" width="100%" alt="" style="border-radius: 10px;">
<a class="flow-text" href="" style="color: white;">Cakes <i class="material-icons">call_made</i> </a>
</div>
<div class="image-cont col l4">
<a href="#">
<img src="Img/chicken-main.jpg" width="100%" alt="" style="border-radius: 10px;">
</a>
<div class="image-content">
<a href="" style="color: white;">Chicken <i class="material-icons">call_made</i></a>
</div>
<img src="Img/chicken-main.jpg" width="100%" alt="" style="border-radius: 10px;">
<a class="flow-text" href="" style="color: white;">Chicken <i class="material-icons">call_made</i></a>
</div>
<div class="image-cont col l4">
<a href="#">
<img src="Img/soup-main.jpg" width="100%" alt="" style="border-radius: 10px;">
</a>
<div class="image-content">
<a href="" style="color: white;">Soups <i class="material-icons">call_made</i></a>
</div>
<img src="Img/soup-main.jpg" width="100%" alt="" style="border-radius: 10px;">
<a class="flow-text" href="" style="color: white;">Soups <i class="material-icons">call_made</i></a>
</div>
</div>
</div>
Expand All @@ -311,34 +308,33 @@ <h3 class="hide-on-med-and-down">
<h3 class="hide-on-large-only center-align">
Crafted by Culinary <span style="color: #ad1457;">Wizards.</span>
</h3>
<p style="font-size: 25px;">Discover a world of flavorful options that promise mouthwatering results, meticulously curated and perfected by culinary experts, all at your fingertips. Easy as pie, isn't it?</p>
<br>
<p>Discover a world of flavorful options that promise mouthwatering results, meticulously curated and perfected by culinary experts, all at your fingertips. Easy as pie, isn't it?</p>
<br>
<button class="btn btn-large pink darken-3">START COOKING</button>

</div>
</div>
</div>
<br>
<br>
<br>

<div class="section black">
<h3 class="center-align hide-on-large-only">See Our <br> <span >numbers</span></h3>
<h3 class="center-align hide-on-small-and-down">See Our <span >numbers</span></h3>
<br>
<br>
<div class="container center-align">
<div class="row">
<div class="col l4 s12">
<h1>27k+</h1>
<h1 style="font-size: 70px;">27k+</h1>
<h6>active users each month</h6>
</div>
<div class="col l4 s12">
<h1>800+</h1>
<h6>active users each month</h6>
<h1 style="font-size: 70px;">800+</h1>
<h6>availaible recipes till date</h6>
</div>
<div class="col l4 s12">
<h1>30+</h1>
<h6>active users each month</h6>
<h1 style="font-size: 70px;">30+</h1>
<h6>chefs for consultation</h6>
</div>
</div>
</div>
Expand All @@ -347,8 +343,7 @@ <h6>active users each month</h6>

<div class="container">
<h3 class="left-align">Meet the <span>experts</span></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nam est modi laudantium, at, maxime, repellat expedita cum harum ab quisquam animi quos perferendis tempora?</p> <br>

<p>Our team of seasoned chefs offer expert guidance and delectable recipes to elevate your kitchen creations to new heights.</p> <br>
<div class="row">
<div class="col l4 s12">
<img src="Img/expert-1.jpg" width="100%" alt="">
Expand All @@ -368,7 +363,6 @@ <h6>Alejandro <span>Mateo</span></h6>
<h6>Miranda <span>Tangrove</span></h6>
<br>
</div>

</div>
</div>
<br>
Expand Down Expand Up @@ -397,23 +391,26 @@ <h3 style="color: black;">Our Esteemed <span>Cliente</span></h3>
<div class="container center-align">
<div class="row ">
<div class="col l3 s12 left-align">
<br><a class="orange-text text-darken-3" href="">About</a><br><br>
<br><a class="orange-text text-darken-4" style="font-size: 23px;" href="">About</a><br>
<p>Who we are <br> Meet the Chefs <br>FAQs
</p>
</div>
<div class="col l3 s12 left-align">
<br><a class="orange-text text-darken-3" href="">Explore</a><br><br>
<br><a class="orange-text text-darken-4" style="font-size: 23px;" href="">Explore</a><br>
<p>Recipes <br> Cakes <br>Chicken <br>Soups
</div>
<div class="col l3 s12 left-align">
<br><a class="orange-text text-darken-3" href="">Legal</a><br><br>
<br><a class="orange-text text-darken-4" style="font-size: 23px;" href="">Legal</a><br>
<p>Privacy Policy <br> Terms & Conditions <br>Disclosure
</div>
<div class="col l3 s12 left-align">
<br><a class="orange-text text-darken-3" href="">Contact Us</a><br><br>
<br><a class="orange-text text-darken-4" style="font-size: 23px;" href="">Contact Us</a><br>
<p>+2348136763185 <br> Lomeezehi@gmail.com
</div>
</div>
<br>
<br>
<br>
<div class="container">
<section class="section">
<h6 class="white-text hide-on-large-only"> &copy 2024. Recipe.com. All rights <br> reserved. </h6>
Expand Down

0 comments on commit c4951aa

Please sign in to comment.