-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (179 loc) · 11.3 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
<!-- ⣿⣿⣿⣿⣿⣿⣿⣿⣯⣿⠋⠛⢿⣿⡿⠿⠛⣛⣛⣉⣩⣭⣭⣭⣭⣭⣍⣉⣛⡛⠿⢿⠃⠤⠘⣿⡾⣿⣿⣿⣿⣿⣿ -->
<!-- ⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠇⠰⡄⠲⣾⣿⡿⢿⣛⣻⣭⣭⣭⣭⣭⣭⣿⣛⣻⣿⣿⡇⢌⡁⡆⢿⣿⣿⣿⣿⣿⣿⣿ -->
<!-- ⣿⣿⣿⣿⣿⣿⣿⠟⣩⣴⣿⡐⢡⠱⢹⣾⣿⣿⣿⡿⢿⣿⣛⣛⣛⣛⣻⣿⢿⣿⣿⣄⠂⠄⢳⣆⠻⣿⣯⣿⣿⣿⣿ -->
<!-- ⣿⣿⣿⣿⣿⡿⢁⣾⣿⣿⡿⡁⠆⡀⠇⣿⠏⣱⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣹⣆⢀⠰⡹⣷⡈⢿⣿⣹⣿⣿ -->
<!-- ⣿⣿⣿⣿⠏⣰⣿⣿⡿⣫⣤⣻⣦⣔⣸⡿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡻⣟⣭⣭⣊⢷⡌⢿⣿⣿⣿ -->
<!-- ⣿⣻⣿⢏⣾⣿⣿⡟⣵⣻⣽⣾⣷⣾⣭⣵⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯⢿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣻⡌⢿⣷⣿ -->
<!-- File: index.html ⣷⣿⠇⣼⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯⣿⣿⣯⣿⣿⣯⣿⡿⣿⣿⣿⣿⡈⣿⣿ -->
<!-- ⣿⡟⣸⣽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣿⣿⣿⣿⣿⣏⣿⣿⣿⣿⣿⣿⢻⣿⢿⣹⡏⣿⣿⣿⢻⣿⣿⣿⣇⢻⣿ -->
<!-- Project: landing-page ⣿⠃⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣶⣿⢻⣿⡿⣿⣿⢻⣽⣹⣿⣿⣿⣿⡾⣿⡾⣿⡇⣿⡸⣿⢸⣿⣿⣿⣿⠘⣿ -->
<!-- Github: marsdevx ⣿⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⣿⣏⢼⣻⣷⢻⣿⢸⡿⡏⣿⣿⣿⣿⢃⣿⣇⡏⣿⠛⠺⠾⠋⣿⣿⣿⣿⡄⣿ -->
<!-- ⡟⢸⣿⣿⣿⣿⣿⣿⣿⣟⣿⣿⣿⣎⡿⠾⠛⠘⠋⠘⠻⢸⡇⠇⢻⣿⡿⠹⣿⠙⣵⡆⠀⠀⢤⣄⡀⣿⣿⣿⣿⡇⢸ -->
<!-- Created: 22:19 16/01/2025 ⡇⢸⣿⣿⣿⣿⣿⣿⣿⣿⠼⣿⣿⡋⠀⣠⣶⡷⠀⠀⠀⢠⣸⣿⣿⣿⣿⣿⣿⡇⠉⠀⠀⢀⠘⣿⡇⢸⣿⡼⣿⡇⢸ -->
<!-- Updated: 22:20 16/01/2025 ⣷⢸⣿⣿⣿⣿⣿⣿⣿⢿⡶⢻⣿⡇⣾⣿⠈⠁⠀⠀⢠⠀⣿⣿⣿⣿⣿⣿⣿⣿⡘⣦⣴⡾⢠⡿⢙⡘⣿⣇⢸⡇⢸ -->
<!-- ⣿⠀⣿⣿⣿⣿⣿⣿⡿⣫⣕⢻⣿⣇⠾⣿⣆⠶⣶⣶⡟⣰⣿⣿⣿⣿⣿⣿⣿⣿⣷⣬⡍⣤⣹⡶⣿⡇⣿⡿⡸⡇⢸ -->
<!-- Path: ./index.html ⣿⡀⣿⣿⣿⣿⣿⡿⣼⢯⣯⠋⣿⣿⣰⣶⣩⣶⣴⢦⣾⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⡿⢟⣿⣵⣻⣳⡧⣿⣿⣇⡇⣿ -->
<!-- ⣿⡇⣿⣿⣿⣿⣿⣷⠹⡼⣧⣧⢿⣿⢇⢧⢯⢯⣟⣾⣿⢋⢩⠍⣭⣵⣶⣶⣶⣦⡀⠛⢸⣿⣿⣿⣷⡯⣿⣿⣾⠀⣿ -->
<!-- ⣿⣧⢸⣿⣿⣿⣿⣿⣷⡉⣓⠾⢸⣿⣿⣮⣯⣛⣯⣿⣿⢸⣶⣿⣿⣿⣿⣿⣿⣿⣿⡦⣸⣿⣿⣿⣿⠃⡿⣿⣿⠀⣿ -->
<!-- ⣿⣿⠸⣿⣿⣿⡏⣿⣿⣷⣿⣽⢸⣿⣼⡞⣿⣿⣿⣿⣿⣆⢻⣿⣿⣿⣿⣿⣿⣿⠟⣱⣿⣿⡿⢋⢡⢶⣷⣿⣿⠀⣿ -->
<!-- ⣿⣿⠆⣿⣿⣿⣿⣿⣿⣿⣿⢿⢸⣿⡏⣷⢈⢿⣿⣿⣿⣿⣇⡉⠿⣿⣿⡿⠏⣱⣾⡿⢉⣰⣾⠷⣹⣾⢿⣏⡇⢸⣿ -->
<!-- ⣿⣿⡇⢿⡇⣿⣿⣹⣿⣿⣿⣿⢸⣿⣿⣿⡞⢻⢰⡹⣭⣝⣛⣛⣛⡗⣚⢋⣭⣥⣶⣶⣿⣿⢟⣾⢧⡟⣾⡿⣹⢸⣿ -->
<!-- ⣿⣿⡇⢸⣿⢿⣿⣿⣿⣿⡟⡟⣾⣿⣧⢿⣟⠈⣼⣿⣿⣿⣿⣶⡏⣷⡎⣻⢿⢻⣿⡇⣿⣯⣿⣏⣾⣿⣿⢡⣻⠈⣿ -->
<!-- ⣿⣿⣿⠈⣿⢸⣿⣿⣿⣇⣿⢷⣿⣿⡽⣼⣿⢻⣸⣿⣿⣿⣿⣿⡫⣌⣿⣿⣜⣲⣭⣛⠏⣾⡟⣼⡟⣿⣿⣺⣿⡄⢿ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The18: Powerful platform for tracking and analyzing business statistics. Manage your sales, team, clients, and marketing all in one place.">
<meta name="keywords" content="business analytics, sales management, team collaboration, client management, marketing platform">
<title>the18</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Header -->
<header class="header container">
<nav class="left-side">
<img src="imgs/logo.svg" alt="Company logo" class="logo">
<a href="#second_screen" class="item link-anima" id="first_block_title">About Us</a>
<a href="#third_screen" class="item link-anima" id="second_block_title">How it work</a>
</nav>
<div class="right-side">
<a href="#" class="button item">Login</a>
<a href="#" class="button item black">Sign Up</a>
</div>
</header>
<!-- Main -->
<main>
<!-- Intro -->
<section class="intro container">
<div class="intro-left">
<h1 class="title">Always Track &
Analyze Your Business
Statistics To Succeed.</h1>
<p class="text">A better way to manage your sales, team, clients & marketing
— on a single platform. Powerful, affordable & easy.</p>
<div class="buttons">
<a href="#" class="button item enter">Enter your email</a>
<a href="#" class="button item black">Get started</a>
</div>
<div class="intro-imgs">
<img src="imgs/m_visa.png" alt="Visa payment logo" class="intro-img-i">
<img src="imgs/m_paypall.png" alt="PayPal payment logo" class="intro-img-i">
<img src="imgs/m_mastercard.png" alt="MasterCard payment logo" class="intro-img-i">
</div>
</div>
<div class="intro-right">
<img src="imgs/intro.png" alt="Intro illustration" class="intro-img">
</div>
</section>
<!-- Second Screen -->
<section class="second-screen container" id="second_screen">
<div class="left-side">
<img src="imgs/second-screen.png" alt="Illustration of feedback and collaboration" class="second-img">
</div>
<div class="right-side">
<span class="pre-title" id="first_block_title_c"></span>
<h2 class="subtitle">Faster, friendlier feedback
loops make life easier.</h2>
<p class="text">Add a Viewer to your team so they can see everything you share, or invite
people to individual documents. It’s up to you. Stakeholders can check
out designs in their web browser, test prototypes and leave feedback for free.</p>
<ul class="sec-sc-item-con">
<li class="sec-sc-item">Shared Cloud Libraries, for a single source of truth</li>
<li class="sec-sc-item">Prototype previews for user testing and research</li>
<li class="sec-sc-item">Easy organization with projects</li>
<li class="sec-sc-item">Free developer handoff, right inside the browser</li>
<li class="sec-sc-item">Two-factor authentication and SSO</li>
</ul>
</div>
</section>
<!-- Third Screen -->
<section class="third-screen container" id="third_screen">
<div class="left-sid">
<span class="pre-title" id="second_block_title_c"></span>
<h2 class="subtitle">Building the best space
for collaboration.</h2>
<article class="th-sc-block">
<img src="imgs/icon1.png" alt="Cube icon representing shared libraries" class="icon">
<div class="text-cont">
<h3 class="subtitle-h3">Shared Cloud Libraries</h3>
<p class="text">Navigate to the Your work panel in the left sidebar.
Select the library you want to share. Select the Share
icon in the upper right to share the library.</p>
</div>
</article>
<article class="th-sc-block">
<img src="imgs/icon2.png" alt="Structure icon representing developer handoff" class="icon">
<div class="text-cont">
<h3 class="subtitle-h3">Free developer handoff, right inside</h3>
<p class="text">Cloud Inspector makes it easy for developers to get
the information they need to turn pixels into code —
all in the browser and, most importantly, for free.</p>
</div>
</article>
<article class="th-sc-block">
<img src="imgs/icon3.png" alt="Rocket icon representing real-time collaboration" class="icon">
<div class="text-cont">
<h3 class="subtitle-h3">Real-time collaborative editing</h3>
<p class="text">Room Service helps you build real-time collaborative features. Add real-time data sync! Let
users edit the same data at the same time.</p>
</div>
</article>
</div>
<div class="right-side">
<img src="imgs/third-screen.png" alt="Illustration of collaborative workspace" class="third-img">
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container footer-container">
<div class="left-side">
<div class="top-left">
<img src="imgs/footer/white-logo.svg" alt="Company logo" class="icon">
<h2 class="footer-title">Want to recieve our
awesome stories?</h2>
<div class="buttons">
<a href="#" class="button item enter">Enter your email</a>
<a href="#" class="button item black">Get started</a>
</div>
</div>
<div class="bottom-left">
<span class="c text">© github.com/marsdevx</span>
</div>
</div>
<div class="right-side">
<nav class="top-right">
<div class="right-blocks">
<div class="right-block">
<span class="right-title">Email</span>
<span class="text">info@the18.design</span>
</div>
<div class="right-block">
<span class="text" id="first_block_title_b"></span>
<span class="text" id="second_block_title_b"></span>
</div>
<div class="right-block">
<span class="text">Lead generation</span>
<span class="text">Customer engagement</span>
<span class="text">Customer support</span>
<span class="text">Help Center Articles</span>
<span class="text">Outbound Messages</span>
</div>
</div>
</nav>
<div class="bottom-right">
<a href="#"><img src="imgs/footer/facebook.png" alt="Facebook social media link" aria-label="Facebook" class="right-img"></a>
<a href="#"><img src="imgs/footer/twitter.png" alt="Twitter social media link" aria-label="Twitter" class="right-img"></a>
<a href="#"><img src="imgs/footer/google.png" alt="Google social media link" aria-label="Google" class="right-img"></a>
<a href="#"><img src="imgs/footer/linkedin.png" alt="LinkedIn social media link" aria-label="LinkedIn" class="right-img"></a>
<a href="#"><img src="imgs/footer/youtube.png" alt="YouTube social media link" aria-label="YouTube"class="right-img"></a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>