-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
270 lines (253 loc) · 13.6 KB
/
index.html
File metadata and controls
270 lines (253 loc) · 13.6 KB
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<!-- Created By CoolAsCode -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoolAsCode</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">CoolAs<span>Code.</span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About Us</a></li>
<li><a href="#services" class="menu-btn">Services</a></li>
<li><a href="#skills" class="menu-btn">Skills</a></li>
<li><a href="#teams" class="menu-btn">Teams</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
<li class="toggle">
<div id="toggleButton">
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>
</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, We are </div>
<div class="text-2">CoolAsCode</div>
<div class="text-3">And We'r <span class="typing"></span></div>
<a href="#">Hire Us</a>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About Us</h2>
<div class="about-content">
<div class="column left">
<img src="images/profile-1.png" alt="">
</div>
<div class="column right">
<div class="text">We are CoolAsCode and We are <span class="typing-2"></span></div>
<p>Welcome to CoolAsCode, where we are dedicated to helping businesses thrive in the digital world. Our team of skilled and experienced professionals are passionate about assisting companies in achieving their goals by providing top-notch services tailored to their specific needs.
We specialize in website development, creating stunning and user-friendly websites that serve as powerful online tools to attract and engage customers. Whether it's a simple landing page or a complex e-commerce platform, we have the expertise to bring your vision to life and deliver a website that not only looks great but also performs exceptionally well.
In addition to web development, we also offer video editing services for content creators. We understand the importance of compelling visuals in today's digital landscape, and our team of creative editors can transform raw footage into captivating videos that tell a story, engage audiences, and drive results. From video intros and outros to full-scale video production, we have the skills and tools to elevate your content to the next level.
At CoolAsCode, we pride ourselves on delivering exceptional service, attention to detail, and a collaborative approach to working with our clients. We are committed to helping businesses succeed by providing reliable and innovative solutions that meet their unique needs. Partner with us to take your business to new heights in the digital world!</p>
<!--<a href="#">Download CV</a> -->
</div>
</div>
</div>
</section>
<!-- services section start -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title">Our services</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Web Development</div>
<p>CoolAsCode: Crafting engaging websites. Strategic consultation, custom design, development, and ongoing support. Exceptional web solutions tailored to your needs.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-chart-line"></i>
<div class="text">Advertising</div>
<p>CoolAsCode: Amplifying your brand. Strategic campaigns, targeted messaging, and compelling visuals. Exceptional advertising solutions tailored to your business.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-photo-video"></i>
<div class="text">Video Editing</div>
<p>CoolAsCode: Elevating your videos. Collaborative approach, creative editing, and polished storytelling. Exceptional video editing solutions tailored to your content.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skills section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">Our skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">Our creative skills & experiences.</div>
<p>CoolAsCode: Unleashing Creative Expertise for Your Brand's Success.
At CoolAsCode, we pride ourselves on our team's exceptional creative skills and extensive industry experience. With a diverse range of talents, we bring together a collective passion for delivering innovative and captivating solutions that make your brand stand out in the digital landscape. Our deep understanding of the power of creativity, combined with strategic thinking, allows us to create tailored strategies that effectively communicate your message and evoke the desired emotional response.
Experience the transformative power of our creative expertise and let us help your brand make a lasting impression. Together, we can achieve remarkable success in the digital realm.</p>
<a href="#">Read more</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Web Development</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Video Editing</span>
<span>84%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Advertising</span>
<span>78%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
<!-- teams section start -->
<section class="teams" id="teams">
<div class="max-width">
<h2 class="title">Our teams</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/profile-2.jpg" alt="">
<div class="text">Lalit</div>
<p>Web Developer</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-3.png" alt="">
<div class="text">Subham</div>
<p>Web Developer</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-4.jpg" alt="">
<div class="text">Arnav</div>
<p>Web Developer</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpg" alt="">
<div class="text">Abhisek</div>
<p>Video Editor</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-6.jpg" alt="">
<div class="text">Sandy</div>
<p>Video Editor</p>
</div>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact Us</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<p>We're excited to hear from you and discuss how our creative solutions can help your brand thrive in the digital world.
Whether you have a question, want to request a quote, or simply want to explore potential collaborations, we're here to assist you. Our friendly and knowledgeable team is ready to provide personalized guidance and answer any inquiries you may have.
To get in touch with us, please fill out the contact form below, and we'll respond promptly. Alternatively, you can reach us directly via email, as listed below. We value open communication and look forward to discussing your unique needs and finding the best solutions to achieve your goals.
Thank you for considering CoolAsCode. We can't wait to connect with you and embark on a creative journey together.</p>
<div class="icons">
<div class="row">
<i class="fas fa-building"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">CoolAsCode</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">India</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">coolascodes@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message Us</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" placeholder="Email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Subject" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer section start -->
<footer>
<span>Created By CoolAsCode | <span class="far fa-copyright"></span> 2023 All rights reserved.</span>
</footer>
<script src="script.js"></script>
</body>
</html>