-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (147 loc) · 6.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FrissonKit Beta 5.0.3</title>
<!--FrissonKit Framework-->
<link rel="stylesheet" href="https://quantumforte.com/FrissonKit-Beta-5.0.3/FrissonKit.min.css">
<!--Add your custom CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Navbar start-->
<nav class="navbar bg-special-7" uk-sticky="offset: 100">
<div class="nav-container">
<div class="nav-logo m-y-auto">FrissonKit</div>
<ul class="nav-items-wrapper mbg-special-7 m-y-auto">
<li class="nav-list-item"><a href="#" class="nav-item-link night">Home</a></li>
<li class="nav-list-item"><a href="#" class="nav-item-link night">Services</a></li>
<li class="nav-list-item"><a href="#" class="nav-item-link night">Blog</a></li>
<li class="nav-list-item"><a href="#" class="nav-item-link night">Contact</a></li>
</ul>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!--Hero section-->
<div id='heroSection' class="section p-b-4">
<div class="container-fluid">
<div class="row col-7-5">
<div class="">
<h1 class="bright m-t-2">Hey this is Shourov <br>And we are learning how to <br><span
class="special-7">Design websites.</span></h1>
<p class="bright p-y-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam repellendus vero maxime
eveniet, laborum voluptate? Culpa sapiente eaque autem! Facilis distinctio nobis nam,
repudiandae magnam fugiat quibusdam sequi eius aperiam.
</p>
<div class="">
<a href="#" class="btn night bg-special-7">Star your project</a>
</div>
</div>
<div class="">
<div class="form-container bg-special-9 w-x-1">
<form id="myForm" class="form">
<label class="form-label bright">First Name</label>
<input type="text">
<label class="form-label bright">Last Name</label>
<input type="text">
<label class="form-label bright">Email</label>
<input type="email">
<label class="form-label bright">Password</label>
<input type="password">
<button class="btn bg-sky-blue-4 bright">Register Now</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Service section-->
<div class="section">
<div class="container-fill">
<h4 class="m purple">Our Services</h4>
<h2 class="m night">Best website designing serverice ever</h2>
<p class="m w-x-3 m-t-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta placeat ex quo quasi incidunt aliquid
quaerat. At ad delectus repellendus distinctio illo fugit dolores, laudantium quaerat, reprehenderit non
magnam ullam?
</p>
<div class="row p-t-2 col-4-4-4">
<div class="l">
<div class="card">
<div class="items-wrapper">
<i class="fab fa-html5 m-t-1"></i>
<h3 class="card-title m-l-1">Html & Css</h3>
</div>
<p class="card-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo quia, aliquam atque laborum
consequuntur ducimus delectus numquam
</p>
<div class="spece"></div>
<a href="#" class="card-btn bg-special-9 night">View now</a>
</div>
</div>
<div class="l">
<div class="card">
<div class="items-wrapper">
<i class="fab fa-html5 m-t-1"></i>
<h3 class="card-title m-l-1">Html & Css</h3>
</div>
<p class="card-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo quia, aliquam atque laborum
consequuntur ducimus delectus numquam
</p>
<div class="spece"></div>
<a href="#" class="card-btn bg-special-9 night">View now</a>
</div>
</div>
<div class="l">
<div class="card">
<div class="items-wrapper">
<i class="fab fa-html5 m-t-1"></i>
<h3 class="card-title m-l-1">Html & Css</h3>
</div>
<p class="card-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo quia, aliquam atque laborum
consequuntur ducimus delectus numquam
</p>
<div class="spece"></div>
<a href="#" class="card-btn bg-special-9 night">View now</a>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container-fluid">
<div class="row col-6-6">
<div class=""></div>
<div class="">
<img class="img-fluid m-hover" src="https://cdn.pixabay.com/photo/2020/07/22/08/17/power-station-5428427_960_720.jpg" alt="">
</div>
</div>
</div>
</div>
<!--Image section-->
<div class="section">
<div class="container-fluid">
<div class="items-wrapper m">
<i class="fab fa-facebook mySocal"></i>
<i class="fab fa-twitter mySocal"></i>
<i class="fab fa-instagram mySocal"></i>
<i class="fab fa-skype mySocal"></i>
</div>
</div>
</div>
<!--FrissonKit Javascripts-->
<script src="https://quantumforte.com/FrissonKit-Beta-5.0.3/FrissonKit.min.js"></script>
<!--Fontawesome Javascript-->
<script src="https://kit.fontawesome.com/271e72a7a8.js"></script>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<!--Add your custom javascript here-->
</body>
</html>