-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (75 loc) · 3.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="assets/logo.png">
<title>Frontend Boilerplate HTML | SCSS | JS</title>
<!-- Style CSS -->
<link rel="stylesheet" href="css/main.min.css">
<!-- Script JS -->
<script defer src="js/main.min.js"></script>
</head>
<body>
<main>
<div class="container header">
<h1 class="header__heading">Frontend Boilerplate</h1>
<p class="header_description">Starter frontend boilerplate which uses HTML, SCSS, JavaScript and Gulp Js. It
is very usefull automation tool to create static web pages and run in local server quickly. </p>
</div>
<div class="container card-wrapper">
<div class="card">
<h2 class="card__header">HTML</h2>
<div class="card__image">
<img src="assets/html.png" alt="html">
</div>
</div>
<div class="card">
<h2 class="card__header">Sass</h2>
<div class="card__image">
<a href="https://sass-lang.com/" target="_blank">
<img src="assets/sass.png" alt="sass">
</a>
</div>
</div>
<div class="card">
<h2 class="card__header">JS</h2>
<div class="card__image">
<img src="assets/js.png" alt="js">
</div>
</div>
<div class="card">
<h2 class="card__header">Gulp.JS</h2>
<div class="card__image">
<a href="https://gulpjs.com/" target="_blank">
<img src="assets/gulp.png" alt="gulp">
</a>
</div>
</div>
</div>
<div class="container">
<p class="paragraph"> Step into the future of streamlined web development with your very own automation
masterpiece crafted using Gulp.js. Gulp.js is more than just a tool; it's a technological marvel that
empowers you to transform repetitive and time-consuming tasks into a symphony of efficiency and
precision. </p>
<p class="paragraph">Imagine a digital assistant that watches your every move, anticipating your needs and
executing them flawlessly. With Gulp.js, this vision becomes reality. Picture this: as you modify your
source code, your automation tool leaps into action, effortlessly compiling your SCSS into sleek CSS,
minifying your JavaScript for optimal performance, and even optimizing images to ensure lightning-fast
load times. It's like having a team of tireless assistants working behind the scenes, ensuring your
project is always at its best.</p>
<p class="paragraph">But that's just the beginning. Gulp.js empowers you to craft a tailor-made workflow
that matches your unique development style. You wield the power to chain tasks together, orchestrating a
seamless dance of processes that transform raw code into a polished masterpiece. Need to automatically
inject CSS changes into your browser for instant previews? Gulp.js has your back. Want to synchronize
your project with a remote server? Gulp.js can handle that too, ensuring your changes go live without
missing a beat.</p>
</div>
</main>
<footer>
<div class="attribution"> Coded by <a href="https://github.com/kanishkasubash">Kanishka Priyashantha</a>
</div>
</footer>
</body>
</html>