-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (161 loc) · 6.82 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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Nippy</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6a3c4b31cb.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-0 m-0 border-0 bd-example">
<!-- Example Code -->
<section class="header ">
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg pt-2 ">
<div class="container-fluid ">
<a class="navbar-brand ps-5 " href="#">Nippy</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item pe-5">
<a class="ancher-size nav-link active " aria-current="page" href="#">ABOUT US</a>
</li>
<li class="nav-item pe-5">
<a class="ancher-size nav-link" href="#">SHOP</a>
</li>
<li class="nav-item pe-5">
<a class="ancher-size nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item pe-5">
<a class="ancher-size nav-link" href="#">BLOG</a>
</li>
<li class="nav-item pe-5">
<a class="ancher-size nav-link" href="#">ELEMENTS</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row-12 title-center">
<h1>God is in the details</h1>
<p>Vero nisi doloremque, at accusantium iure, error architecto dolor aperiam aspernatur modi corrupti minus in obcaecati qui.</p>
<button class="btn btn-primary btn-lg " type="button ">LEARN MORE</button>
</div>
</div>
</section>
<section class="features">
<div class="row">
<div class="features-card col-6">
<h1>About Us</h1>
<h5>Delectus voluptatum tenetur vero eum quos ad dignissimos ipsa praesentium.</h5>
<p>Est perspiciatis cupiditate distinctio officiis officia beatae vero assumenda voluptatum. Omnis nulla quos cumque id, necessitatibus sed in exercitationem adipisci, harum velit nam nihil eaque eveniet veniam eos quo, minima qui, rem aspernatur. Vero nisi doloremque, at accusantium iure, dignissimos error architecto dolor.</p>
</div>
<div class="features-card2 col-4 ">
<img class="hand-10 position-absolute" src="images/rectangle-10.png" alt="hands">
<img class="hand-1 z-2 position-absolute " src="images/rectangle-1.png " alt="hands">
</div>
</div>
</div>
</section>
<section class="products">
<div class=" row">
<div class="products-fonts col-6 pb-4">
<h1>Our Products</h1>
</div>
<div class="products-fonts col-6 pe-5">
<h3 class="text-end" >VIEW MORE <i class="fa-solid fa-arrow-right fs-5"></i> </h3>
</div>
</div>
<div class="row">
<div class="col-6">
<img class="image-3" src="images/image-2.webp" alt="items">
</div>
<div class="flex-wrap col-6 ">
<img class="images-size4 p-3" src="images/image-3.webp" alt="">
<img class="images-size4 p-3" src="images/images-4.webp" alt="">
<img class="images-size4 p-3" src="images/images-5.webp" alt="">
<img class="images-size4 p-3" src="images/images-6.webp" alt="">
</div>
</div>
</section>
<section class="amount">
<div class=" row">
<div class="amount-fonts col-4">
<h1>Projects Completed</h1>
<h2>285</h2>
</div>
<div class="amount-fonts col-4">
<h1>Happy Customers</h1>
<h2>200</h2>
</div>
<div class="amount-fonts col-4">
<h1>Award Winning</h1>
<h2>40</h2>
</div>
</div>
</section>
<section class="s-3">
<div class="row">
<div class="col-6">
<img class="big-image" src="images/image-7.webp" alt="something">
</div>
<div class="s-3-fonts col-6 ">
<h1>Stay in touch</h1>
<h5>Subscribe for our monthly roundup of great free resources and updates.</h5>
<p>
Excepturi fugiat a neque perspiciatis dicta, repudiandae dolorum. Corporis, accusantium, at! Numquam ad praesentium blanditiis, recusandae aliquam perferendis molestiae eaque
</p>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
</div>
</div>
</section>
<section class="s-4">
<div class="row">
<div class="col">
<img class="bbc-center" src="images/group-35.png" alt="grpou of simpols">
</div>
</div>
</section>
<footer class="footer">
<div class="footer-row row">
<div class="col-3">
<img class="footer-image" src="images/group.png" alt="logo">
</div>
<div class="col-3">
<h4>Mese Selimovica, 52
78000, Banja Luka
BiH</h4>
</div>
<div class="col-3">
<h4>+387 065 252 552
email@example.com</h4>
</div>
<div class="icons-position col-3">
<i class="icon-size fa-brands fa-facebook-f"></i>
<i class="icon-size fa-brands fa-twitter"></i>
<i class="icon-size fa-brands fa-dribbble"></i>
<i class="icon-size fa-brands fa-instagram"></i>
<i class="icon-size fa-brands fa-linkedin"></i>
</div>
</div>
<div class="row">
<div class="last-footer col-12">
<h5>2016 © Nippy Studio. All rights reserved</h5>
</div>
</div>
</footer>
<!-- End Example Code -->
</body>
</html>