-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (101 loc) · 5.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study_2</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="header__bock-logo">
<img class="header__logo" src="imgs/Logo.svg" alt="Alivio">
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__list-item"><a class="header__list-link" href="#">Why Alivio</a></li>
<li class="header__list-item"><a class="header__list-link" href="#">Solutions</a></li>
<li class="header__list-item"><a class="header__list-link" href="#">Community</a></li>
<li class="header__list-item"><a class="header__list-link" href="#">Pricing</a></li>
</ul>
</nav>
<div>
<a href="#" class="header__sign-in">Sign in</a>
<button class="header__trial">Start Trial</button>
</div>
</header>
<main class="main">
<section class="main__block-1">
<div class="main__block-1__content">
<h1>Be aware,<br>Manage well.</h1>
<p>Everyone experiences stress in different ways. Let Alivio guide you, in a personalized journal experience, to overcome your stress.</p>
<button class="main__block-1__btn">Find Your Way</button>
</div>
</section>
<section class="main__block-2">
<aside class="main__block-2__aside">
<p>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>
</aside>
<p class="preHead">How it works</p>
<h2>Understand & Release<br>the stress in 3 steps</h2>
</section>
<section class="main__block-3">
<div class="main__block-3__col">
<div class="col__header-1">
<h3>Personalize</h3>
</div>
<p>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="imgs/blok3-1.jpg">
</div>
<div class="main__block-3__col middle">
<div class="col__header-2">
<h3>Write & Understand</h3>
</div>
<p>Write, draw, reflect, understand. Alivio will guide you through the prompts and will help you manage your stress!</p>
<img src="imgs/blok3-2.jpg">
</div>
<div class="main__block-3__col">
<div class="col__header-3">
<h3>Alivio!</h3>
</div>
<p>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="imgs/blok3-3.jpg">
</div>
</section>
<section class="main__block-4">
<div class="main__block-4__content">
<aside class="main__block-4__media">
<a href="#" class="main__block-4__video"><img src="imgs/video-shot.png" alt="video-shot"></a>
</aside>
<h2>Let's hear about Kayla's success story</h2>
<p>See how well Alivio works in a real customer's life.</p>
<button class="main__block-4__btn">Let's get started</button>
</div>
</section>
<section class="main__block-5">
<aside class="main__block-5__imgs">
<div class="main__block-5__imgs__block">
<img class="main__block-5__imgs__block__img" src="imgs/block-5-Image.jpg" alt="Image">
</div>
<img class="main__block-5__imgs__block__card" src="imgs/block-5-Card.png" alt="Card">
</aside>
<p class="preHead">Our product</p>
<h2>You tell us your stress,<br>We make your diary</h2>
<p>Everyone experiences it, and in different ways.<br>Let Alivio guide you, in a personalized journal experience, to overcome your stress.</p>
<button>Find Your Way</button>
</section>
</main>
<footer>
<div class="footer__content">
<img src="imgs/Alivio-footer.svg" alt="Alivio">
<ul class="footer__content__list">
<li><a class="footer__list__link" href="#">Why Alivio</a></li>
<li><a class="footer__list__link" href="#">Solutions</a></li>
<li><a class="footer__list__link" href="#">Community</a></li>
<li><a class="footer__list__link" href="#">Pricing</a></li>
</ul>
</div>
</footer>
</body>
</html>