-
Notifications
You must be signed in to change notification settings - Fork 1
/
welcome.html
176 lines (175 loc) · 9.45 KB
/
welcome.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Page</title>
<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">
</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 to_center">
<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-25 me-5t">
<p>Help</p>
<p><i class="fa-solid fa-user p-3"></i><span>Account</span></p>
</div>
</nav>
<div class="container-fluid hero_welcome_section">
<div class="hero_welcome_section_text">
<h2 class="h2">Hello <span id="username">User</span></h2>
<h1>Welcome back to your <br>personal oasis.</h1>
</div>
</header>
<main>
<section class="container row p-5 my-5 gap-4 welcome_write_up">
<div class="container side_bar col-5">
<ul class="welcome_write_up_list">
<li>Notification Settings</li>
<li>Schedule Break</li>
<li>Break Activities</li>
<li>Reports</li>
</ul>
</div>
<!-- <div class="col-7 welcome_write_up_text">
<p>
We're delighted to see you return to our virtual haven. Your presence brightens up our online community, and we're thrilled to have you back! <br>
Here, at [Your Website Name], we've tailored this space to cater to your preferences and needs. Whether you're seeking inspiration, knowledge, or just a moment of serenity, we've got you covered. <br>
Take a deep breath, relax, and let the positive vibes flow. Feel free to explore our curated content, connect with like-minded individuals, or simply enjoy a quiet moment of reflection. <br>
We appreciate your continued support and look forward to accompanying you on your journey through this digital sanctuary. <br>
Let's make the most of this experience together!
</p>
</div> -->
</section>
<section class="new_features_section">
<div class="new_features_section_content pt-3">
<p>
<i class="fa-regular fa-star mx-2 new_features_star fs-1"></i>
<p class="new_features_text h3">NEW FEATURES!</p>
<p>comming soon...</p>
</p>
</div>
</section>
<section class="container align-center p-5 how_tab_sec_work">
<h1 class="blockquote text-center fs-2">Personalized break recommendation</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>the app tracks your activities to understand your work habits, and productive hours to give adequate suggestions that suits you.
</div>
<div class="container individual_container col-lg-6">
<img src="./images/heart_icon.png" alt="">
<h3>Personalized health recommendation</h3>
<p>Get health recommendation tips that will help to relieve or manage your health Conditons.
Also get personalised tips on how to prevent health issues associated with prolonged sitting.</p>
</div>
<div class="container individual_container col-lg-6 ">
<img src="./images/burnout_image.png" alt="">
<h3>Burnout prevention</h3>
<p>This features monitors your health condition by measuring body temperature, heart rate, and other vital signs. You will be notified of burnouts and recommend actions to be taken will be given.</p>
</div>
<div class="container individual_container col-lg-6">
<img src="./images/music_icon.png" alt="">
<h3>Recommended relaxation activities</h3>
<p>Relaxation activities that align with your prefrences and help you relax and recharge would be recommended.</p>
</div>
</div>
</section>
<section class="container become_family_section">
<div class="blockquote text-center become_family_section_text">
<h1 class="p-5">Subscribe to Newsletter</h1>
<p>Don't miss out on this opportunity to be the first to know of our new features.
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 method="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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>