Skip to content

F
FlavourFusionFoodApp
Commit b3d37710 authored by SrilakshmiNavya's avatar SrilakshmiNavya
Browse files
Options

Your commit message here

parents
Show whitespace changes
Inline Side-by-side
Showing with 1065 additions and 0 deletions
.DS_Store 0 → 100644
View file @ b3d37710
File added
img/abt.webp 0 → 100644
View file @ b3d37710
File added
img/c2.png 0 → 100644
View file @ b3d37710
img/c2.png

1.91 MB

img/p1.jpeg 0 → 100644
View file @ b3d37710
img/p1.jpeg

36.1 KB

img/p2.webp 0 → 100644
View file @ b3d37710
File added
img/p3.jpeg 0 → 100644
View file @ b3d37710
img/p3.jpeg

62.7 KB

img/p4.jpeg 0 → 100644
View file @ b3d37710
img/p4.jpeg

95.3 KB

img/p5.jpeg 0 → 100644
View file @ b3d37710
img/p5.jpeg

57.3 KB

img/p6.webp 0 → 100644
View file @ b3d37710
File added
img/p7.jpeg 0 → 100644
View file @ b3d37710
img/p7.jpeg

55.5 KB

img/p8.avif 0 → 100644
View file @ b3d37710
File added
index.html 0 → 100644
View file @ b3d37710
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive fruit and vegetables website</title>
<!--Link to css-->
<link rel="stylesheet" href="style.css">
<!-- link to boxIcons-->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<!--NAV BAR-->
<header>
<a href="#" class="logo"><i class='bx bx-bowl-hot'></i>FlavourFusion</a>
<!--Menu bar-->
<div class="bx bx-menu" id="menu-icon"></div>
<!-- Nav List-->
<ul class="navbar">
<li><a href="#home" class="home-active">Home</a></li>
<li><a href="#categories">Categories</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#customers">Customers</a></li>
</ul>
<!--Profile-->
<div class="profile">
<img src="img/profile.png" alt="">
<span>NavyaBunnyVox</span>
<i class='bx bx-caret-down'></i>
</div>
</header>
<!--Home-->
<section class="home swiper" id="home">
<div class="swiper-wrapper">
<!--Slide1-->
<div class="swiper-slide container">
<div class="home-text">
<span> We are FlavourFusion</span>
<h1>Choose FlavourFusion<br>the best flavoured<br>Multi-Cuisine Food</h1>
<a href="#" class="btn">Order Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="img/home1.png" alt="">
</div>
<!--Slide2-->
<div class="swiper-slide container">
<div class="home-text">
<span> We are FlavourFusion</span>
<h1>Choose FlavourFusion <br> the best flavoured <br>Multi-Cuisine Food</h1>
<a href="#" class="btn"> Order Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="img/home2.png" alt="">
</div>
<!--Slide3-->
<div class="swiper-slide container">
<div class="home-text">
<span> We are FlavourFusion</span>
<h1>Choose FlavourFusion <br> the best flavoured <br>Multi-Cuisine Food</h1>
<a href="#" class="btn"> Order Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="img/home3.png" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</section>
<!--Categories-->
<section class="categories" id="categories">
<div class="heading">
<h1>Browse Our Hottest <br><span>Categories</h1>
<a href="#" class="btn">See All <i class="bx bx-right-arrow-alt"></i></a>
</div>
<!--Container Content-->
<div class="categories-container">
<!--Box 1-->
<div class="box box1">
<img src="img/cate1.png" alt="">
<h2>SouthIndian</h2>
<span>22 Items</span>
<i class="bx bx-right-arrow-alt"></i>
</div>
</div>
<div class="categories-container">
<!--Box 2-->
<div class="box box2">
<img src="img/cate2.png" alt="">
<h2>NorthIndian</h2>
<span>22 Items</span>
<i class="bx bx-right-arrow-alt"></i>
</div>
</div>
<!--Box 3-->
<div class="categories-container">
<div class="box box3">
<img src="img/cate3.jpeg" alt="">
<h2>Chinese</h2>
<span>22 Items</span>
<i class="bx bx-right-arrow-alt"></i>
</div>
</div>
<!--Container Content-->
<div class="categories-container">
<!--Box 4-->
<div class="box box4">
<img src="img/cate4.png" alt="">
<h2>Japanese</h2>
<span>22 Items</span>
<i class="bx bx-right-arrow-alt"></i>
</div>
</div>
<!--Container Content-->
<div class="categories-container">
<!--Box 5-->
<div class="box box5">
<img src="img/cate5.jpeg" alt="">
<h2>Mexican</h2>
<span>22 Items</span>
<i class="bx bx-right-arrow-alt"></i>
</div>
</div>
</section>
<!-- Products -->
<section class="products" id="products">
<div class="heading">
<h1>Our Popular <br> <span>Products</span></h1>
<a href="#" class="btn">Shop Now<i class='bx bx-right-arrow-alt'></i></a>
</div>
<!-- Product Content -->
<div class="products-container">
<!--Box 1-->
<div class="box">
<img src="img/p1.jpeg" alt="">
<span>Vegetarian</span>
<h2> panner butter masala <br> curry 200g</h2>
<h3 class="price"> $2.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 2-->
<div class="box">
<img src="img/p2.webp" alt="">
<span>Maincourse</span>
<h2> Biryani <br> Medium</h2>
<h3 class="price"> $3.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 3-->
<div class="box">
<img src="img/p3.jpeg" alt="">
<span>Starter</span>
<h2> Chicken Lollipop <br> 8 pcs </h2>
<h3 class="price"> $2.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 4-->
<div class="box">
<img src="img/p4.jpeg" alt="">
<span>Indian Breads</span>
<h2> Naans <br> 1 pc</h2>
<h3 class="price"> $0.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 5-->
<div class="box">
<img src="img/p5.jpeg" alt="">
<span>Beverages</span>
<h2> juices <br> 200ml</h2>
<h3 class="price"> $1.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 6-->
<div class="box">
<img src="img/p6.webp" alt="">
<span>Desserts</span>
<h2> Apricot Delight <br> 100g</h2>
<h3 class="price"> $1.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 7-->
<div class="box">
<img src="img/p7.jpeg" alt="">
<span>Snacks</span>
<h2> Onion Pakoda <br> 100g</h2>
<h3 class="price"> $1.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
<!--Box 8-->
<div class="box">
<img src="img/p8.avif" alt="">
<span>Breakfast</span>
<h2>Idly<br>2 pcs</h2>
<h3 class="price"> $1.42 <span>/item</span></h3>
<i class='bx bx-cart'></i>
<i class='bx bx-heart' ></i>
<span class="discount"> -25%</span>
</div>
</div>
</section>
<!--About-->
<section class="about" id="about">
<img src="img/abt.webp" alt="">
<div class="about-text">
<span>About Us</span>
<p> Experience a culinary journey like no other at FlavourFusion. With a diverse menu inspired by flavors from around the globe, our expert chefs craft exquisite dishes that tantalize the taste buds.</p>
<br>
<p> Nestled in Texas, our restaurant offers a welcoming ambiance where every visit promises delightful moments and unforgettable dining experiences. Join us and indulge in a symphony of flavors that celebrate the art of multicuisine dining. </p>
<a href="#" class="btn">Learn More<i class='bx bx-right-arrow-alt'></i></a>
</div>
</section>
<!-- Customers-->
<section class="customers" id="customers">
<h2>Why Customer's Love Us? </h2>
<!-- Customer content-->
<div class="customers-container">
<!--Review 1-->
<div class="box">
<i class='bx bxs-quote-alt-left' ></i>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star-half' ></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi fugiat quidem quo, provident tenetur inventore expedita deleniti? Natus dolores in quidem nesciunt corporis totam? Animi excepturi voluptatem officia libero et.</p>
<div class="review-profile">
<img src="img/c1.jpeg" alt="">
<h3>Joseph smith</h3>
</div>
</div>
<!--Review 2-->
<div class="box">
<i class='bx bxs-quote-alt-left' ></i>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star-half' ></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi fugiat quidem quo, provident tenetur inventore expedita deleniti? Natus dolores in quidem nesciunt corporis totam? Animi excepturi voluptatem officia libero et.</p>
<div class="review-profile">
<img src="img/c2.png" alt="">
<h3>Emily watson</h3>
</div>
</div>
<!--Review 3-->
<div class="box">
<i class='bx bxs-quote-alt-left' ></i>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star-half' ></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi fugiat quidem quo, provident tenetur inventore expedita deleniti? Natus dolores in quidem nesciunt corporis totam? Animi excepturi voluptatem officia libero et.</p>
<div class="review-profile">
<img src="img/c3.jpeg" alt="">
<h3>christiana greyson</h3>
</div>
</div>
</div>
</section>
<!-- Footer-->
<section class="footer" id="footer">
<div class="footer-box">
<a href="#" class="logo"><i class="bx bx-bowl-hot"></i>FlavourFusion</a>
<p> 50th street, 4th <br> Floor, NYC 10022</p>
<div class="social">
<a href="#"><i class='bx bxl-facebook-square' ></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
<a href="#"><i class='bx bxl-instagram-alt' ></i></a>
<a href="#"><i class='bx bxl-youtube' ></i></a>
</div>
</div>
<div class="footer-box">
<h2>Categories</h2>
<a href="#">NorthIndian</a>
<a href="#">SouthIndian</a>
<a href="#">Mexian</a>
<a href="#">Chinese</a>
<a href="#">Japanese</a>
</div>
<div class="footer-box">
<h2>useful Links</h2>
<a href="#">Payment & Tax</a>
<a href="#">Terms of use</a>
<a href="#">My Blog</a>
</div>
<div class="footer-box">
<h2>Newsletter</h2>
<p>Get 10% Discount with <br> Email Newsletter</p>
<form action="">
<i class='bx bxs-envelope' ></i>
<input type="email" name="" id="" placeholder="Enter Your Email">
<i class='bx bx-arrow-back bx-rotate-180' ></i>
</form>
</div>
</section>
<!--Copyright-->
<div class="copyright">
<p>&#169; sslnavya All Right Reserved.</p>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Link To js-->
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
main.js 0 → 100644
View file @ b3d37710
var swiper = new Swiper(".home", {
spaceBetween: 80,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('active');
}
window.onscroll = () => {
menu.classList.remove('bx-x');
navbar.classList.remove('active');
}
\ No newline at end of file
style.css 0 → 100644
View file @ b3d37710
/* Google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
font-family: 'poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
scroll-padding-top: 2rem;
scroll-behavior: smooth;
}
/*Some variables*/
:root{
--blue-color: #05a0ed;
--light-blue-color:#47f6df ;
--orange-color: rgb(247, 124, 30);
--light-orange-color: #f6b832;
--text-color:#070707 ;
--bg-color: #fff ;
}
/* custom scrolllbar*/
::-webkit-scrollbar{
width: 0.5rem;
background: lightblue;
}
::-webkit-scrollbar-thumb {
width: 0.5rem;
background: var(--blue-color);
border-radius: 5rem;
}
section {
padding: 4.5rem 0 1.5rem ;
}
img{
width: 100%;
height: auto;
}
body{
color: var(--text-color);
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
box-shadow: 0 8px 11px rgb(14 55 54 / 15%);
padding: 20px 20px ;
transition: 0.5s;
}
.profile{
display: flex;
align-items: center;
column-gap: 0.5rem;
cursor: pointer;
}
.profile img{
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.profile span{
font-size: 13px;
font-weight: 500;
}
.logo{
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
column-gap: 00.5rem;
}
.logo .bx{
font-size: 24px;
color: var(--orange-color);
}
ul {
list-style-type: none;
}
.navbar {
display: flex;
column-gap: 0.5rem;
}
.navbar a{
font-size: 1rem;
font-weight: 500;
color: var(--text-color);
padding: 0.5rem 1rem;
}
.navbar a:hover,
.navbar .home-active {
background: var(--blue-color);
border-radius: 5rem;
color: var(--bg-color);
transition: background 0.05s;
}
#menu-icon {
font-size: 24px;
cursor: pointer;
z-index: 10001;
display: none;
}
.container{
position:relative;
width: 100%;
/* top: 1; */
min-height: 640px;
display: flex;
align-items: center;
background: url(img/background.png) ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
justify-content: center;
/*justify-content: space-between;
align-items: center; */
}
.container img{
position: absolute;
/* top: 0; */
right: 200px;
width: 600px;
/* height: auto; */
bottom: 100px;
max-width: 50%;
}
.home-text{
/* width: 80%;
text-align: left; */
padding: 200px 200px;
}
.home-text span{
font-weight: 400;
text-transform: uppercase;
color: var(--blue-color);
}
.home-text h1{
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 1rem;
}
.btn{
padding: 0.6rem 1rem;
background: var(--blue-color);
color: var(--bg-color);
font-weight: 400;
border-radius: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 00.5rem;
max-width: 160px;
}
.btn .bx{
padding: 4px;
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 1rem;
font-size: 20px;
margin: auto;
}
.btn:hover{
background: var(--light-orange-color);
transition: 0.2s ease;
}
/* .swiper-button-next{
background: url(img/left-arrow.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
margin-right: 20px;
}
.swiper-button-next::after{
display: none;
} */
.heading{
display: flex;
justify-content: space-between;
align-items: center;
}
.heading h1 {
font-size: 1.6rem;
font-weight: 600;
}
.heading span{
color: var(--blue-color);
}
.categories {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.categories-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, auto));
gap: 1rem;
margin-top: 2rem;
float: left;
}
.categories-container .box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 45px;
border-radius: 0.5rem;
margin-left: 20px;
}
.categories-container .box img{
width: 100%;
height: 100px;
object-fit: contain;
object-position: center;
}
.categories-container .box h2{
font-size: 1rem;
font-weight: 600;
}
.categories-container .box span{
font-size: 0.8rem;
font-weight: 400;
margin-bottom: 1rem;
}
.categories-container .box .bx{
padding: 10px;
background: var(--blue-color);
color: var(--bg-color);
border-radius: 5rem;
margin-top: 2rem;
position: absolute;
bottom: -8%;
display: none;
}
.categories-container .box .bx:hover{
background: var(--light-orange-color);
transition: 0.2s all linear;
}
.categories-container .box:hover .bx{
display: block;
transition: 0.2s all linear;
}
.box1{
background: #fef4ea;
}
.box2{
background: #e9f4e3;
}
.box3{
background: #dff8f5;
}
.box4{
background: #f8e3df;
}
.box5{
background: #f3fae3;
}
.products, .categories {
width: 100%;
display: block;
clear: both;
}
.products{
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.products-container{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(260px, auto));
gap: 1.5rem;
margin-top: 2rem;
}
.products-container .box{
padding: 20px;
box-shadow: 1px 2px 11px 4px rgb(14 55 54 / 15%);
border-radius: 0.5rem;
position: relative;
}
.products-container .box img{
width: 100%;
height:200px;
object-fit: contain;
object-position: center;
}
.products-container .box span{
font-weight: 500;
font-size: 13px;
}
.products-container .box h2{
font-size: 1rem;
font-weight: 600;
}
.products-container .box .price{
font-size: 1rem;
font-weight: 600;
margin-top: 0.5rem;
color: var(--orange-color);
}
.products-container .box .price span{
color: var(--text-color);
}
.products-container .box .bx-cart{
position: absolute;
right: 0;
bottom: 0;
padding: 10px;
background: var(--blue-color);
color: var(--bg-color);
font-size: 20px;
border-radius: 0.5 rem 0 0.5rem 0;
}
.products-container .box .bx-cart:hover{
background: var(--light-orange-color);
transition: 0.2s all linear;
}
.products-container .box .bx-heart {
position: absolute;
top: 0.2rem;
right: 1rem;
font-size: 20px;
color: var(--orange-color);
}
.products-container .box .discount{
position: absolute;
top: 0.2rem;
left: 0;
background: var(--orange-color);
color: var(--bg-color);
padding: 4px 18px ;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.about{
max-width: 1300px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21rem, auto));
align-items: center;
gap: 1.5rem;
}
.about-text span{
font-weight: 600;
text-transform: uppercase;
color: var(--blue-color);
}
.about-text p {
margin: 0.5rem 0 1rem;
}
.customers{
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.customers h2 {
text-align: center;
font-size: 1.6rem;
font-weight: 600;
}
.customers-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,auto));
gap: 1.5rem;
margin-top: 2rem;
}
.customers-container .box{
padding: 20px;
box-shadow: 1px 2px 11px 4px rgb(14 55 54 / 15%);
border-radius: 50rem;
border-radius: 70px solid var(--blue-color);
}
.customers-container .box:hover{
transform: translate(10px);
transition: 0.2s all linear;
}
.customers-container .box .bx{
font-size: 24px;
color: var(--blue-color);
}
.customers-container .box .stars .bx{
font-size: 1rem;
color: var(--orange-color);
}
.customers-container .box p{
font-size: 0.939rem;
}
.review-profile{
display: flex;
align-items: center;
margin-top: 1rem;
column-gap: 0.5rem;
}
.review-profile img{
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.review-profile h3{
font-size: 1rem;
font-weight: 600;
}
.footer{
max-width: 1300px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 1.5rem;
margin-top: 2rem;
background: #fef4ea;
border-radius: 0.5rem;
padding:20px;
}
.footer-box{
display: flex;
flex-direction: column;
}
.footer-box p{
font-size: 0.938rem;
margin: 0.5rem 0 1rem;
}
.social{
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.social .bx{
padding: 10px;
background: var(--bg-color);
color: var(--blue-color);
border-radius: 5rem;
font-size: 20px;
}
.social .bx:hover{
background: var(--blue-color);
color: var(--bg-color);
transition: 0.2s all linear;
}
.footer-box h2{
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
}
.footer-box a{
color: #868a92;
margin-bottom: 1rem;
}
.footer-box a:hover{
color: var(--orange-color);
}
.footer-box form{
border-bottom: 1px solid var(--text-color);
padding: 10px;
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.footer-box form input{
background: transparent ;
border: none;
outline: none;
}
.footer-box form .bx{
font-size: 20px;
color: var(--orange-color);
cursor: pointer;
}
.footer-box form .bxs-envelope{
color: var(--blue-color);
}
.copyright {
text-align: center;
padding: 20px;
}
/* Making Responsive*/
@media (max-width:1080px) {
header{
padding: 18px 60px;
}
.home-text{
padding:200px 100px ;
}
.container img{
right: 10px;
}
}
@media (max-width: 991px){
header{
padding: 18px 4%;
}
section{
padding: 50px 4%;
}
.home-text h1{
font-size:2rem ;
}
}
@media (max-width: 852px){
header{
padding: 12px 4%;
}
#menu-icon{
display: initial;
}
.navbar{
position: absolute;
top: -570px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
background: var(--bg-color);
box-shadow: 4px 4px 0 4px rgb(14 55 54 / 15%);
transition: 0.2s all linear;
text-align: left;
}
.navbar a{
padding: 1rem;
margin: 1rem;
display: block ;
}
.navbar a:hover, .navbar .home-active{
border-radius: 00.5rem ;
color: var(--bg-color);
}
.navbar.active{
top: 100%;
}
.home-text h1{
font-size: 1.7rem;
}
.container img{
width: 390px;
padding: 60px 10px;
}
.btn{
padding: 0.6rem 1.2rem ;
}
.products-container{
grid-template-columns: repeat(auto-fit, minmax(244px, auto));
}
}
@media(max-width: 712px){
.container img {
padding: 90px 5px;
}
.heading h1{
font-size: 1.2rem;
}
.home-text h1{
font-size: 1.5rem;
}
.home-text{
padding:250px 100px ;
}
.about{
grid-template-columns: repeat(auto-fit, minmax(244px, auto));
}
.about img{
order: 2;
}
.about-text{
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn{
max-width: 164px;
}
.customers h2{
font-size: 1.2rem;
}
}
@media(max-width: 642px){
.container img{
right: 0;
width: 370px;
}
.home-text{
padding:250px 100px ;
}
.home-text h1{
font-size: 1.2rem;
}
}
@media(max-width: 546px){
.container img{
right: 0;
width: 370px;
object-fit: contain;
}
}
@media(max-width: 370px){
.container img{
width: 370px;
object-fit: contain;
right:20%;
}
.logo{
font-size: 1rem;
}
.profile img{
width: 30px;
height: 30px;
}
.profile span{
font-size: 10px;
}
.home-text{
padding-bottom: 25rem;
}
.home-text span{
font-size: 0.8rem;
}
.home-text h1{
font-size: 1.4rem;
}
.heading{
flex-direction: column;
text-align: center;
}
.heading .btn{
margin-top: 1rem;
}
.categories-container{
gap: 1.5rem;
}
}
\ No newline at end of file
text 0 → 100644
View file @ b3d37710
Responsive fruit and vegetables website
we are FlavourFusion
choose FlavourFusion <br> the best healthy <br> chicken salad
Browse our hottest <br> <span> Categories
Farm fresh organic <br> fruits 250g
GymVast, 50th Street, 4th <br> Floor, NYC 10022
Get 10% Discount with <br> Email NewsLetter
&#169; CarpoolVenom All Right reserved.
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment