Skip to content

Commit c0fb893

Browse files
mr-195mr-195
committed
Added all the necessary files
0 parents  commit c0fb893

File tree

3 files changed

+263
-0
lines changed

3 files changed

+263
-0
lines changed

‎index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
6+
</style>
7+
<title>My Blog</title>
8+
<link rel="stylesheet" type="text/css" href="style.css" />
9+
<script src="script.js"></script>
10+
</head>
11+
<body>
12+
<header>
13+
<h1 contenteditable data-text="Grow">My blog Page</h1>
14+
</header>
15+
<div class="warning"><MARQUEE>This webpage is under development!</MARQUEE></div>
16+
<main>
17+
<section id="blog-list">
18+
<article class="blog-post">
19+
<h3 style="display: block; color: aliceblue;align-self: center; background-color: rgb(53, 0, 0); border-radius: 10px; text-align: center; width: 40vw;">Bugs Unleashed: The Hilarious Adventures of Coding Chaos</h3>
20+
<p style="align-self: center; text-align: justify; color: rgb(255, 255, 255); border-radius: 10px;">
21+
If you are reading this blog, well it's my first blog and I'm glad
22+
you're here! <br />
23+
We all have experienced bugs in our life - I mean programming bugs.
24+
(The other ones are nice except for a few). These programming bugs
25+
are hell deadly coz they not only affect a li'l bit of program which
26+
you've written but also you're mental health - well we go into
27+
various head-scratching moment where we pray to god(if you're an
28+
atheist.... well look for yourselves). What is a bug in programming
29+
- well bugs are like elusive clowns, hiding in the shadows and
30+
popping up when you least expect them, ready to give you a good
31+
laugh (or cry) as you desperately try to catch them. These range
32+
from a simple typo in your code where you wrote max as a variable
33+
and wondering why the heck the function is not working to the
34+
programmers most formidable enemy - 'The segmentation fault' . If
35+
you encounter this in C ... RIP my friend. <br />
36+
But on the brighter side- we have various debugging tools like gdb -
37+
GNU Debugger and Valgrind (the grind part is true *_*) which are the
38+
saviours - if and only if you know how to use them. But its the best
39+
part is when you find the bug and your program starts working (as it
40+
should) , the level of dopamine release is exhilarating and you
41+
imagine yourself as the king of world but soon do you realize
42+
there's another bug and you enter the state of grief. See here you
43+
need a coffee break - now you have your coffee - you come back and
44+
this process of finding bugs continue untill the software gets
45+
outdated and a newer version is released, but damn this also
46+
contains bugs - so it's a never ending cycle of bug finding and
47+
fixing!
48+
</p>
49+
</article>
50+
<!-- Blog posts will be dynamically added here -->
51+
</section>
52+
53+
<section id="create-post">
54+
<h2>Create a New Post</h2>
55+
<form id="blog-form">
56+
<label for="title">Title:</label>
57+
<input type="text" id="title" required />
58+
<label for="content">Content:</label>
59+
<textarea id="content" required></textarea>
60+
<button type="submit">
61+
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
62+
>Don't Click</a
63+
>
64+
</button>
65+
</form>
66+
</section>
67+
</main>
68+
69+
<footer>&copy; 2023 Manaswi Raj</footer>
70+
</body>
71+
</html>

‎script.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
document.getElementById("blog-form").addEventListener("submit", function(event) {
3+
event.preventDefault();
4+
5+
var title = document.getElementById("title").value;
6+
var content = document.getElementById("content").value;
7+
8+
var postElement = document.createElement("article");
9+
postElement.classList.add("blog-post");
10+
11+
var titleElement = document.createElement("h3");
12+
titleElement.textContent = title;
13+
14+
var contentElement = document.createElement("p");
15+
contentElement.textContent = content;
16+
17+
postElement.appendChild(titleElement);
18+
postElement.appendChild(contentElement);
19+
20+
var blogList = document.getElementById("blog-list");
21+
blogList.appendChild(postElement);
22+
23+
document.getElementById("title").value = "";
24+
document.getElementById("content").value = "";
25+
});
26+
});
27+
28+
var h1 = document.querySelector("h1");
29+
30+
h1.addEventListener("input", function() {
31+
this.setAttribute("data-text", this.innerText);
32+
});

‎style.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
body {
2+
font-family: Roboto, Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
header {
8+
background-color: #333;
9+
color: #fff;
10+
padding: 20px;
11+
}
12+
13+
h1 {
14+
margin: 0;
15+
}
16+
17+
main {
18+
margin: 20px;
19+
}
20+
21+
#blog-list {
22+
margin-bottom: 20px;
23+
24+
}
25+
26+
.blog-post {
27+
display: flex;
28+
flex-direction: column;
29+
margin-bottom: 20px;
30+
padding: 10px;
31+
border: 1px solid #ddd;
32+
border-radius: 10px;
33+
background-color: #328a26;
34+
opacity: 80%;
35+
}
36+
37+
.blog-post h3 {
38+
margin-top: 0;
39+
text-align: center;
40+
}
41+
42+
#blog-form label {
43+
display: block;
44+
margin-top: 10px;
45+
}
46+
47+
#blog-form input,
48+
#blog-form textarea {
49+
width: 100%;
50+
padding: 5px;
51+
margin-bottom: 10px;
52+
}
53+
54+
#blog-form button {
55+
background-color: #f00;;
56+
color: #fff;
57+
padding: 10px 20px;
58+
border: none;
59+
cursor: pointer;
60+
61+
}
62+
a{text-decoration: none;}
63+
footer {
64+
background-color: #333;
65+
color: #fff;
66+
text-align: center;
67+
padding: 10px;
68+
}
69+
70+
71+
72+
@font-face {
73+
font-family:'Decovar Regular24';
74+
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf');
75+
}
76+
77+
h1 {
78+
margin: 0;
79+
font-size: 20vw;
80+
position: relative;
81+
font-weight: 400;
82+
/* // Variable font */
83+
font-family: "Decovar Regular24";
84+
font-variation-settings: 'INLN' 400, 'SWRM' 1000;
85+
86+
87+
/* // Background clip to image */
88+
-webkit-background-clip: text;
89+
-webkit-text-fill-color: transparent;
90+
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/209708058_b5a5fb07a6_o.jpg);
91+
background-size: 30%;
92+
background-repeat: repeat;
93+
94+
text-shadow: 2px 2px 5px rgba(#2a4308, 0.4);
95+
animation: grow 3s linear infinite alternate;
96+
97+
&:before {
98+
text-shadow:
99+
1px 1px 2px rgba(#2a4308, 0.5),
100+
-1px 1px 2px rgba(#2a4308, 0.5),
101+
-1px -1px 2px rgba(#2a4308, 0.5),
102+
1px -1px 2px rgba(#2a4308, 0.5),
103+
3px 3px 20px rgba(#000, 0.5);
104+
}
105+
106+
&:after {
107+
color: #421F00;
108+
font-variation-settings: 'INLN' 0;
109+
}
110+
}
111+
112+
.warning{
113+
background-color: black;
114+
color: white;
115+
text-align: center;
116+
}
117+
118+
@keyframes grow {
119+
0% {
120+
font-variation-settings: 'INLN' 400, 'SWRM' 1000;
121+
}
122+
123+
100% {
124+
font-variation-settings: 'INLN' 400, 'SWRM' 0;
125+
}
126+
}
127+
128+
129+
/* //Positioning */
130+
html {
131+
height: 100%;
132+
}
133+
134+
body {
135+
background: radial-gradient(ellipse at center, #adbf41 20%,#328a26 80%);
136+
height: 100%;
137+
}
138+
139+
h1 {
140+
display: flex;
141+
align-items: center;
142+
justify-content: center;
143+
width: 100%;
144+
height: 100%;
145+
text-align: center;
146+
letter-spacing: 0.6rem;
147+
148+
&:after, &:before {
149+
content: attr(data-text);
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
width: 100%;
154+
height: 100%;
155+
z-index: -1;
156+
position: absolute;
157+
left: 0;
158+
top: 0;
159+
}
160+
}

0 commit comments

Comments
 (0)