Skip to content

Commit 1c41c98

Browse files
CS4UsamaCS4Usama
committed
HTML and CSS - Food Website's different Webpages (Creative Home, Login, Menu Pages)
0 parents  commit 1c41c98

32 files changed

+670
-0
lines changed

‎SignUp/SignUp-style.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
body
2+
{
3+
margin: 0;
4+
padding: 0;
5+
background: url(../resources/SignUp-image.jpg) no-repeat;
6+
/* background-size: cover; */
7+
background-position: center;
8+
height: 100vh;
9+
font-family: 'Pacifico', cursive;
10+
}
11+
12+
button
13+
{
14+
margin: 10px 0 0 20px;
15+
background-color: #fb2525;
16+
border-radius: 10px;
17+
border: none;
18+
outline: none;
19+
height: 40px;
20+
width: 80px;
21+
font-family: Impact;
22+
font-size: 22px;
23+
text-decoration: none;
24+
color: white;
25+
}
26+
27+
button:hover
28+
{
29+
background: darkred;
30+
color: palegoldenrod;
31+
text-transform: uppercase;
32+
cursor: pointer;
33+
}
34+
35+
.reg
36+
{
37+
border-radius: 15px 15px 0 0;
38+
width: 900px;
39+
margin: -108px 0 0 225px;
40+
background: rgba(0, 0, 0, 0.7);
41+
padding: 10px 0 11px 0;
42+
font-family: 'Pacifico', cursive;
43+
font-size: 22px;
44+
font-weight: bold;
45+
text-align: center;
46+
color: white;
47+
}
48+
49+
#form
50+
{
51+
top: 61%; left: 50%;
52+
position: absolute;
53+
transform: translate(-50%,-50%);
54+
box-sizing: border-box;
55+
border-color: black;
56+
margin: 0;
57+
padding: 20px 20px 0 20px;
58+
height: 560px;
59+
width: 900px;
60+
background: rgba(0, 0, 0, 0.5);
61+
color: white;
62+
font-family: sans-serif;
63+
font-size: 22px;
64+
font-weight: bold;
65+
}
66+
67+
#form input
68+
{
69+
margin-bottom: 30px;
70+
border: none;
71+
outline: none;
72+
border-bottom: 1px solid white;
73+
width: 25%;
74+
height: 20px;
75+
background: transparent;
76+
color: white;
77+
font-size: 16px;
78+
position: relative;
79+
}
80+
81+
.f_name input[type="text"]
82+
{
83+
left: 10px;
84+
}
85+
86+
.mail input[type="email"]
87+
{
88+
left: 58px;
89+
}
90+
.name input[type="text"]
91+
{
92+
left: 18px;
93+
}
94+
95+
.l_name
96+
{
97+
padding-left: 63px;
98+
}
99+
100+
.dob
101+
{
102+
padding-left: 111px;
103+
}
104+
105+
.pas
106+
{
107+
padding-left: 70px;
108+
}
109+
110+
.l_name input[type="text"]
111+
{
112+
left: 29px;
113+
}
114+
.dob input[type="date"]
115+
{
116+
left: 10px;
117+
}
118+
119+
.pas input[type="password"]
120+
{
121+
left: 37px;
122+
}
123+

‎SignUp/sign_up.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Sign Up</title>
7+
<link rel="stylesheet" href="SignUp-style.css" type="text/css">
8+
<link rel="icon" href="../resources/logo.png" type="image/png">
9+
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico"> -->
10+
</head>
11+
<body>
12+
<!--Link to go back Home Page-->
13+
<span>
14+
<a href="../index.html"> <img src="../resources/logo.png" alt="Home" title="Home"> </a> </span>
15+
16+
<p class="reg">Sign Up Here</p>
17+
18+
<!--Sign Up Form-->
19+
<form id="form">
20+
<span class="f_name">
21+
First Name: <input type="text" name="First Name" size="20" maxlength="25" placeholder="Enter Your First Name" required>
22+
</span>
23+
<span class="l_name">
24+
Last Name: <input type="text" name="Last Name" size="20" maxlength="25" placeholder="Enter Your Last Name">
25+
</span>
26+
<br>
27+
<span class="mail">
28+
E-Mail: <input type="email" name="E-Mail" size="20" maxlength="50" placeholder="Enter Your E-Mail" required>
29+
</span>
30+
<span class="dob">
31+
Date of Birth: <input type="date" name="Date" required>
32+
</span>
33+
<div>
34+
<span class="name">
35+
Username: <input type="text" name="Username" size="20" maxlength="50" placeholder="Enter Your Username" required>
36+
</span>
37+
<span class="pas">
38+
Password: <input type="password" name="Password" size="20" maxlength="20" placeholder="Enter Your Password" required>
39+
</span>
40+
<br>
41+
<span>
42+
Select Your City:
43+
<select name="City">
44+
<option value="Gojra">Gojra</option>
45+
<option value="Faisalabad">Faisalabad</option>
46+
<option value="Toba Tek Singh">Toba Tek Singh</option>
47+
<option value="Lahore">Lahore</option>
48+
<option value="Karachi">Karachi</option>
49+
<option value="Islamabad">Islamabad</option>
50+
<option value="Peshawar">Peshawar</option>
51+
<option value="Multan">Multan</option>
52+
<option value="Quetta">Quetta</option>
53+
</select>
54+
</span>
55+
<span class="gender">
56+
Gender: <input type="radio" name="Gender" id="Male" value="Male">
57+
<!-- <label for="Male">Male</label> -->
58+
<input type="radio" name="Gender" id="Female" value="Female" required>
59+
<!-- <label for="Female">Female</label> -->
60+
</span>
61+
<div>
62+
<textarea name="Hobby" cols="25" rows="4">Enter Your Hobbies</textarea>
63+
</div>
64+
<div>
65+
Select Your Favorite Food: <br>
66+
<input type="checkbox" name="Favorite Food" id="Pizza" value="Pizza">
67+
<label for="Pizza">Pizza</label>
68+
<input type="checkbox" name="Favorite Food" id="Burger" value="Burger">
69+
<label for="Burger">Burger</label>
70+
<input type="checkbox" name="Favorite Food" id="Biryani" value="Biryani">
71+
<label for="Biryani">Biryani</label>
72+
</div>
73+
<div>
74+
75+
</div>
76+
<div>
77+
Upload Your Picture: <input type="file" name="Image" accept="image/*">
78+
</div>
79+
<input type="submit" value="Sign Up">
80+
</form>
81+
</body>
82+
</html>

‎index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>FooD</title>
7+
<link rel="icon" href="resources/logo.png" type="image/png">
8+
<link rel="stylesheet" href="style.css" type="text/css">
9+
</head>
10+
<body>
11+
<nav>
12+
<ul>
13+
<img class="logo" src="resources/logo.png" alt="Logo" title="Logo">
14+
<li> <a href="">Home</a> </li>
15+
<li> <a href="./menu/menu.html">Menu</a> </li>
16+
<li> <a href="">Store</a> </li>
17+
<li> <a href="">Cart</a> </li>
18+
<li> <a href="./login/login.html">Sign in / Sign Up</a> </li>
19+
</ul>
20+
</nav>
21+
22+
<div class="head1">
23+
<h1>Fast Food Items</h1>
24+
<ul>
25+
<li> <img src="resources/fast_foods/biryani.webp" alt="Biryani"> <br>Biryani</li>
26+
<li> <img src="resources/fast_foods/burger.png" alt="Burger"> <br>Burger</li>
27+
<li> <img src="resources/fast_foods/shawarma.png" alt="Sharwama"> <br>Sharwama</li>
28+
<li> <img src="resources/fast_foods/pizza.png" alt="Pizza"> <br>Pizza</li>
29+
<li> <img src="resources/fast_foods/pasta.png" alt="Pasta"> <br>Pasta</li>
30+
<li> <img src="resources/fast_foods/fries.png" alt="Fries"> <br>Fries</li>
31+
<li> <img src="resources/fast_foods/chicken.jpg" alt="Chicken"> <br>Chicken</li>
32+
<li> <img src="resources/fast_foods/mutton.jpg" alt="Mutton"> <br>Mutton</li>
33+
<li> <img src="resources/fast_foods/beef_karahi.jpg" alt="Beef"> <br>Beef</li>
34+
<li> <img src="resources/fast_foods/malai_boti.jpg" alt="Malai Boti"> <br>Malai Boti</li>
35+
<li> <img src="resources/fast_foods/qeema.jpg" alt="Qeema"> <br>Qeema</li>
36+
<li> <img src="resources/fast_foods/soop.webp" alt="Soop"> <br>Soop</li>
37+
</ul>
38+
</div>
39+
40+
<div class="head2">
41+
<h1>Sweet Dishes</h1>
42+
<ul>
43+
<li> <img src="resources/sweets/cake.png" alt="Cake"> <br>Cake</li>
44+
<li> <img src="resources/sweets/pancake.png" alt="Pancake"> <br>Pancake</li>
45+
<li> <img src="resources/sweets/shakes.jpg" alt="Shakes"> <br>Shakes</li>
46+
<li> <img src="resources/sweets/ice_cream.png" alt="Ice Cream"> <br>Ice Cream</li>
47+
<li> <img src="resources/sweets/gajar_halwa.jpg" alt="Gajar Halwa"> <br>Gajar Halwa</li>
48+
<li> <img src="resources/sweets/ras_malai.jpg" alt="Ras Malai"> <br>Ras Malai</li>
49+
</ul>
50+
</div>
51+
</body>
52+
</html>

‎login/login-style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
body
2+
{
3+
margin: 0;
4+
padding: 0;
5+
background: url(../resources/login-image.jpg) no-repeat;
6+
background-size: cover;
7+
background-position: center;
8+
height: 100vh;
9+
font-family: 'Pacifico', cursive;
10+
}
11+
12+
button
13+
{
14+
margin: 10px 0 0 20px;
15+
background-color: #fb2525;
16+
border-radius: 10px;
17+
border: none;
18+
outline: none;
19+
height: 40px;
20+
width: 80px;
21+
font-family: Impact;
22+
font-size: 22px;
23+
text-decoration: none;
24+
color: white;
25+
}
26+
27+
button:hover
28+
{
29+
background: darkred;
30+
color: palegoldenrod;
31+
text-transform: uppercase;
32+
cursor: pointer;
33+
}
34+
35+
#form
36+
{
37+
top: 50%; left: 50%;
38+
position: absolute;
39+
transform: translate(-50%,-50%);
40+
box-sizing: border-box;
41+
border-color: black;
42+
margin: 0;
43+
padding-top: 25px;
44+
height: 430px;
45+
width: 320px;
46+
background: rgba(0, 0, 0, 0.5);
47+
color: white;
48+
font-size: 22px;
49+
font-weight: bold;
50+
}
51+
52+
#form legend
53+
{
54+
padding-bottom: 8px;
55+
}
56+
57+
#form input[type="text"], input[type="password"]
58+
{
59+
margin-bottom: 20px;
60+
border: none;
61+
outline: none;
62+
border-bottom: 1px solid white;
63+
width: 100%;
64+
height: 40px;
65+
background: transparent;
66+
color: white;
67+
font-size: 16px;
68+
}
69+
70+
#form input[type="submit"]
71+
{
72+
margin-bottom: 25px;
73+
border: none;
74+
outline: none;
75+
border-radius: 20px;
76+
height: 40px;
77+
width: 100%;
78+
background: #fb2525;
79+
color: white;
80+
font-family: 'Pacifico', cursive;
81+
font-size: 18px;
82+
font-weight: bold;
83+
}
84+
85+
#form input[type="submit"]:hover
86+
{
87+
background: red;
88+
color: #000;
89+
cursor: pointer;
90+
}
91+
.link
92+
{
93+
line-height: 10px;
94+
font-size: 14px;
95+
color: darkgrey;
96+
text-decoration: none;
97+
}
98+
99+
.link:hover
100+
{
101+
color: #ffc107;
102+
}

0 commit comments

Comments
 (0)