Skip to content

Commit b9988df

Browse files
CodeWithNiranjanCodeWithNiranjan
authored
Add files via upload
0 parents  commit b9988df

File tree

10 files changed

+22888
-0
lines changed

10 files changed

+22888
-0
lines changed

‎assests/app.png‎

431 KB
Loading

‎assests/food.jpg‎

1.25 MB
Loading

‎assests/menu.jpg‎

73.5 KB
Loading

‎assests/store.png‎

116 KB
Loading

‎css/bootstrap.css‎

Lines changed: 11266 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/botstrap_modified.css‎

Lines changed: 11265 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/responsive.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@media (max-width:647px) {
2+
.body span{
3+
font-size: 31px;
4+
}
5+
.body h1{
6+
font-size: 50px;
7+
}
8+
}
9+
10+
@media (max-width:455px) {
11+
.body span{
12+
font-size: 21px;
13+
}
14+
.body h1{
15+
font-size: 30px;
16+
}
17+
}
18+
19+
@media (max-width:811px) {
20+
.app h2{
21+
font-size: 50px;
22+
}
23+
}
24+
25+
@media (max-width:600px) {
26+
.app h2{
27+
font-size: 40px;
28+
}
29+
.appImg{
30+
height: 400px;
31+
}
32+
}
33+
34+
@media (max-width:477px) {
35+
.app h2{
36+
font-size: 20px;
37+
}
38+
.appImg{
39+
height: 200px;
40+
}
41+
.app{
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
flex-direction: column;
46+
text-align: center;
47+
}
48+
}

‎css/style.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
2+
3+
*{
4+
margin: 0;
5+
font-family: 'Rubik', sans-serif;
6+
}
7+
8+
.navbar{
9+
padding: 16px 0px 12px 0px;
10+
display: flex;
11+
flex-direction: row;
12+
justify-content: space-between;
13+
align-content: stretch;
14+
background: #ffffff21;
15+
width: 100%;
16+
transition: .3s linear;
17+
z-index: 999;
18+
}
19+
20+
.navsticky{
21+
background: #fff;
22+
position: fixed;
23+
padding: 8px 0px 8px 0px;
24+
}
25+
26+
.body{
27+
background: #0e1629;
28+
padding: 100px;
29+
text-align: center;
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
flex-direction: column;
34+
}
35+
36+
.body span{
37+
background: #fff;
38+
padding: 5px;
39+
font-size: 41px;
40+
}
41+
42+
.body h1{
43+
font-weight: 300;
44+
font-size: 66px;
45+
color: #fff;
46+
}
47+
48+
.btn-white{
49+
background-color: #fff;
50+
color: #0e1629;
51+
outline: none;
52+
border: none;
53+
padding: 10px;
54+
margin-top: 30px;
55+
transition: .2s linear;
56+
border-radius: 3px;
57+
}
58+
59+
.btn-white:hover{
60+
background: var(--bs-danger);
61+
color: #fff;
62+
transform: translateY(-3px);
63+
box-shadow: 0px 14px 24px -13px rgb(0, 0, 0, .14);
64+
}
65+
66+
/* About Section */
67+
68+
.discover{
69+
text-align: center;
70+
padding: 30px;
71+
}
72+
73+
.discover img{
74+
max-width: 80%;
75+
height: auto;
76+
animation: blob 20s linear infinite; /* Border animation */
77+
}
78+
79+
@keyframes blob{
80+
0%{
81+
border-radius: 31% 69% 60% 40% / 37% 35% 65% 63% ;
82+
}
83+
20%{
84+
border-radius: 52% 48% 46% 54% / 55% 42% 58% 45% ;
85+
}
86+
40%{
87+
border-radius: 70% 30% 61% 39% / 34% 56% 44% 66% ;
88+
}
89+
60%{
90+
border-radius: 41% 59% 33% 67% / 58% 42% 58% 42% ;
91+
}
92+
80%{
93+
border-radius: 61% 39% 54% 46% / 39% 52% 48% 61% ;
94+
}
95+
95%{
96+
border-radius: 46% 54% 57% 43% / 65% 41% 59% 35% ;
97+
}
98+
100%{
99+
border-radius: 31% 69% 60% 40% / 37% 35% 65% 63% ;
100+
}
101+
}
102+
103+
.divider{
104+
max-width: 100%;
105+
height: auto;
106+
border: 2px solid var(--bs-danger);
107+
margin: 40px;
108+
}
109+
110+
.topdishes{
111+
text-align: center;
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
flex-direction: column;
116+
}
117+
118+
.card{
119+
text-decoration: none;
120+
margin: 20px;
121+
color: #0e1629;
122+
transition: .3s linear;
123+
}
124+
125+
.card:hover{
126+
color: var(--bs-danger);
127+
}
128+
129+
.card-dishes{
130+
max-width: 1260px;
131+
}
132+
133+
.card img{
134+
border-top-right-radius: 1rem;
135+
border-top-left-radius: 1rem;
136+
}
137+
138+
.app{
139+
color: #fff;
140+
background: var(--bs-danger);
141+
padding: 30px;
142+
display: flex;
143+
align-items: center;
144+
justify-content: space-around;
145+
}
146+
147+
.app h2{
148+
font-size: 70px;
149+
padding: 10px;
150+
}
151+
152+
.app p{
153+
padding: 10px;
154+
max-width: 500px;
155+
columns: #dadada;
156+
}
157+
158+
.appImg{
159+
height: 500px;
160+
}
161+
162+
.downloadImg{
163+
height: 105px;
164+
cursor: pointer;
165+
}
166+
167+
.subscribe{
168+
text-align: center;
169+
display: flex;
170+
align-items: center;
171+
justify-content: center;
172+
flex-direction: column;
173+
padding: 30px;
174+
}
175+
176+
.newsletterForm{
177+
width: 90%;
178+
}
179+
180+
.footer{
181+
background: var(--bs-danger);
182+
}
183+
184+
.footer *{
185+
color: #fff;
186+
text-align: center;
187+
padding: 30px;
188+
}

‎index.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/botstrap_modified.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<link rel="stylesheet" href="css/responsive.css">
10+
<title>Responsive Food website</title>
11+
</head>
12+
<body>
13+
<div class="header">
14+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
15+
<div class="container-fluid">
16+
<a class="navbar-brand" href="#">Tomato</a>
17+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
21+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
22+
<li class="nav-item">
23+
<a class="nav-link active" aria-current="page" href="#">Home</a>
24+
</li>
25+
<li class="nav-item">
26+
<a class="nav-link" href="#about">About Us</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#menu">Menu</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="#app">App</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="#subscribe">Subscribe</a>
36+
</li>
37+
</ul>
38+
<form class="d-flex">
39+
<input class="form-control me-2" type="search" placeholder="Enter your favourite food" aria-label="Search">
40+
<button class="btn btn-outline-danger" type="submit">Search</button>
41+
</form>
42+
</div>
43+
</div>
44+
</nav>
45+
<div class="body">
46+
<span>Welcome To</span>
47+
<h1>Tomato Foods</h1>
48+
<div class="btn-team">
49+
<button class="btn-white">Contact Us</button>
50+
<button class="btn-white">Our Menu</button>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="discover" id="about">
55+
<h2>About <span class="text-danger">Our </span> Services</h2>
56+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam optio voluptas, nemo, esse nihil beatae facere ipsam ipsa eius enim totam libero repellat ut! Est, omnis nulla commodi, repellendus voluptas eligendi iusto, saepe deleniti a vel hic deserunt necessitatibus sapiente cupiditate ipsum ad dolorum impedit facilis. Obcaecati commodi quibusdam porro animi repudiandae earum architecto nihil nesciunt, impedit, nemo maiores id!</p>
57+
<img src="assests/food.jpg" alt="Food">
58+
</div>
59+
<div class="divider"></div>
60+
<div class="topdishes" id="menu">
61+
<h2>Discover Our <span class="text-danger">Top </span>Dishes</h2>
62+
<div class="row card-dishes">
63+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
64+
<div class="card-body py-4 text-center">
65+
<h3 class="h5 mt-1">Food Name</h3>
66+
</div></a></div>
67+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
68+
<div class="card-body py-4 text-center">
69+
<h3 class="h5 mt-1">Food Name</h3>
70+
</div></a></div>
71+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
72+
<div class="card-body py-4 text-center">
73+
<h3 class="h5 mt-1">Food Name</h3>
74+
</div></a></div>
75+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
76+
<div class="card-body py-4 text-center">
77+
<h3 class="h5 mt-1">Food Name</h3>
78+
</div></a></div>
79+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
80+
<div class="card-body py-4 text-center">
81+
<h3 class="h5 mt-1">Food Name</h3>
82+
</div></a></div>
83+
<div class="col-md-4 col-sm-6 mb-grid-gutter"><a class="card border-0 shadow" href="food-delivery-category.html"><img class="card-img-top" src="assests/menu.jpg" alt="Food Name">
84+
<div class="card-body py-4 text-center">
85+
<h3 class="h5 mt-1">Food Name</h3>
86+
</div></a></div>
87+
</div>
88+
</div>
89+
<div class="divider"></div>
90+
<div class="app" id="app">
91+
<div class="left">
92+
<h2>Presenting Our New <br> Tomato App</h2>
93+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum vel pariatur, dolores beatae facere libero molestiae quidem fuga veniam tenetur.</p>
94+
<img src="assests/store.png" alt="download" class="downloadImg">
95+
</div>
96+
<img src="assests/app.png" alt="app" class="appImg">
97+
</div>
98+
<div class="subscribe" id="subscribe">
99+
<h2>Subscribe To <span class="text-danger">Our </span>Newsletter</h2>
100+
<div class="form">
101+
<div class="input-group mb-3 newsletterForm">
102+
<input type="text" class="form-control" placeholder="Enter your Email ID here">
103+
<button class="input-group-text btn btn-danger">Subscribe</button>
104+
</div>
105+
</div>
106+
</div>
107+
<div class="divider"></div>
108+
<div class="footer">
109+
<footer>
110+
© 2022 Tomato Foods
111+
</footer>
112+
</div>
113+
<script src="js/nav.js"></script>
114+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
115+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
116+
</body>
117+
</html>

‎js/nav.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
window.addEventListener("scroll", function(){
2+
var navbar = this.document.querySelector("nav")
3+
navbar.classList.toggle("navsticky", window.scrollY > 0)
4+
})

0 commit comments

Comments
 (0)