-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
169 lines (163 loc) · 8.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css" />
<link rel="stylesheet" href="./src/style.css" />
<title>Timeline Slider Concept</title>
</head>
<body>
<!--SVG GRADIENT PART-->
<svg aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
<linearGradient id="icon-gradient">
<stop offset="0%" stop-color="var(--color-accent-light)" />
<stop offset="100%" stop-color="var(--color-accent-dark)" />
</linearGradient>
</svg>
<!--END SVG GRADIENT PART-->
<header class="header">
<h1 class="header__title">Timeline Slider Concept</h1>
<div class="header__btns">
<a
href="https://github.com/nat-davydova/timeline-slider-concept"
class="header__btn"
target="_blank"
title="Check On Github"
>Check On Github</a>
</div>
</header>
<div class="content">
<div class="container">
<h2 class="content__title">Click Timeline Slider Points ⬇️</h2>
<div class="timeline">
<div class="timeline__stepper">
<div class="timeline__step is-active">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-brain"/>
</svg>
<svg class="timeline__icon timeline__icon--active">
<use href="#icon-brain"/>
</svg>
<p class="timeline__step-title">
Brainstorm
</p>
</div>
<div class="timeline__step">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-bulb"/>
</svg>
<svg class="timeline__icon timeline__icon--active">
<use href="#icon-bulb"/>
</svg>
<p class="timeline__step-title">
Discuss<br/>Ideas
</p>
</div>
<div class="timeline__step">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-rocket"/>
</svg>
<svg class="timeline__icon timeline__icon--active">>
<use href="#icon-rocket"/>
</svg>
<p class="timeline__step-title">
Make<br/>Project
</p>
</div>
<div class="timeline__step">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-target"/>
</svg>
<svg class="timeline__icon timeline__icon--active">
<use href="#icon-target"/>
</svg>
<p class="timeline__step-title">
Select<br/>Strategy
</p>
</div>
<div class="timeline__step">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-seo"/>
</svg>
<svg class="timeline__icon timeline__icon--active">
<use href="#icon-seo"/>
</svg>
<p class="timeline__step-title">
SEO<br/>Target
</p>
</div>
<div class="timeline__step">
<svg class="timeline__icon timeline__icon--default">
<use href="#icon-customers"/>
</svg>
<svg class="timeline__icon timeline__icon--active">
<use href="#icon-customers"/>
</svg>
<p class="timeline__step-title">
Happy<br />Customers
</p>
</div>
</div>
<div class="timeline__slides">
<div class="timeline__slide">
<h3 class="timeline__slide-title">Brainstorm</h3>
<div class="timeline__slide-content">
<p>Brainstorming is a great way to generate new ideas or to solve problems. When you
engage in brainstorming, you allow yourself to think freely without any
restrictions or limitations.</p>
</div>
</div>
<div class="timeline__slide">
<h3 class="timeline__slide-title">Discuss Ideas</h3>
<div class="timeline__slide-content">
<p>In order to fully explore and develop ideas, it is essential to engage in thoughtful
and meaningful discussion. This can involve exchanging viewpoints and perspectives
with others, asking probing questions, and considering alternative approaches.</p>
</div>
</div>
<div class="timeline__slide">
<h3 class="timeline__slide-title">Make Project</h3>
<div class="timeline__slide-content">
<p>Creating a project involves many steps, such as identifying the problem or
opportunity, defining the scope and objectives, determining the resources
needed, planning the timeline and milestones, executing the plan, and monitoring
and controlling the project progress. </p>
</div>
</div>
<div class="timeline__slide">
<h3 class="timeline__slide-title">Select Strategy</h3>
<div class="timeline__slide-content">
<p>When it comes to selecting a strategy, there are several factors to consider. For
example, you should think about the company's goals, available resources, and
industry trends. Additionally, you may want to do some market research to identify
potential opportunities and areas of growth.</p>
</div>
</div>
<div class="timeline__slide">
<h3 class="timeline__slide-title">SEO Target</h3>
<div class="timeline__slide-content">
<p>SEO target is an essential component of digital marketing. It is a process of
optimizing the website and its content to improve its ranking in search engine
results pages. </p>
</div>
</div>
<div class="timeline__slide">
<h3 class="timeline__slide-title">Happy Customers</h3>
<div class="timeline__slide-content">
<p>Happy customers are the backbone of any successful business. They are the ones who
keep coming back, bringing their friends and family along, and spreading the word
about your brand.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>