-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
94 lines (90 loc) · 3.5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>detergent website</title>
<style>
.navbar{
background-color: rgb(19, 65, 49);
}
#nav-ul
{
display:inline-flex;
margin-left: 40%;
}
.li-items
{
margin-left: 2rem;
color: aliceblue;
}
.links{
color: aliceblue;
font-size: 1.1rem;
}
.title{
color: aliceblue;
background-color:rgb(19, 65, 49); ;
font-size: 2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: auto;
}
.images{
height: 200px;
width: 200px;
border-radius: 5%;
margin-left: 4%;
}
.images:hover{
height: 220px;
width: 220px;
border-radius: 15%;
}
.products
{
background-color: rgb(19, 65, 49);
}
.image-div
{
width: 100%;
}
</style>
</head>
<body>
<h1 class="title">Junior Detergents</h1>
<nav class="navbar">
<ul id="nav-ul">
<li class="li-items"><a class="links" href="/">services</a></li>
<li class="li-items"><a class="links" href="/">resources</a></li>
<li class="li-items"><a class="links" href="/">offers</a></li>
<li class="li-items"> <div>
<input type="text" id="txtSearch" placeholder="Search anything">
<button>Search</button>
</div> </li>
</ul>
</nav>
<hr>
<p> iste excepturi in deserunt delectus unde sint, sapiente voluptas, pariatur. Iste iure ipsam maxime a eius sint architecto odit quia perspiciatis totam natus nostrum eos officia, repellat , earum nesciunt ex nam asperiores doloremque et distinctio voluptatibus mollitia explicabo repudiandae quas ipsam vero eveniet? At voluptates ex doloribus. Enim eum assumenda maxime. Voluptatum reprehenderit repudiandae modi recusandae, praesentium sint consectetur animi qui illum nostrum magnam autem maiores earum enim corrupti! Minima aliquam saepe dignissimos ipsa ratione deleniti laborum deserunt rem incidunt illo, labore at hic temporibus asperiores eligendi tempora minus possimus fugiat. Neque aspernatur, obcaecati nulla animi voluptas tenetur quam officiis. Illo aperiam rem maiores animi, nesciunt sed, ullam quas voluptate quidem itaque consequuntur quam iure excepturi minus, esse porro deserunt unde placeat esse porro asperiores.</p>
<hr>
<div class="products">
<h2 class="title">products</h2>
<hr>
<div class="image-div">
<img class="images" src="img1.jpg" alt="">
<img class="images" src="img2.jpg" alt="">
<img class="images" src="img5.jpg" alt="">
<img class="images" src="img1.jpg" alt="">
</div>
<div class="image-div">
<img class="images" src="img5.jpg" alt="">
<img class="images" src="img1.jpg" alt="">
<img class="images" src="img1.jpg" alt="">
<img class="images" src="img5.jpg" alt="">
</div>
</div>
<div>
<br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>