Pizza-Hut-Landing-Page/index.html at master · priyanshpsalian/Pizza-Hut-Landing-Page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
	<title> Landing page design using html and css </title>
<style type="text/css">
		*{padding: 0; margin:0; box-sizing: border-box; font-family: sans-serif;
		}
		header{
			width: 100%;
			height: 100vh;
			background: url(images/pizza2.png);
			background-size: 50% 90%;
			background-repeat: no-repeat;
			background-position: bottom right;
			position: relative;
		}
		nav{
			width: 100%;
			height: 70px;
			padding: 0px 70px;
			background: white;
			color: black;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 2px 0px 5px grey;
		}
		.logo{
			font-weight: bold;
			font-size: 2em;
			letter-spacing: 2px;
		}
		.logo span{
			color: brown;
		}
		.menu a{
			text-decoration: none;
			color: black;
			padding: 10px 20px;
		}
		.menu a:last-child{
			background: brown;
			color: white;
			border-radius: 8px;
		}

		.h-text{
			position: absolute;
			top:30%;
			left: 5%;
			padding: 15px;

		}
		.h-text p{
			color: #262626;
			letter-spacing: 3px;
			font-weight: bold;
		}
		.h-text h1{
			font-size: 4em;
			line-height: 1.5em;
		}
		.h-text h1 span{
				color: brown;
		}
		.h-text h2{
			font-size: 4em;
			margin-bottom: 0.5em;
		}
		#order{
			text-decoration: none;
			color: white;
			background: brown;
			border-radius: 8px;
			padding: 10px 20px;
		}
		#dis{
			text-decoration: none;
			color: white;
			background: #262626;
			padding: 10px 20px;
			border-radius: 8px;
		}
		#pizza{
			position: absolute;
			bottom: 15%;
			left: 5%;
		}
		#pizza img{
			transition: 0.4s ease;
		}
		#pizza img:hover{
			transform: translateY(-20px);
		}
</style>
</head>
<body>
<header>
	<nav>
		<div class="logo"><span>Pi</span>zzahut</div>
		<div class="menu">
				<a href="#">Home</a>
			<a href="#">Foods</a>
			<a href="#">Offer's</a>
			<a href="#">Your Order</a>
			<a href="#">Delivery</a>
			<a href="#">Cart</a>
		</div>
	</nav>
	<div class="h-text">
			<p>Free Home Delivery</p>
		<h1>Quality F<span>oo</span>ds </h1>
		<h2>Pizza of the Week</h2>
		<a href="#" id="order">Order now!!</a>
		<a href="#" id="dis">25% Off Hurry!!</a>
	</div>
	<div id="pizza">
		<img src="images/pizza3.png" width="100">
		<img src="images/pizza3.png" width="100">
		<img src="images/pizza3.png" width="100">
	</div>
</header>
</body>
</html>