-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (128 loc) · 5.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alivio</title>
<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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<!-- UP MENU -->
<header class="up">
<div class="container">
<div class="up_menu">
<div class="div_logo">
<img src="img/Logo.png" alt="" class="logo">
</div>
<div class="contant_menu">
<ul class="menu">
<li class="text_menu">Why Alivio</li>
<li class="text_menu">Solutions</li>
<li class="text_menu">Community</li>
<li class="text_menu">Pricing</li>
</ul>
</div>
<div class="regestra">
<button class="sing_button">Sign in</button>
<button class="start_button">Start Trial</button>
</div>
</div>
</div>
</header>
<!-- Header -->
<section class="header">
<div class="container">
<div class="content_header">
<h1 class="h1h1">Be aware,<br>
Manage well.</h1>
<p class="p_p">Everyone experiences stress in different ways.<br>
Let Alivio guide you, in a personalized journal<br> experience, to overcome your stress.</p>
<button class="btn_btn">Find Your Way</button>
</div>
</div>
</section>
<section class="sec_02">
<div class="container">
<div class="content_02">
<div class="up_02">
<div class="up_text_left">
<p class="text_left1">How it works</p>
<p class="text_left2">Understand & Release<br> the stress in 3 steps</p>
</div>
<div class="up_text_right">
<p class="text_right">Alivio offers as many journals it takes, tackling different areas such as anxiety, overwhelmedness, sadness, or anger, and a variety of personal causes, to help you become aware of your emotions, and guide you in how to manage stress.</p>
</div>
</div>
<div class="down_02">
<div class="card cards1">
<div class="text_top_down_02">
<p class="text_top_down">Personalize</p>
</div>
<p class="text_down">Answer a quick survey about how you express yourself, what causes you stress, and what area would you like to work on. This way, we can fully personalize your journal!</p>
<img src="img/card1.png" alt="" class="img_card_02">
</div>
<div class="card cards2">
<div class="text_top_down_022">
<p class="text_top_down">Write & Understand</p>
</div>
<p class="text_down">Write, draw, reflect, understand. Alivio will guide you through the prompts and will help you manage your stress!</p>
<img src="img/card2.png" alt="" class="img_card_02">
</div>
<div class="card cards3">
<div class="text_top_down_0222">
<p class="text_top_down">Alivio!</p>
</div>
<p class="text_down">Now you are aware, and have a way to manage and overcome your own stress.<br>What are you waiting for? Alivio today!</p>
<img src="img/card3.png" alt="" class="img_card_02">
</div>
</div>
</div>
</div>
</section>
<section class="sec_03">
<div class="container">
<div class="content_03">
<div class="left_03">
<h3 class="title_03">Let's hear about<br> Kayla's success story</h3>
<p class="text_03">See how well Alivio works in a real customer’s life. </p>
<button class="button_03">Let’s get started</button>
</div>
<div class="right_03">
<img src="img/Video.png" alt="" class="img_03">
</div>
</div>
</div>
</section>
<section class="sec_04">
<div class="container">
<div class="content_04">
<div class="left_04">
<img src="img/image-Card.png" alt="" class="img_04_glav">
</div>
<div class="right_04">
<p class="text_04">Our product</p>
<h3 class="title_04">You tell us your stress,<br>
We make your diary</h3>
<p class="text_text_04">Everyone experiences it, and in different ways.Let Alivio guide you, in a personalized journal experience, to overcome your stress.</p>
<button class="button_04">Find Your Way</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<img src="img/Alivio.svg" alt="" class="img_footer">
<ul>
<li class="text_footer"><a href="">Why Alivio</a></li>
<li class="text_footer"><a href="">Solutions</a></li>
<li class="text_footer"><a href="">Community</a></li>
<li class="text_footer"><a href="">Pricing</a></li>
</ul>
</div>
</footer>
</body>
</html>