Sebastian/about.html at master · Klrfl/Sebastian · GitHub

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
<!DOCTYPE html>
<html lang="en">
    <head>
		<!--Style link-->
		<link rel="stylesheet" href="CSS/styles.css">

		<title>Sebastian | About Me</title>
		<meta title="viewport" content="width:device-width,initial-scale=1.0">
		<meta charset="UTF-8">
	</head>

    <body>
        <nav> <!--When assigning position: sticky, the nav should not be in any other tags. Otherwise it would not work-->
			<div class="logo">
				<a href="#">a fancy logo</a>
			</div>

            <ul id="sidebar">
				<li><a href="home.html">Home</a></li>
				<li><a class="active" href="about.html">About</a></li>
				<li><a href="donate.html">Donate</a></li>
				<li><a href="contact.html">Contact Me</a></li>
				<li><a class="Account" href="account.html">Log In</a></li>
			</ul>

            <div class="burger">
				<button id="openSidebar"></button>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</nav>

        <main>
            <article>
                <Section>
                    <h2>Who are you?</h2>
                    <p>I am an aspiring front-end web developer, also an avid motorsport fan. I edit on Wikipedia when I have free time.</p>
                    <h2>Why are you making this?</h2>
                    <p>I'm currently learning HTML, CSS, and JS. I need a project to work on, so I made this page. Maybe someday I'll make a fully working website dedicated to Sebastian.</p>
                    <p>Note that I am not a beginner, so any constructive criticism is welcome! Fuck off if you just want to troll.</p>
                </Section>

                <section>
                    <h2>I may be a noob, but...</h2>
                    <p>You can check out these pens I made on CodePen and support me. Maybe even teach me a thing or two about web dev!</p>
                </section>
                <!--pens-->
                <div class="pen">
                    <!--first iframe-->
                    <iframe scrolling="no" src="https://codepen.io/Klrfl/embed/VwWBOoK?default-tab=html%2Cresult&editable=true&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
                        See the Pen <a href="https://codepen.io/Klrfl/pen/VwWBOoK">
                        Wanted to make a Navbar, and a Go To Top Button</a> by Efraim Munthe (<a href="https://codepen.io/Klrfl">@Klrfl</a>) on <a href="https://codepen.io">CodePen</a>.
                    </iframe>

                    <!--second iframe-->
                    <iframe scrolling="no" src="https://codepen.io/Klrfl/embed/eYEBLgJ?default-tab=html%2Cresult&editable=true&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
                        See the Pen <a href="https://codepen.io/Klrfl/pen/eYEBLgJ">
                        Wanted to make Hover FXs</a> by Efraim Munthe (<a href="https://codepen.io/Klrfl">@Klrfl</a>) on <a href="https://codepen.io">CodePen</a>.
                    </iframe>
                </div>
                <!--end of pens-->
            </article>
        </main>

        <footer>
            <hr>
            <p>Made by Efraim Munthe, 2021. All rights reserved.</p>
        </footer>
    </body>
</html>