Skip to content

Commit 9a0d3e9

Browse files
coder024coder024
committed
Here is my first website!!
0 parents  commit 9a0d3e9

File tree

1 file changed

+225
-0
lines changed

1 file changed

+225
-0
lines changed

‎index.html‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Khushboo's blog</title>
9+
10+
</head>
11+
<link href="https://fonts.googleapis.com/css2?family=Gluten:wght@600&display=swap" rel="stylesheet">
12+
<link rel="Stylesheet" href="css/Style.css">
13+
<style>
14+
/* css reset */
15+
body {
16+
color: mintcream;
17+
font-family: 'Gluten', cursive;
18+
margin: 0px;
19+
padding: 0px;
20+
background: url('https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_960_720.jpg');
21+
background-size:cover ;
22+
background-attachment: fixed;
23+
24+
25+
}
26+
27+
.left {
28+
display: inline-block;
29+
/* border: 4px solid rgb(32, 190, 93); */
30+
position: absolute;
31+
left: 50px;
32+
top: 20px;
33+
34+
35+
}
36+
37+
.left img {
38+
display: block;
39+
width: 55px;
40+
}
41+
42+
.left div {
43+
text-align: center;
44+
line-height: 14px;
45+
font-size: 20px;
46+
margin: 2px;
47+
}
48+
49+
.middle {
50+
display: block;
51+
width: 44%;
52+
margin: 20px auto;
53+
/* border: 2px solid rgb(173, 11, 173); */
54+
55+
56+
}
57+
58+
.right {
59+
position: absolute;
60+
right: 34px;
61+
top: 30px;
62+
display: inline-block;
63+
/* border: 2px solid rgb(19, 216, 206); */
64+
65+
}
66+
67+
.navbar {
68+
display: inline-block;
69+
}
70+
71+
.navbar li {
72+
display: inline-block;
73+
color: white;
74+
font-size: 20px;
75+
76+
}
77+
78+
.navbar li a {
79+
text-decoration: none;
80+
color: white;
81+
padding: 34px 4px;
82+
}
83+
84+
.navbar li a:hover,
85+
.navbar li a:active {
86+
87+
text-decoration: underline;
88+
color: rgb(216, 128, 27);
89+
90+
}
91+
92+
.btn {
93+
font-family: 'Gluten', cursive;
94+
margin: 0px 9px;
95+
background-color: rgb(66, 22, 223);
96+
color: white;
97+
padding: 3px 4px;
98+
border: solid tomato;
99+
border-radius: 10px;
100+
font-size: 20px;
101+
cursor: pointer;
102+
}
103+
104+
.btn:hover {
105+
background-color: violet;
106+
}
107+
108+
.container {
109+
border: 2px solid whitesmoke;
110+
margin: 80px 80px;
111+
width:33%;
112+
padding: 25px;
113+
border-radius: 25px;
114+
padding-top: 10px;
115+
padding-bottom: 10px;
116+
}
117+
.form-group input{
118+
font-family: 'Gluten', cursive;
119+
font-size: 15px;
120+
margin: 12px auto ;
121+
text-align:center;
122+
display: block;
123+
width: 400px;
124+
padding: 6px;
125+
border: 2px solid grey;
126+
border-radius: 15px;
127+
128+
129+
}
130+
.container h1{
131+
text-align: center;
132+
}
133+
.container button{
134+
display:block ;
135+
text-align: center;
136+
width: 23%;
137+
margin: auto;
138+
}
139+
.container1{
140+
141+
background-color: rgb(197, 193, 195);
142+
border: 3px solid rgb(146, 243, 146);
143+
padding: 79px;
144+
margin: 34px;
145+
border-radius: 23px;
146+
box-sizing: border-box;
147+
background-image: url(https://source.unsplash.com/user/erondu/1600x900);
148+
149+
150+
}
151+
</style>
152+
153+
<body>
154+
<header class="header">
155+
<!-- left box for logo -->
156+
<div class="left">
157+
<img src="https://cdn.pixabay.com/photo/2016/12/05/03/56/travel-1883060_960_720.png" alt="">
158+
<div>
159+
Finding the universe
160+
</div>
161+
162+
163+
164+
</div>
165+
<!-- mid box for nav bar -->
166+
<div class="middle">
167+
<ul class="navbar">
168+
<li><a href="#" class="active">Home</a></li>
169+
<li><a href="#">About Us</a></li>
170+
<li><a href="#">Explore the world</a></li>
171+
<li><a href="#">Contact Us</a></li>
172+
</ul>
173+
174+
175+
</div>
176+
<!-- right box for buttons -->
177+
<div class="right">
178+
<button class="btn">
179+
180+
Search
181+
</button>
182+
<button class="btn">
183+
Login
184+
</button>
185+
186+
187+
</div>
188+
189+
190+
</header>
191+
<div class="container">
192+
193+
<h1>Find the adventure of a lifetime!</h1>
194+
<form action="noaction.php">
195+
<div class="form-group">
196+
<input type="text" name="" placeholder="Enter your Name">
197+
198+
</div>
199+
200+
<div class="form-group">
201+
<input type="text" name="" placeholder="Enter your Destination">
202+
203+
</div>
204+
205+
<div class="form-group">
206+
<input type="number" name="" placeholder="Enter your contact No.">
207+
208+
</div>
209+
210+
<div class="form-group">
211+
<input type="text" name="" placeholder="Enter your Gender">
212+
213+
</div>
214+
<button class="btn">Submit</button>
215+
216+
</form>
217+
</div>
218+
<div class="container1">
219+
<h1>Welcome to my website!</h3>
220+
<p id="first"> “Life is either a daring adventure or nothing at all”
221+
</p>
222+
</div>
223+
</body>
224+
225+
</html>

0 commit comments

Comments
 (0)