-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
190 lines (190 loc) · 10.4 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
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="./index.css">
<title>Timeout-And-Breathe</title>
</head>
<body>
<header class="nav-item d-flex flex-column justify-content-evenly">
<nav class="navbar navbar-expand-lg navbar-light nav_logo">
<img src="./images/tab_logo_B-O.png" alt="TAB logo">
<div class="container-fluid display-fixed px-4 py-3">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav me-9">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Community</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About Us</a>
</li>
</ul>
</div>
</div>
<div class=" container nav_btns w-50">
<button class="btn btn_log_in">Log in</button>
<button class="btn btn-outline-primary sign_up_btn">Sign Up</button>
</div>
</nav>
<div class="container-fluid hero_section">
<div class="hero_section_text">
<h1>Timeout-And-Breathe</h1>
<p> Temporarily stop! <br>
Rest or engage in a different activity from work, studies, or other responsibilities. <br>
Breaks are essential for maintaining productivity, reducing stress, and preventing burnout. <br>
Clear your mind, regain focus, and return to your tasks with renewed energy and concentration.</p>
<div>
<button class="btn btn_log_in">How it works</button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.3978 24V14.4H0.0516124L0 9.576H15.3978V0L24 12L15.3978 24Z" fill="#040406"/>
</svg>
<button class="btn sign_up_btn ms-4">Get Started</button>
</div>
</div>
</div>
</header>
<main>
<section class="container need_break_section">
<div class="need_break_section_text container pt-5">
<h1>You need a Break!</h1>
<p>Taking breaks is essential for improving productivity and well-being. It may seem counterintuitive, but regular breaks during work or study sessions can actually boost focus, creativity, and overall performance.</p>
<div>
<p id="learn_more"><a href="#">Learn More
<svg class="mx-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M15.3978 24V14.4H0.0516124L0 9.576H15.3978V0L24 12L15.3978 24Z" fill="#F46500"/>
</svg>
</a>
</p>
</div>
<div><button class="btn sign_up_btn py-2 px5">Get Started</button></div>
</div>
<img src="./images/image1.jpeg" alt="stretch_pose">
</section>
<section class="container max_break_section">
<img src="./images/image2.jpeg" alt="stretch_pose">
<div class="need_break_section_text container pt-5">
<h1>Maximize your Break!</h1>
<p>Engaging in physical activities like stretching, walking, or light exercises during breaks helps improve blood circulation throughout the body. This can reduce the risk of blood clots and promote overall cardiovascular health</p>
<div>
<p id="learn_more"><a href="#">Learn More <svg class="mx-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M15.3978 24V14.4H0.0516124L0 9.576H15.3978V0L24 12L15.3978 24Z" fill="#F46500"/>
</svg></a>
</p>
</div>
<div><button class="btn sign_up_btn py-2 px5">Get Started</button></div>
</div>
</section>
<section class="container align-center p-5 how_tab_sec_work">
<h1 class="blockquote text-center fs-2">How Timeout-And-Breathe Works</h1>
<div class="row gap-5">
<div class="container individual_container col-lg-4">
<img src="./images/3d-icons-1.png" alt="">
<h3>Create an Account</h3>
<p>Get started by creating an account to access all Take-A-Break features.
Once you have successfully registered, use the email address and password you provided during registration to log in to your newly created account.</p>
</div>
<div class="container individual_container col-lg-6">
<img src="./images/3d-icons-2.png" alt="">
<h3>Set Timer</h3>
<p>Activate timer and get reminder notifications to take a break.
You can access this feature by inputting your work schedule, preferred break times and duration.</p>
</div>
<div class="container individual_container col-lg-6 ">
<img src="./images/3d-icons-3.png" alt="">
<h3>Break Activities</h3>
<p>Engage in various activities such as gentle stretches or short exercises during your designated break times at work, school, or any other setting.
There is also a collection of soothing ambient sounds for you to enjoy during your break.</p>
</div>
<div class="container individual_container col-lg-6">
<img src="./images/3d-icons-4.png" alt="">
<h3>Back to Work</h3>
<p>Quickly and efficiently return to work after break without feeling disoriented or needing a lot of time to adjust back to a work mindset.
You will feel more alert and ready to tackle tasks with renewed focus after a break.</p>
</div>
</div>
</section>
<section class="container become_family_section">
<div class="blockquote text-center become_family_section_text">
<h1 class="p-5">Become Family!</h1>
<p>Don't miss out on this opportunity to stay informed and be a part of our community.
Join us today and receive valuable content straight to your inbox.
Rest assured, we respect your privacy, and you can opt-out anytime with a simple click.</p>
</div>
<div class="container become_family_form">
<form action="post">
<input type="text" id="name" name="name" placeholder="name">
<input type="email" id="mail" name="mail" placeholder="Email Address">
<input type="button" name="submit" id="input_submit" value="submit" >
</form>
</div>
</section>
</main>
<footer class="mt-5 footer text-light pt-5">
<div>
<div class="top-footer">
<div class="d-md-flex justify-content-center gap-5">
<div class="d-grid flex-column ps-5 logo-footer-div">
<img class="w-25 ps-5" src="./images/tab_logo_B-O.png" alt="tab-logo">
<div class="ps-2 d-flex flex-row align-items-center ">
<i class="pe-3 fs-5 fa-solid fa-phone-volume"></i>
<p>+234 123 456 7890</p>
</div>
<div class="container d-flex flex-row align-items-center">
<i class="pe-3 fs-5 fa-brands fa-facebook"></i>
<p>Timeout-And-Breathe</p>
</div>
<div class="container d-flex flex-row align-items-center ">
<i class="iconic pe-3 fs-5 fa-brands fa-instagram"></i>
<p>Timeout-And-Breathe</p>
</div>
</div>
<div class="d-md-flex flex-md-row justify-content-evenly">
<div class="text p-5">
<h5>Company</h5>
<h6><a href="#">About Us</a></h6>
<h6><a href="#">FAQ</a></h6>
<h6><a href="#">Contact Us</a></h6>
</div>
<div class="text p-5">
<h5>Product</h5>
<h6><a href="#">How it works</a></h6>
<h6><a href="#">Community</a></h6>
</div>
<div class=" text p-5">
<h5>Legal</h5>
<h6><a href="#">Terms and Conditions</a></h6>
<h6><a href="#">Community Guideline</a></h6>
<h6><a href="#">Community Guideline</a></h6>
<h6><a href="#">Privacy Policy</a></h6>
</div>
</div>
</div>
<div class="d-flex flex-column justify-content-end me-5 footer-input">
<h6 class="shift mb-2" style="color: white;">Subscribe to our news letter</h6>
<div class="footer_input">
<input type="text" class="custom-search-input" placeholder="Email Address">
<button class="custom-search-botton" type="submit"><a href="#">submit</a></button>
</div>
</div>
</div>
<div class="last mt-5 align-items-center">
<div class="d-flex flex-row justify-content-center align-items-center ">
<div class="ps-3 align-items-center">
<p class="rights"> <small>Timeout-And-Breathe</small><small>© All rights reserved
2023</small>
<small>🌐 English <img src="./images/Vector.svg" alt="vector-img"></small>
</p>
</div>
</div>
</div>
<div class="footer footer-bottom"></div>
</div>
</footer>
</body>
</html>