-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (146 loc) · 8.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
<title>First Bootstrap Page</title>
</head>
<body>
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="#"><img class="mr-2" src="img\logo.png" alt="">STRICT</a>
</div>
</nav>
<div class="jumbotron text-center text-white banner mb-0">
<div class="container">
<h1 id="strict" class="display-1 font-weight-normal mt-5">STRICT</h1>
<p class="lead mb-5">STRICT is a responsive theme with a clean and minimal look.</p>
<button class="btn btn-primary btn-lg mb-5">Call to action</button>
</div>
</div>
<div class="jumbotron jumbotron-fluid text-center main-top">
<div class="container">
<h3>Simple & pure design.</h4>
<p class="text-muted">Designers everywhere gush with admiration upon seeing a web design and exclaim "its beautiful, it's so clean!". There are a countless number of webdesign round-ups dedicated to 'clean' design and it is a term thrown around quite a bit in the web design community. It can be easy to spot a good example of clean design.</p>
</div>
</div>
<div class="feature">
<div class="container py-5">
<div class="row text-center">
<div class="col-md mb-md-0 mb-4">
<img class="mb-4" src="img\phone.png" alt="phone" width="100px" height="100px">
<h5>Optimized for all devices</h5>
<p class="text-muted mt-4">STRICT has been designed to be fully responsive on all devices</p>
</div>
<div class="col-md mb-md-0 mb-4">
<img class="mb-4" src="img\plane.png" alt="phone" width="100px" height="100px">
<h5>Clean & Minimal Design</h5>
<p class="text-muted mt-4">This multipurpose theme is especially created to be used for different projects.</p>
</div>
<div class="col-md mb-md-0 mb-4">
<img class="mb-4" src="img\speaker.png" alt="phone" width="100px" height="100px">
<h5>Font Awesome Icon</h5>
<p class="text-muted mt-4">This multipurpose theme is especially created to be used for different projects.</p>
</div>
</div>
</div>
</div>
<div class="portfolio text-center py-5">
<div class="container">
<h2 class="display-4 ">Showcase your work like a pro.</h3>
<small class="text-muted">Contact me if you like my work</small>
</div>
<div class="card-columns container my-5">
<div class="card">
<img src="img\chris-cold-vultures.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
<div class="card">
<img src="img\christopher-gonzalez-madascarartstation.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
<div class="card">
<img src="img\haibin-wu-01.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
<div class="card">
<img src="img\kasia-mikulowska-gargulec4.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
<div class="card">
<img src="img\maciej-sidorowicz-bielany-gate-sioux-skero-error.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
<div class="card">
<img src="img\seung-hee-han-0326.jpg" class="card-img-top" alt="">
<div class="hidden-buttons">
<button class="btn btn-outline-primary"><i class="fas fa-search-plus"></i></button>
<button class="btn btn-outline-primary"><i class="fas fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid text-center contact-us text-white">
<div class="container container-form">
<h3 class="display-4">Stay with us</h3>
<small class="text-light">We ensure quality & support</small>
<form class="my-5">
<div class="form-group">
<input type="text" class="form-control" id="name-input" placeholder="Full Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email-input" placeholder="Email Address">
</div>
<div class="form-group">
<textarea class="form-control" id="message-input" rows="6" placeholder="Message"></textarea>
</div>
<div class="form-group form-check float-left">
<input type="checkbox" class="form-check-input" id="subscribe-check">
<label class="form-check-label" for="subscribe-check">Subscribe Newsletter</label>
</div>
<button class="btn btn-primary float-right px-5">Send</button>
</form>
</div>
</div>
<footer class="container">
<p class="text-muted d-inline">Copyright 2014, STRICT</p>
<ul class="list-unstyled list-inline float-right">
<li class="list-inline-item">
<a href="#" class="btn facebook"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn twitter"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn google-plus"><i class="fab fa-google-plus-g"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn linked-in"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</footer>
</body>
</html>