Skip to content

Commit f2b9b10

Browse files
jugeshraghavjugeshraghav
committed
food website added.
1 parent 65692fb commit f2b9b10

File tree

11 files changed

+315
-1
lines changed

11 files changed

+315
-1
lines changed

‎Food-Website/bg1.jpg

502 KB
Loading

‎Food-Website/debug.log

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[1222/105508.848:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
2+
[1222/163049.078:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
3+
[1222/163049.078:ERROR:exception_snapshot_win.cc(99)] thread ID 17444 not found in process
4+
[1222/163049.078:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
5+
[1222/163049.078:ERROR:exception_snapshot_win.cc(99)] thread ID 17440 not found in process
6+
[1222/163049.078:ERROR:scoped_process_suspend.cc(40)] NtResumeProcess: An attempt was made to access an exiting process. (0xc000010a)

‎Food-Website/images/main.png

1.77 MB
Loading

‎Food-Website/images/mobiles1.png

197 KB
Loading

‎Food-Website/images/mobiles2.png

95.4 KB
Loading

‎Food-Website/index.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
10+
</head>
11+
12+
<body>
13+
<div class="hero">
14+
<div class="nav-bar">
15+
<div class="nav-logo">
16+
<img src="logo.jpg" height="60" width="60">
17+
</div>
18+
<div class="nav-links" id="nav-links">
19+
<i class="fa fa-close" onclick="closeMenu()" ></i>
20+
<ul>
21+
<a href="">
22+
<li>HOME </li>
23+
</a>
24+
<a href="">
25+
<li> ABOUT</li>
26+
</a>
27+
<a href="">
28+
<li>RECIPE </li>
29+
</a>
30+
</ul>
31+
<button type="button" class="btn">SIGN UP</button>
32+
</div>
33+
<i class="fa fa-bars" onclick="showMenu()" ></i>
34+
</div>
35+
<div class="banner-title">
36+
<h1>Food<span> doesn't have<br> a religion.</span> It is a religion.</h1>
37+
<button type="button" class="btn">EXPLORE</button>
38+
</div>
39+
<div class="vertical-bar">
40+
<div class="search-icon">
41+
<i class="fa fa-th-list" ></i>
42+
<i class="fa fa-search" ></i>
43+
</div>
44+
<div class="social-icon">
45+
<i class="fa fa-facebook" ></i>
46+
<i class="fa fa-instagram" ></i>
47+
<i class="fa fa-twitter" ></i>
48+
<i class="fa fa-pinterest" ></i>
49+
</div>
50+
</div>
51+
<div class="notifications">
52+
<div class="contents">
53+
<small>Subscribe easy youtube channel and never miss any updates.
54+
</small>
55+
<p><a href="">PREV</a><a href="">NEXT</a></p>
56+
</div>
57+
<div class="notifications-img">
58+
<img src="notification-image.jpg" >
59+
</div>
60+
</div>
61+
</div>
62+
<script>
63+
var show = document.getElementById("nav-links");
64+
function showMenu(){
65+
show.style.right="0";
66+
}
67+
function closeMenu(){
68+
show.style.right="-200px";
69+
}
70+
</script>
71+
</body>
72+
73+
</html>

‎Food-Website/logo.jpg

27 KB
Loading

‎Food-Website/notification-image.jpg

521 KB
Loading

‎Food-Website/readme.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Welcome 🖐 to the Food Website Website Template.
2+
It is a simple and resonsive Food Website Website, you can navigate through them.
3+
4+
## Desktop View
5+
![Default View](images/main.png)
6+
7+
## Mobile view
8+
![Mobile View](images/mobiles1.png)
9+
![Mobile View](images/mobiles2.png)
10+
11+
12+
## 💻Tech Stack
13+
<br>
14+
15+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
16+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
17+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
18+
19+
<br>
20+
21+
### How to use:
22+
23+
---
24+
25+
- Download or clone the repository
26+
27+
```
28+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
29+
```
30+
31+
- Go to the directory
32+
- Run the index.html file
33+
- Navigate the website in different modes(desktop or mobile)
34+
35+
<br>
36+
37+
## Happy Coding!

‎Food-Website/style.css

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
font-family:sans-serif;
5+
}
6+
.hero{
7+
height:100vh;
8+
background-image:linear-gradient(rgb(0,0,0,0.8),rgb(0,0,0,0.8)),
9+
url("bg1.jpg");
10+
background-position:center;
11+
background-size:cover;
12+
overflow-x:hidden;
13+
position:relative;
14+
}
15+
.nav-bar{
16+
display:flex;
17+
padding:40px 120px;
18+
justify-content:center;
19+
align-items:center;
20+
}
21+
.nav-logo img{
22+
border-radius:30px;
23+
24+
}
25+
.nav-links{
26+
flex:1;
27+
}
28+
.nav-links ul{
29+
margin-left:50px;
30+
display:inline;
31+
}
32+
.nav-links ul li{
33+
list-style:none;
34+
display:inline-block;
35+
padding:8px 25px;
36+
}
37+
.nav-links ul a{
38+
color:white;
39+
text-decoration:none;
40+
font-size:13px;
41+
}
42+
.nav-links ul li::after{
43+
content:"";
44+
width:0;
45+
height:2px;
46+
background:yellow;
47+
display:block;
48+
margin:auto;
49+
transition:.5s;
50+
}
51+
.nav-links ul li:hover::after{
52+
width:100%
53+
}
54+
.btn{
55+
padding: 10px 20px;
56+
border:0;
57+
background:yellow;
58+
font-weight:bold;
59+
cursor:pointer;
60+
61+
}
62+
.nav-links .btn{
63+
float:right;
64+
}
65+
.banner-title{
66+
margin:120px;
67+
color:#fff;
68+
}
69+
.banner-title h1{
70+
font-size:64px;
71+
margin-bottom:30px;
72+
}
73+
.banner-title h1 span{
74+
color:yellow;
75+
}
76+
.vertical-bar{
77+
height:100%;
78+
background:#000;
79+
top:0;
80+
left:0;
81+
position:absolute;
82+
83+
}
84+
.search-icon{
85+
height:60%;
86+
width:70px;
87+
}
88+
.search-icon .fa{
89+
font-size:25px;
90+
color:white;
91+
display:block;
92+
cursor:pointer;
93+
margin:45px 23px;
94+
}
95+
.social-icon {
96+
height:35%;
97+
width:70px;
98+
background:yellow;
99+
100+
text-align:center;
101+
padding-top:27%;
102+
bottom:0;
103+
position:absolute;
104+
}
105+
.social-icon .fa{
106+
margin:15px 23px;
107+
display:block;
108+
padding:8px;
109+
}
110+
.notifications{
111+
display:flex;
112+
width:400px;
113+
114+
right:0;
115+
bottom:0;
116+
position:absolute;
117+
background:yellow;
118+
align-items:center;
119+
}
120+
.contents{
121+
flex-basis:50%;
122+
padding:10px;
123+
}
124+
125+
.notifications-img{
126+
flex-basis:50%;
127+
}
128+
.notifications-img img{
129+
130+
width:100%;
131+
}
132+
.contents a{
133+
text-decoration:none;
134+
color:#000;
135+
font-size:13px;
136+
margin:0 10px;
137+
}
138+
.contents p{
139+
text-align:right;
140+
margin-top:10px;
141+
}
142+
143+
.nav-bar .fa{
144+
display:none;
145+
}
146+
147+
@media (max-width:700px){
148+
.vertical-bar{
149+
display:none;
150+
}
151+
.banner-title{
152+
font-size:50px;
153+
}
154+
.notifications{
155+
width:100%;
156+
}
157+
.nav-bar{
158+
padding:10px 30px;
159+
}
160+
.fa-bars{
161+
position:absolute;
162+
right:20px;
163+
top:10px;
164+
}
165+
.nav-bar .fa{
166+
display:block;
167+
color:white;
168+
margin:10px 25px;
169+
font-size:22px;
170+
cursor:pointer;
171+
}
172+
.nav-links{
173+
height:100vh;
174+
width:200px;
175+
background:#000;
176+
top:0;
177+
right:-200px;
178+
position:absolute;
179+
text-align:left;
180+
z-index:2;
181+
transition:0.5s;
182+
}
183+
.nav-links ul a{
184+
display:block;
185+
}
186+
.nav-links .btn{
187+
float:none;
188+
margin-left:25px;
189+
margin-left:10px;
190+
}
191+
.banner-title h1{
192+
font-size:30px;
193+
margin:0;
194+
padding:0;
195+
}
196+
197+
}

0 commit comments

Comments
 (0)