-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (154 loc) · 8.65 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
176
177
178
179
180
181
182
183
184
185
186
<!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>creative</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./tablet.css">
<link rel="stylesheet" href="./mobile.css">
</head>
<body>
<!-- header section -->
<header>
<!-------------------- navigation bar --------------------------->
<nav id="navigation-bar">
<div class="inside-nav d-flex w-100 justify-content-between align-items-center">
<h2 class="fs-3 fw-bold text-white-50">Start Bootstrap</h2>
<ul>
<li><a class="f-black" href="#about">about</a></li>
<li><a class="f-black" href="#service">service</a></li>
<li><a class="f-black" href="#portfolio">portfolio</a></li>
<li><a class="f-black" href="#contact">contact</a></li>
</ul>
</div>
<div id="menu">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
<!-------------------- top header-section(masthead) ------------->
<section class="top-header text-white">
<h1>Your Favorite Place for Free Bootstrap Themes</h1>
<div class="line"></div>
<p class="text-white-50 fs-5 mt-4">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
<button>FIND OUT MORE</button>
</section>
<!---------------------- about section -------------------------->
<section id="about" class="about-section">
<h2 class="fs-2 text-white">We've got what you need!</h2>
<div class="line"></div>
<p class="text-white-50 fs-5 mt-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button>GET STARTED</button>
</section>
<!------------------------ service section ----------------------->
<section id="service" class="service-section">
<h2 class="fs-2">At Your Service</h2>
<div class="line"></div>
<div class="icons">
<div class="icon-container text-center">
<i class="fa-regular fa-gem fs-1"></i>
<h3 class="fs-3">Sturdy Themes</h3>
<p class="fs-5 text-black-50">Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="icon-container text-center">
<i class="fa-regular fa-heart fs-1"></i>
<h3 class="fs-3">Made with Love</h3>
<p class="fs-5 text-black-50">Is it really open source if it's not made with love?</p>
</div>
<div class="icon-container text-center">
<i class="fa-solid fa-globe fs-1"></i>
<h3 class="fs-3">Ready to Publish</h3>
<p class="fs-5 text-black-50">You can use this design as is, or you can make changes!</p>
</div>
<div class="icon-container text-center">
<i class="fa-solid fa-laptop fs-1"></i>
<h3 class="fs-3">Up to Date</h3>
<p class="fs-5 text-black-50">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
</section>
<!-------------------------- portfolio section ---------------------->
<section id="portfolio" class="portfolio-section">
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/1.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/2.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/3.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/4.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/5.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
<div class="img-container position-relative">
<img class="w-100" src="./assets/img/portfolio/thumbnails/6.jpg">
<div class="project-category position-absolute start-50 top-50 translate-middle text-center">
<h4 class="fs-6 text-white-50">CATEGORY</h4>
<p class="fs-5 text-white">Project Name</p>
</div>
</div>
</section>
<!-------------- contact section ------------->
<section id="contact" class="contact-section">
<h2 class="fs-2">Let's Get In Touch!</h2>
<div class="line"></div>
<p class="text-black-50 fs-6 mt-4">Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!</p>
<div class="form-section w-100 mt-5 d-flex flex-column gap-4">
<!-- Fullname -->
<div class="position-relative">
<input type="text" name="name" id="fullname" required>
<label id="label-fullname" for="fullname" class="position-absolute">Full name</label>
</div>
<!-- Email -->
<div class="position-relative">
<input type="email" name="email" id="email" required>
<label id="email-label" for="email" class="position-absolute">Email</label>
</div>
<!-- Phone number -->
<div class="position-relative">
<input type="tel" name="phone" id="phone" required>
<label id="phone-label" for="phone" class="position-absolute">Phone number</label>
</div>
<div class="text-area position-relative">
<textarea class="w-100" name="message" id="message" cols="54" rows="10" required></textarea>
<label id="message-label" class="position-absolute" for="message">Message</label>
</div>
<button class="btn">Submit</button>
</div>
</section>
</header>
<footer class="d-flex justify-content-center text-secondary p-5 bg-secondary-subtle">
<p>Copyright © 2023 - Company Name</p>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./index.js"></script>
</html>