-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (232 loc) · 17.6 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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Primary Meta Tags -->
<meta name="title" content="Atul Anand">
<meta name="description" content="I am a multi-passionate creator. I create content based on coding, notion, my journey, psychology, literature, and entertainment.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.atulanand.co/">
<meta property="og:title" content="Atul Anand">
<meta property="og:description" content="I am a multi-passionate creator. I create content based on coding, notion, my journey, psychology, literature, and entertainment.">
<meta property="og:image" content="https://atulanand.co/assets\img\card.png">
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="632"/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.atulanand.co/">
<meta property="twitter:title" content="Atul Anand">
<meta property="twitter:description" content="I am a multi-passionate creator. I create content based on coding, notion, my journey, psychology, literature, and entertainment.">
<meta property="twitter:image" content="https://atulanand.co/assets\img\card.png">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="assets\img\favicon @57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets\img\favicon @60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets\img\favicon @72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets\img\favicon @76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets\img\favicon @114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets\img\favicon @120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets\img\favicon @144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets\img\favicon @152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets\img\favicon @180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets\img\favicon @192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets\img\favicon @32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets\img\favicon @96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets\img\favicon @16.png">
<!-- Favicon-End -->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- CSS-Connections -->
<!-- CSS Elements -->
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/navbar.css">
<link rel="stylesheet" type="text/css" href="styles/body.css">
<link rel="stylesheet" href="styles/loading/loading.css">
<!-- CSS Media Fix -->
<link rel="stylesheet" href="styles/media/navbar_media.css">
<link rel="stylesheet" href="styles/media/introduction_media.css">
<link rel="stylesheet" href="styles/media/body_media.css">
<link rel="stylesheet" href="styles/media/main_media.css">
<!-- CSS-Connections-END -->
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Atul Anand</title>
</head>
<body>
<div class="rgb_strip"></div>
<div class="loading">
<p class="loader-quote" id="quote"></p>
<img src="assets/img/loader.gif" alt="" class="loader-img">
</div>
<div class="container">
<header>
<div class="nav-bar">
<div class="logo big">
<a class = "logo" href="index">Atul Anand</a>
</div>
<div class="logo small">
<a class = "logo" href="index">Atul.</a>
</div>
<button class="hamburger" id="hamburger">
<img src="assets/img/hamburger.png" alt="bun" style="width: 20px; height: 20px; margin-right: 10px;">
</button>
<ul class="nav-list" id="nav-list">
<li class="nav-list-item"><a href="about" class="nav-list-a">About</a></li>
<li class="nav-list-item"><a href="blog" class="nav-list-a">Blog</a></li>
<li class="nav-list-item"><a href="music" class="nav-list-a">Music</a></li>
<li class="nav-list-item"><a href="collab" class="nav-list-a">Collab</a></li>
<li class="nav-list-item"><a href="products" class="nav-list-a">Products</a></li>
</ul>
</div>
</header>
<section>
<div class="introduction">
<h1 class="heading">Hey Everyone –</h1>
<div class="description" style="text-align: left;">My name is Atul Anand. I am 15 years old. I like to talk about <u>coding, notion, life, literature, music, psychology, and especially my journey</u>.</div>
<div class="description" style="text-align: left;">Like every <a target="_blank" href="https://en.wikipedia.org/wiki/Generation_Z" class="references">gen z</a>, I like to share my <u>life, journey, and achievements</u> over the internet. I am really into creating great connections with you all.</div>
<hr class="end">
</div>
</section>
<section>
<div class="direct">
<div class="card">
<a href="blog" target="_blank">
<div class="card-logo"><img class="card-logo-img" src="assets/img/blog.png" alt="blog-emoji"></div>
<h1 class="card-title">Blog</h1>
<p class="card-description">Read the articles based on Study Techniques, Productivity, and My Experiences.</p>
</a>
</div>
<div class="card">
<a href="collab" target="_blank">
<div class="card-logo"><img class="card-logo-img" style="padding-bottom: 25px;" src="assets/img/collab.png" alt="collab-emoji"> </div>
<h1 class="card-title" style="margin-top: -19px;">Collab</h1>
<p class="card-description">Collaborate and get in touch with me.</p>
</a>
</div>
<div class="card last">
<a href="products" target="_blank">
<div class="card-logo"><img class="card-logo-img" src="assets/img/products.png" alt="products-emoji"> </div>
<h1 class="card-title">Products</h1>
<p class="card-description">Get your hands with the notion templates I provide to take your efficiency to the next level.</p>
</a>
</div>
</div>
</section>
<section>
<div class="heading">Latest Products</div>
<div class="templates">
<div class="tmp-card">
<a href="https://atulanand.co/cch" target="_blank">
<img src="assets/img/templates/tmp-9.png" alt="" class="template-img">
<div class="tmp-card-description">
<div class="tmp-card-title">The Content Creation Hub</div>
<div class="tmp-price">$20</div>
</div>
</a>
</div>
<div class="tmp-card">
<a href="https://gumroad.com/l/web-dev" target="_blank">
<img src="assets/img/templates/tmp-8.png" alt="" class="template-img">
<div class="tmp-card-description">
<div class="tmp-card-title">100+ Web Dev Resources</div>
<div class="tmp-price">$0</div>
</div>
</a>
</div>
</div>
</section>
<section>
<div class="heading">Latest Articles</div>
<div class="latest-articles">
<div id="medium-widget"></div>
<script src="https://medium-widget.pixelpoint.io/widget.js"></script>
<script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/@atulacleaver","postsPerLine":1,"limit":5,"picture":"none","fields":["description","author","claps","likes","publishAt"],"ratio":"landscape"}})</script>
</div>
</section>
<!-- Follow Journey -->
<section id="twitter-section">
<div class="heading">Follow Journey</div>
<div class="description" style="text-align: left; padding-top: 3px;">In process of making this website I recored the progress of each day and here it is in the form of tweets.<br><br><a href="https://twitter.com/atulacleaver?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-lang="en" data-show-count="false"></a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div class="tweets">
<iframe class="twitter-frameboard" src="tweets/days.html" width="100%" height="725" frameborder="0" allow="encrypted-media"></iframe>
</div>
</section>
<!-- <section>
<div class="heading">Your Views</div>
<div class="description" style="text-align: left; padding-top: 3px;">Talk about your experience using this website: what can be <u>improved</u>, what you find <u>innovative</u>, any questions. I would love to answer.</div>
<div class="warning">*Please be clean with your <u>language</u>.*</div>
<div class="commentbox"></div>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>commentBox('5661687436804096-proj', {backgroundColor:'var(--background-color)', textColor:'var(--scheme)'})</script>
</section> -->
</div>
<section>
<div class="scroll-up">
<button onclick="topFunction()" id="scroll-up-btn">▲</button>
</div>
</section>
<footer class = "footer">
<div class= "footer-content">
<div class="copyright">
© <u style="color: var(--white);">Atul Anand</u> 2021. All Rights Reserved.
</div>
<div class="footer-social-icons">
<div class="footer-socials">
<a href="https://twitter.com/AtulACleaver" target="_blank">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="1.5rem" height="1.5rem">
<g id="surface63820240">
<path class="footer-icons" style="stroke:none;fill-rule:nonzero;fill: var(--white);fill-opacity:1;" d="M 48 8.601562 C 46.203125 9.398438 44.398438 10 42.398438 10.203125 C 44.398438 9 46 7 46.796875 4.796875 C 44.796875 6 42.796875 6.796875 40.601562 7.203125 C 38.601562 5.203125 36 4 33.203125 4 C 27.796875 4 23.398438 8.398438 23.398438 13.796875 C 23.398438 14.601562 23.398438 15.398438 23.601562 16 C 15.398438 15.601562 8.203125 11.796875 3.398438 5.796875 C 2.398438 7.203125 2 9 2 10.796875 C 2 14.203125 3.796875 17.203125 6.398438 19 C 4.796875 18.796875 3.203125 18.398438 2 17.796875 C 2 17.796875 2 17.796875 2 18 C 2 22.796875 5.398438 26.796875 9.796875 27.601562 C 9 27.796875 8.203125 28 7.203125 28 C 6.601562 28 6 28 5.398438 27.796875 C 6.601562 31.796875 10.203125 34.601562 14.601562 34.601562 C 11.203125 37.203125 7 38.796875 2.398438 38.796875 C 1.601562 38.796875 0.796875 38.796875 0 38.601562 C 4.398438 41.398438 9.601562 43 15 43 C 33.203125 43 43 28 43 15 C 43 14.601562 43 14.203125 43 13.796875 C 45 12.398438 46.601562 10.601562 48 8.601562 "/>
</g>
</svg>
</a>
</div>
<div class="footer-socials">
<a href="https://medium.com/@atulacleaver" target="_blank">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" width="1.5rem" height="1.5rem">
<g id="surface63913876">
<path class="footer-icons" style="stroke:none; fill-rule:nonzero;fill: var(--white);fill-opacity:1;" d="M 53.398438 1.398438 L 6.601562 1.398438 C 3.726562 1.398438 1.398438 3.726562 1.398438 6.601562 L 1.398438 53.398438 C 1.398438 56.273438 3.726562 58.601562 6.601562 58.601562 L 53.398438 58.601562 C 56.273438 58.601562 58.601562 56.273438 58.601562 53.398438 L 58.601562 6.601562 C 58.601562 3.726562 56.273438 1.398438 53.398438 1.398438 Z M 49.609375 45.601562 L 34.1875 45.601562 L 34.1875 44.734375 L 37.800781 41.558594 L 37.800781 23.421875 L 28.929688 45.601562 L 27.546875 45.601562 L 17.648438 23.246094 L 17.648438 39.074219 L 22.175781 44.734375 L 22.175781 45.601562 L 10.390625 45.601562 L 10.390625 44.734375 L 15.066406 39.074219 L 15.066406 20.246094 L 10.910156 15.046875 C 10.910156 15.046875 10.910156 14.296875 10.910156 14.414062 L 22.289062 14.414062 L 31.125 33.53125 L 38.75 14.414062 L 49.550781 14.414062 L 49.550781 15.046875 L 45.601562 18.367188 L 45.601562 41.558594 L 49.609375 44.734375 Z M 49.609375 45.601562 "/>
</g>
</svg>
</a>
</div>
<div class="footer-socials">
<a href="https://github.com/AtulACleaver" target="_blank">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="1.5rem" height="1.5rem">
<g id="surface65047719">
<path class="footer-icons" style=" stroke:none;fill-rule:nonzero;fill:var(--white);fill-opacity:1;" d="M 21.382812 0.4375 C 10.433594 1.628906 1.628906 10.433594 0.4375 21.144531 C -0.988281 33.042969 6.386719 43.277344 16.859375 46.609375 L 16.859375 41.136719 C 16.859375 41.136719 15.90625 41.375 14.71875 41.375 C 11.386719 41.375 9.957031 38.519531 9.71875 36.851562 C 9.480469 35.898438 9.007812 35.1875 8.292969 34.472656 C 7.578125 34.234375 7.339844 34.234375 7.339844 33.996094 C 7.339844 33.519531 8.054688 33.519531 8.292969 33.519531 C 9.71875 33.519531 10.910156 35.1875 11.386719 35.898438 C 12.574219 37.804688 14.003906 38.28125 14.71875 38.28125 C 15.671875 38.28125 16.382812 38.042969 16.859375 37.804688 C 17.097656 36.136719 17.8125 34.472656 19.238281 33.519531 C 13.765625 32.328125 9.71875 29.234375 9.71875 24 C 9.71875 21.382812 10.910156 18.765625 12.574219 16.859375 C 12.339844 16.382812 12.101562 15.195312 12.101562 13.527344 C 12.101562 12.574219 12.101562 11.148438 12.8125 9.71875 C 12.8125 9.71875 16.144531 9.71875 19.476562 12.8125 C 20.667969 12.339844 22.335938 12.101562 24 12.101562 C 25.664062 12.101562 27.332031 12.339844 28.761719 12.8125 C 31.855469 9.71875 35.425781 9.71875 35.425781 9.71875 C 35.898438 11.148438 35.898438 12.574219 35.898438 13.527344 C 35.898438 15.433594 35.660156 16.382812 35.425781 16.859375 C 37.089844 18.765625 38.28125 21.144531 38.28125 24 C 38.28125 29.234375 34.234375 32.328125 28.761719 33.519531 C 30.1875 34.710938 31.140625 36.851562 31.140625 38.992188 L 31.140625 46.847656 C 40.898438 43.753906 47.800781 34.710938 47.800781 24.238281 C 47.800781 9.957031 35.660156 -1.226562 21.382812 0.4375 Z M 21.382812 0.4375 "/>
</g>
</svg>
</a>
</div>
<div class="footer-socials footer-last">
<a href="https://gumroad.com/atulacleaver" target="_blank">
<img class="footer-icons footer-gumroad" src="assets/img/social-icons/gumroad.svg" alt="gumroad">
</a>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="script/navbar.js"></script>
<script type="text/javascript" src="script/scroll-up.js"></script>
<script type="text/javascript" src="script/main.js"></script>
<!-- Start Tribed Pixel Snippet -->
<script>
!function(e,t,n,i,a,r,c,p,s){e[a]||((c=e[a]=function(){c.process?c.process.apply(c,arguments):c.queue.push(arguments)}).queue=[],c.t=1*new Date,(p=t.createElement(n)).async=1,p.src="https://tribed.co/pixel/pixel.min.js?t="+864e5*Math.ceil(new Date/864e5),(s=t.getElementsByTagName(n)[0]).parentNode.insertBefore(p,s))}(window,document,"script",0,"tribed"),tribed("init","TR-3187225312"),tribed("event","pageload");
</script>
<!-- End Tribed Pixel Snippet -->
</body>
</html>
<!-- <?xml version="1.0" encoding="UTF-8"?>
<svg class="footer-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" width="1.5rem" height="1.5rem">
<g id="surface65231931">
<path class="footer-icons" style=" stroke:none;fill-rule:nonzero;fill:var(--white);fill-opacity:1;" d="M 32 4.398438 C 22.621094 4.398438 14.320312 5.371094 9.269531 6.125 C 5.136719 6.734375 1.847656 9.96875 1.09375 14.121094 C 0.445312 17.75 -0.199219 23.050781 -0.199219 29.699219 C -0.199219 36.347656 0.445312 41.648438 1.09375 45.277344 C 1.847656 49.429688 5.136719 52.644531 9.269531 53.273438 C 14.335938 54.03125 22.675781 55 32 55 C 41.324219 55 49.644531 54.03125 54.710938 53.273438 L 54.730469 53.273438 C 58.863281 52.664062 62.152344 49.429688 62.90625 45.277344 C 63.554688 41.632812 64.199219 36.332031 64.199219 29.699219 C 64.199219 23.050781 63.554688 17.75 62.886719 14.121094 C 62.152344 9.96875 58.863281 6.734375 54.730469 6.125 C 49.679688 5.371094 41.378906 4.398438 32 4.398438 Z M 32 9 C 41.054688 9 49.160156 9.933594 54.046875 10.671875 C 56.203125 10.996094 57.945312 12.683594 58.359375 14.929688 C 58.972656 18.324219 59.601562 23.355469 59.601562 29.699219 C 59.601562 36.042969 58.972656 41.074219 58.378906 44.453125 C 57.964844 46.714844 56.222656 48.40625 54.046875 48.730469 C 49.125 49.449219 41.003906 50.398438 32 50.398438 C 22.996094 50.398438 14.859375 49.449219 9.953125 48.730469 C 7.796875 48.40625 6.035156 46.714844 5.621094 44.453125 C 5.027344 41.054688 4.398438 36.042969 4.398438 29.699219 C 4.398438 23.339844 5.027344 18.324219 5.621094 14.929688 C 6.035156 12.683594 7.777344 10.996094 9.933594 10.6875 L 9.953125 10.6875 C 14.839844 9.953125 22.945312 9 32 9 Z M 22.800781 18.199219 L 22.800781 41.199219 L 45.800781 29.699219 Z M 22.800781 18.199219 "/>
</g>
</svg> -->