-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (169 loc) · 10.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThoughtFUL</title>
<!-- Link to favicon -->
<link rel="shortcut icon" href="images/Image.png" type="image/png">
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- jQuery CDN link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Bootstrap CDN links -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- FontAwesome CDN link -->
<script src="https://kit.fontawesome.com/733d8502fc.js" crossorigin="anonymous"></script>
<!-- Animate.css CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js"></script>
<!-- Google Fonts CDN links -->
<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=Average+Sans&family=Nunito+Sans:opsz,wght@6..12,500;6..12,600&family=Open+Sans:wght@500;600;700&family=Ubuntu:wght@500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dela+Gothic+One&effect=shadow-multiple" rel="stylesheet">
</head>
<body>
<header class="px-4 shadow">
<div class="d-flex justify-content-between align-items-center">
<div> <a href="#"><img src="images/Logo.png" alt="Logo..." class="logo"></a> </div>
<div class="brand-heading-wrap"> <a href="#" class="text-decoration-none"><h1 class="brand-heading">ThoughtFUL.</h1></a> </div>
<div class="nav-encloser">
<ul class="nav">
<li class="nav-item">
<a class="nav-link menu-item" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link menu-item" href="#browse-quotes">Browse Quotes</a>
</li>
<li class="nav-item">
<a class="nav-link menu-item" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a id="nav-icon" class="nav-link" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#browse-quotes">Browse Quotes</a></li>
<li><a class="dropdown-item" href="#contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div class="container feed-inspire animate__animated animate__slideInUp animate__fast">
<div class="row">
<div class="col-12 order-2 col-md-8 order-md-1 align-self-center">
<p class="feed-content">Raise up the spirit of life, enriching your mind with motivational thoughts everyday</p>
</div>
<div class="col-12 order-1 col-md-4 order-md-2">
<img src="images/free soul.png" alt="free soul" class="feed-img">
</div>
</div>
</div>
<div class="container feed-meditate animate__animated animate__slideInUp">
<div class="custom-shape-divider-top-1696512224">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
<div class="row">
<div class="col-12 col-md-4">
<img src="https://cdn.dribbble.com/users/935078/screenshots/6748415/payrue_master_2.gif" alt="yoga gif" class="feed-img">
</div>
<div class="col-12 col-md-8 align-self-center">
<p class="feed-content">Enhance the focus and productivity of your routine through self-consciousness, reviving the soul</p>
</div>
</div>
<div class="custom-shape-divider-bottom-1696529136">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<section id="browse-quotes">
<h2 class="browse-quotes-heading">Choose amongst the variety of categories available for displaying multiple inspiring quotes at the same time</h2>
<form id="fetch-quote">
<div class="input-group">
<select id="categories" class="form-select">
<!-- <option disabled selected value="choose">Choose amongst the category</option> -->
<option value="random">Random</option>
<option value="happiness">Happiness</option>
<option value="character">Character</option>
<option value="courage|truth|famous-quotes">Courage</option>
<option value="faith|perseverance">Faith</option>
<option value="friendship">Friendship</option>
<option value="inspirational">Inspiration</option>
<option value="life">Way of Life</option>
<option value="success">Success</option>
</select>
<input type="number" id="count" value="1" min="1" max="5">
<button class="btn btn-outline-secondary" type="submit">Show Quotes</button>
</div>
</form>
</section>
<section id="quotes-encloser">
<!-- <div id="quote-carousel" class="carousel carousel-dark slide w-75 mx-auto bg-body-secondary" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#quote-carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#quote-carousel" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<figure class="text-center">
<blockquote class="blockquote">
<i class="fa-solid fa-quote-left"></i>
<span class="quote">A well-known quote, contained in a blockquote element.</span>
<i class="fa-solid fa-quote-right"></i>
</blockquote>
<p class="blockquote-footer">
<cite title="Source Title author">Author1</cite>
</p>
</figure>
</div>
<div class="carousel-item">
<figure class="text-center">
<blockquote class="blockquote">
<i class="fa-solid fa-quote-left"></i>
<span class="quote">Another famous quote, contained in a blockquote element. with Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
<i class="fa-solid fa-quote-right"></i>
</blockquote>
<p class="blockquote-footer">
<cite title="Source Title author">Author2</cite>
</p>
</figure>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#quote-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#quote-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div> -->
</section>
<section id="contact" class="text-center mb-4">
<h2 class="contact-heading font-effect-shadow-multiple">Get in Touch</h2>
<p class="mb-2">Having some noble thoughts for the way of life and optimism to dwell upon or got any worthy ideas to share ? Let's connect.</p>
<a class="link-secondary mx-2 fs-5" rel="noopener" target="_blank" href="https://www.facebook.com/p/Nishith-Gohel-100091690946196/"><i class="fa-brands fa-facebook" id="facebook"></i></a>
<a class="link-secondary mx-2 fs-5" rel="noopener" target="_blank" href="https://www.instagram.com/nishithgohel/"><i class="fa-brands fa-instagram" id="instagram"></i></a>
<a class="link-secondary mx-2 fs-5" rel="noopener" target="_blank" href="mailto:codekotaro@gmail.com"><i class="fa-regular fa-envelope" id="mail"></i></a>
</section>
<footer class="shadow">
<h5 class="footer-text">Made with ❤ by Nishith Gohel</h5>
<p class="copyright"> <small class="text-muted">Copyright © 2023 ThoughtFUL</small> </p>
</footer>
<script src="config.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>