Skip to content

Commit 6411807

Browse files
cmlpolymathcmlpolymath
authored
overhaul of the entire page
Background, div elements...everything except the text
1 parent a3c46ee commit 6411807

1 file changed

Lines changed: 90 additions & 18 deletions

File tree

‎index.html‎

Lines changed: 90 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,89 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Notebooks</title>
6+
<title>Book Animation</title>
87
<style>
8+
/* TailwindCSS - Minimal Styles */
99
body {
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 90vh;
14+
margin: 0;
15+
background-color: #1a202c;
16+
overflow: hidden;
1017
font-family: 'cambria', sans-serif;
1118
line-height: 1.6;
1219
font-size: 16px;
13-
background-color: #010d42;
14-
background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYXF6anRobWxpdzFvazBtbGg5czUzZDZrb2FyNWI0ZHlxaDZiZjJtYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7E8lI6TkLrvvAcPXso/giphy.gif');
15-
background-attachment: fixed;
16-
background-size: 1200px;
17-
background-repeat: 2;
18-
background-position: left;
1920
}
2021
.container {
21-
max-width: 900px;
22+
max-width: 800px;
23+
width: auto;
24+
box-sizing: border-box;
2225
margin: auto;
2326
padding: 20px;
27+
position: absolute;
28+
/* opacity: 95%; */
2429
}
30+
#rain-container {
31+
position: relative;
32+
width: 100%;
33+
height: 100%;
34+
}
35+
36+
.book {
37+
position: absolute;
38+
bottom: 100%;
39+
font-size: 3rem;
40+
animation: fall linear infinite;
41+
}
42+
43+
@keyframes fall {
44+
to {
45+
transform: translateY(100vh);
46+
}
47+
}
48+
2549
.notebook-cover {
2650
text-align: center;
2751
padding: 50px;
28-
background-color: #b2e2f8; /* This will be visible while GIF is loading or if the path to the GIF is incorrect */
29-
background-size: cover;
30-
background-repeat: no-repeat;
31-
background-position: center;
52+
background-color: #b2e2f8;
3253
color: #333;
3354
border-radius: 10px;
34-
box-shadow: 0 5px 15px rgba(0,0,0,2);
55+
box-shadow: 0 5px 15px rgba(0,0,0,.3);
56+
opacity: 98%;
3557
margin-bottom: 30px;
3658
}
3759
h1 {
3860
color: #556b2f;
61+
font-size: 40px;
62+
}
63+
@keyframes fadeInScale {
64+
0% {
65+
opacity: 0;
66+
transform: scale(0.9);
67+
}
68+
100% {
69+
opacity: 1;
70+
transform: scale(1);
71+
}
72+
}
73+
74+
h1 span {
75+
display: inline-block;
76+
opacity: 0;
77+
animation: fadeInScale 1.5s ease forwards;
78+
color: #daa520;
79+
}
80+
@keyframes spin {
81+
0% { transform: rotate(0deg); }
82+
100% { transform: rotate(360deg); }
83+
}
84+
85+
.spinning-book {
86+
display: inline-block;
87+
animation: spin 2s linear infinite;
3988
}
4089
.section-title {
4190
color: #41339c;
@@ -49,22 +98,45 @@
4998
</style>
5099
</head>
51100
<body>
101+
<div id="rain-container" class="absolute inset-0 overflow-hidden"></div>
102+
<script>
103+
const rainContainer = document.getElementById('rain-container');
104+
105+
function createBook() {
106+
const book = document.createElement('div');
107+
book.className = 'book';
108+
book.style.left = `${Math.random() * 100}vw`;
109+
book.style.animationDuration = `${Math.random() * 2 + 2}s`;
110+
book.textContent = Math.random() > 0.5 ? '📖' : '📒';
111+
rainContainer.appendChild(book);
112+
113+
setTimeout(() => {
114+
book.remove();
115+
}, (Math.random() * 2 + 2) * 1000);
116+
}
117+
118+
setInterval(createBook, 100);
119+
</script>
52120
<div class="container">
53121
<div class="notebook-cover">
54122
<h1><span style="color:#daa520;">✨ CML Polymath Notebooks ✨</span></h1>
55123
<p>Welcome to this repository, which contains all the notebooks based on Data Science books I've read.
56-
The purpose of this repository is to show my journey through the field and, most importantly, <b>to share the knowledge.</b>
124+
The purpose of this repository is to show my journey through the field and, most importantly, <b>to share the knowledge.</b>
57125
</p>
126+
58127
<hr>
128+
59129
<p class="section-title">Each series of notebooks is dedicated to a specific book and contains the following sections:</p>
130+
60131
<ul>
61132
<li><strong>Book Information:</strong> <em>Title, Author, Publication Year,</em> and a brief summary.</li>
62133
<li><strong>Key Takeaways:</strong> The most important points and ideas from the book.</li>
63134
<li><strong>General Notes:</strong> Terms, caveats, and the code written step-by-step</li>
64-
<li><strong>Discussion Questions:</strong> Questions to spark conversations and debates about the book's content.</li>
135+
<li><strong>Discussion:</strong> Comments about the material to spark conversation</li>
65136
</ul>
66-
<p>Feel free to explore the notebooks, contribute your own insights, and join the discussion. <i>Happy reading!</i></p>
67-
<!-- Add notebook entries here -->
137+
138+
<p>Feel free to explore the notebooks, contribute your own insights, and join the discussion. <br><i>Happy reading!</i></br></p>
139+
</div>
68140
</div>
69141
</body>
70142
</html>

0 commit comments

Comments
 (0)