Skip to content

Commit c854449

Browse files
sushanntvsushanntv
authored
Add files via upload
1 parent 399a697 commit c854449

File tree

2 files changed

+313
-0
lines changed

2 files changed

+313
-0
lines changed

‎Food Site/css/phone.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* Navigation */
2+
#navbar {
3+
flex-direction: column;
4+
}
5+
6+
#navbar ul li a{
7+
font-size: 1rem;
8+
padding: 0px 7px;
9+
padding-bottom: 8px;
10+
}
11+
/* Home section */
12+
#home{
13+
height: 370px;
14+
padding: 3px 28px;
15+
}
16+
17+
#home::before{
18+
height: 480px;
19+
}
20+
21+
#home p{
22+
font-size: 13px;
23+
}
24+
25+
/* Services section */
26+
#services{
27+
flex-direction: column;
28+
}
29+
30+
#services .box {
31+
padding: 14px;
32+
margin: 2px 0px;
33+
margin-bottom: 20px;
34+
}
35+
36+
/* Clients section */
37+
#clients{
38+
flex-wrap: wrap;
39+
}
40+
41+
#clients img{
42+
width: 66px;
43+
padding: 6px;
44+
height: auto;
45+
}
46+
47+
/* Contact us section */
48+
#contact-box form{
49+
width:80%;
50+
}
51+
/* Footer */
52+
53+
/* Utility classes */
54+
.h-primary{
55+
font-size:26px;
56+
}
57+
.btn{
58+
font-size: 13px;
59+
padding: 4px 8px;
60+
}

‎Food Site/css/style.css

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/* CSS Reset */
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
html{
8+
scroll-behavior: smooth;
9+
}
10+
11+
/* CSS Variables */
12+
:root{
13+
--navbar-height: 59px;
14+
}
15+
16+
/* Navigation Bar */
17+
#navbar{
18+
display: flex;
19+
align-items: center;
20+
position: sticky;
21+
top: 0px;
22+
}
23+
24+
#navbar::before{
25+
content: "";
26+
background-color: black;
27+
position: absolute;
28+
top:0px;
29+
left:0px;
30+
height: 100%;
31+
width:100%;
32+
z-index: -1;
33+
opacity: 0.7;
34+
}
35+
36+
/* Navigation Bar: Logo and Image */
37+
#logo{
38+
margin: 7px 34px;
39+
}
40+
41+
#logo img{
42+
height: 59px;
43+
margin: 3px 6px;
44+
border-radius: 29px;
45+
}
46+
47+
48+
/* Navigation Bar: List Styling */
49+
50+
#navbar ul{
51+
display: flex;
52+
font-family: 'Baloo Bhai', cursive;
53+
}
54+
55+
#navbar ul li{
56+
list-style: none;
57+
font-size: 1.3rem;
58+
}
59+
60+
#navbar ul .signup{
61+
display:flex;
62+
list-style: none;
63+
font-size: 1.3rem;
64+
align-items: right;
65+
}
66+
67+
#navbar ul li a{
68+
color: white;
69+
display: block;
70+
padding: 3px 22px;
71+
border-radius: 20px;
72+
text-decoration: none;
73+
}
74+
75+
#navbar ul li a:hover{
76+
color: black;
77+
background-color: white;
78+
}
79+
80+
/* Home Section */
81+
#home{
82+
display: flex;
83+
flex-direction: column;
84+
padding:3px 200px;
85+
height: 550px;
86+
justify-content: center;
87+
align-items: center;
88+
}
89+
90+
#home::before{
91+
content: "";
92+
position: absolute;
93+
background: url('../bg1.jpg') no-repeat center center/cover;
94+
height: 660px;
95+
top:0px;
96+
left:0px;
97+
width: 100%;
98+
z-index: -1;
99+
opacity:0.89;
100+
}
101+
102+
#home h1{
103+
color:white;
104+
text-align: center;
105+
font-family: 'Bree Serif', serif;
106+
}
107+
108+
#home .btn a{
109+
text-decoration:none;
110+
font-family: 'Bree Serif', serif;
111+
color: white;
112+
113+
}
114+
115+
#home p{
116+
color:white;
117+
text-align: center;
118+
font-size: 1.5rem;
119+
font-family: 'Bree Serif', serif;
120+
}
121+
/* Services Section */
122+
#services{
123+
margin: 34px;
124+
display: flex;
125+
}
126+
#services .box{
127+
border: 2px solid brown;
128+
padding: 34px;
129+
margin: 2px 55px;
130+
border-radius: 28px;
131+
background: #f2f2f2;
132+
margin-bottom: 20px;
133+
}
134+
135+
#services .box img{
136+
border-radius: 8px;
137+
height: 160px;
138+
margin: auto;
139+
display: block;
140+
}
141+
142+
#services .box p{
143+
font-family: 'Bree Serif', serif;
144+
145+
}
146+
147+
/* Clients Section */
148+
#client-section{
149+
display:flex;
150+
flex-direction: column;
151+
justify-content: center;
152+
align-items: center;
153+
}
154+
155+
#client-section::before{
156+
content: "";
157+
position: absolute;
158+
background: url('../bg.jpg') no-repeat center center/cover;
159+
width: 100%;
160+
height: 42%;
161+
z-index: -1;
162+
opacity: 0.3;
163+
}
164+
165+
#clients{
166+
display: flex;
167+
justify-content: center;
168+
align-items: center;
169+
}
170+
171+
.client-item{
172+
padding: 34px;
173+
}
174+
175+
#clients img{
176+
border-radius: 8px;
177+
height: 124px;
178+
}
179+
180+
181+
/* Contact Section */
182+
#contact{
183+
184+
position: relative;
185+
}
186+
#contact::before{
187+
content: "";
188+
position: absolute;
189+
width: 100%;
190+
height: 100%;
191+
z-index: -1;
192+
opacity: 0.7;
193+
background: url('../contact.jpg') no-repeat center center/cover;
194+
195+
}
196+
#contact-box{
197+
display: flex;
198+
justify-content: center;
199+
align-items: center;
200+
padding-bottom: 34px;
201+
}
202+
#contact-box input,
203+
#contact-box textarea{
204+
width: 100%;
205+
padding: 0.5rem;
206+
border-radius: 9px;
207+
font-size: 1.1rem;
208+
}
209+
210+
#contact-box form{
211+
width: 40%;
212+
}
213+
214+
#contact-box label{
215+
font-size: 1.3rem;
216+
font-family: 'Bree Serif', serif;
217+
218+
}
219+
220+
221+
footer{
222+
background: black;
223+
color: white;
224+
padding: 9px 20px;
225+
}
226+
227+
/* Utility Classes */
228+
.h-primary{
229+
font-family: 'Bree Serif', serif;
230+
font-size: 3.8rem;
231+
padding: 12px;
232+
}
233+
234+
.h-secondary{
235+
font-family: 'Bree Serif', serif;
236+
font-size: 2.3rem;
237+
padding: 12px;
238+
}
239+
240+
.btn{
241+
padding: 6px 20px;
242+
border: 2px solid white;
243+
background-color: brown;
244+
color: white;
245+
margin: 17px;
246+
font-size: 1.5rem;
247+
border-radius: 10px;
248+
cursor:pointer;
249+
}
250+
251+
.center{
252+
text-align: center;
253+
}

0 commit comments

Comments
 (0)