-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (151 loc) · 7.7 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
<!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>notNotion - The Ultimate Productivity Assistant</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<link rel="stylesheet" href="./master.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="navbar">
<a href="index.html" class="logo">
<img src="./Images/logo.svg" alt="notNotion">
<span>notNotion</span>
</a>
<nav>
<ul class="nav-items">
<li>
<a href="./Online Quiz/index.html">Quiz</a>
</li>
<li>
<a href="./Kanban Application/index.html">Progress Board</a>
</li>
<li>
<a href="./Budget Tracker/index.html">Budget Manager</a>
</li>
<li>
<a href="./Todo List/index.html">Todo List</a>
</li>
<span class="newsletter">Join Newsletter</span>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<section class="homepage">
<div class="text-wrap">
<h1 class="title">The Ultimate Productivity Assistant</h1>
<h2 class="subtitle">Manage Tasks, Bookmarks, Write Notes and Organize Projects. notNotion Is the Fastest Way to Get Work Done.</h2>
<p><span class="newsletter">Join Newsletter</span></p>
</div>
<div class="visual-wrap">
<img src="./Images/productive.svg" alt="notNotion">
</div>
</section>
<section class="carousel">
<!-- Swiper -->
<div #swiperRef="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./Images/quiz.png" alt="">
<p>Online Quiz</p>
</div>
<div class="swiper-slide">
<img src="./Images/bookmark-manager.png" alt="">
<p>Bookmark Manager</p>
</div>
<div class="swiper-slide">
<img src="./Images/kanban.png" alt="">
<p>Progress Board</p>
</div>
<div class="swiper-slide">
<img src="./Images/budget-manager.png" alt="">
<p>Budget Manager</p>
</div>
<div class="swiper-slide">
<img src="./Images/todo-list.png" alt="">
<p>Todo List</p>
</div>
<div class="swiper-slide">
<img src="./Images/news.png" alt="">
<p>News</p>
</div>
</div>
</div>
<div class="swiper-button-wrapper">
<div class="swiper-prev">
<i class="bi bi-arrow-left"></i>
</div>
<div class="swiper-next">
<i class="bi bi-arrow-right"></i>
</div>
</div>
</section>
<section class="accordions">
<p class="faq">Frequently Asked Questions</p>
<div class="accordion">
<div class="title">HOW DO I FIGURE OUT WHAT TO LEARN?</div>
<div class="content">The most important thing is that you want to learn something that interests you, because once you start learning, you’ll be with this topic for a while. Choosing something just because it’s popular or what others are doing isn’t the way to go because if you don’t have a true interest in it, you’ll lose the motivation to learn! Spend some time seriously looking into the different tech career paths before choosing one to go down.</div>
</div>
<div class="accordion">
<div class="title">IS IT POSSIBLE TO DO BOTH GRAPHIC DESIGN AND CODING?</div>
<div class="content">If you have an interest in coding and graphic design, then there’s nothing to say you shouldn’t learn skills in both areas. They often work hand-in-hand, so having knowledge and skills in both areas could be desirable for certain career paths. You could also think about pursuing something in between like UI design, which is a very in-demand career right now!</div>
</div>
<div class="accordion">
<div class="title">SHOULD I LEARN PYTHON 2 OR PYTHON 3?</div>
<div class="content">Now, in 2020, it’s a no-brainer: Python 3 is definitely the way to go. There are still some situations where picking up Python 2 might be advantageous, or you may just want to learn a little of the history and the differences between Python 2 and 3 for curiosity’s sake, but job-wise, Python 3 is the clear winner.</div>
</div>
<div class="accordion">
<div class="title">SHOULD I LEARN SKILLS IN SEVERAL AREAS, OR FOCUS ON ONE THING IN PARTICULAR?</div>
<div class="content">Personally, I’d say choose a path and stick to it! Learning too many things at once will slow you down. Here are a few ideas of things you can choose to focus on, and a little bit about each one.</div>
</div>
</section>
<section class="tagline">
<img src="./images/logo.svg" alt="notNotion">
<p class="main">Try notNotion today!</p>
<p class="sub">Plan, Organize, and Execute Your Projects.</p>
<span class="newsletter">Join Newsletter</span>
</section>
</div>
</main>
<footer>
<div class="container">
<div class="footer">
<div class="brand-name">
<span>© notNotion by Rucha</span>
</div>
<div class="social-icons">
<i class="bi bi-twitter social"></i>
<i class="bi bi-linkedin social"></i>
<i class="bi bi-youtube social"></i>
<i class="bi bi-instagram social"></i>
</div>
</div>
</div>
<section class="modal">
<div class="newsletter-modal">
<p>Join Newsletter Now!</p>
<form>
<input type="text" name="name" placeholder="Name" autocomplete="off">
<input type="email" name="email" placeholder="Email" autocomplete="off">
<input type="submit" value="Submit">
</form>
<i class="bi bi-x-lg close"></i>
</div>
</section>
</footer>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="./main.js"></script>
</body>
</html>