anthony-figueroa/vikram-physics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
vikram-physics/page2.html

1716 lines
19 KiB
HTML
Raw Permalink Normal View History

publish: vikram-physics
2026-07-18 21:42:30 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
< meta charset="UTF-8" >
< meta name="viewport" content="width=device-width, every-scale=1.0" >
<title >How I Learned to Love CSS</title >
< style >
body {
font-family: 'Courier New', Courier, monospace;
background-color: #1e1e1e;
color: #d4d4d4;
padding: 20px;
line-height: 1.6;
}
h1 {
font-size: 3 em;
color: #007acc;
}
h2 {
font-size: 2 em;
color: #4ec9b0;
}
.code-block {
background-color: #252526;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
font-size: 1.2em;
white-space: pre-wrap;
overflow-x: auto;
}
.comment {
color: #6a9955;
}
.keyword {
color: #569cd6;
}
.string {
color: #ce9178;
}
.function {
color: #dcdcaa;
}
.variable {
color: #9cdcfe;
}
.link {
color: #007acc;
text-decoration: none;
font-weight: bold;
}
.link:hover {
text-decoration: underline;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.gallery-item {
max-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
.gallery-item .caption {
padding: 10px;
background-color: #252526;
color: #d4d4d4;
font-size: 0.9em;
}
</ style >
</head >
<body >
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
<h1 >How I Learned to Love CSS</h1 >
<p >It was 2012. I was trying to make a website look good. But I didn't know how to use CSS. So I just used tables and frames and inline styles. And then I realized that I had made a mess. So I decided to learn CSS. And it was the best decision I ever made. Now I can make websites look like a work of art. And I can also make them look like a disaster. It's all about the CSS.</p >
<h2 >The CSS Journey</h2 >
<div class="code-block" >
<span class="keyword" >body</span > {
<span class="comment" >/* This is a disaster, but it works. */</span >
<span class="keyword" >background-color</span >: #1e1e1e;
<span class="keyword" >color</span >: #d4d4d4;
<span class="keyword" >font-family</span >: 'Courier New', Courier, monospace;
<span class="keyword" >padding</span >: 20px;
<span class="keyword" >line-height</span >: 1.6;
}
<span class="comment" >/* This was the first time I learned that CSS is like a painting. You can make anything look good. */</span >
</div >
<h3 >Gallery of Glitches</h3 >
<div class="gallery" >
<div class="gallery-item" >
<img src="https://images.pexels.com/photos/1921326/pexels-photo-1921326.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A screenshot of a code editor with a million errors." >
<div class="caption" >The first time I tried to deploy a website. It was a disaster.</div >
</div >
<div class="gallery-item" >
<img src="https://images.pexels.com/photos/270632/pexels-photo-270632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A picture of a server room with a sign that says "DO NOT TOUCH"." >
<div class="caption" >The server room where I once accidentally deleted a database. Oops.</div >
</div >
<div class="gallery-item" >
<img src="https://images.pexels.com/photos/7107487/pexels-photo-7107487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A photo of me trying to explain code to my grandma." >
<div class="caption" >My grandma is the only person who understands my code. She's also the best listener.</div >
</div >
</div >
<h3 >More Stories</h3 >
<p >Check out my other pages for more tales of triumph and tragedy in the world of code.</p >
<ul >
<li ><a href="index.html" class="link" >Back to the homepage</a ></li >
<li ><a href="page1.html" class="link" >The Time I Accidentally Deleted a Database</a ></li >
<li ><a href="page3.html" class="link" >My First Hackathon (and the pizza I ate)</a ></li >
</ul >
<p >Thanks for visiting! If you have a story about a time you fixed something, drop me a line. Let's celebrate the spark that makes us all better coders.</p >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body >
</html >
</body
Reference in New Issue Copy Permalink