-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (75 loc) · 3.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://use.fontawesome.com/528146ae6e.js"></script>
<link rel="icon" type="image/svg+xml" href="img/heart.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>at 1st SITE</title>
</head>
<body>
<a id="start"></a>
<div class="header-menu">
<ul class="nav-list">
<li class="nav-item"><i class="fa fa-heart" id="heart"></i> AT 1ST SITE</li>
<li class="nav-item"><span><a href="html.html">HTML</a></span></li>
<li class="nav-item"><a href="css.html">CSS</a></li>
<li class="nav-item"><a href="js.html">JS</a></li>
<li class="nav-item"><a href="python.html">Python</a></li>
</ul>
</div>
<div class="hero-container">
<div class="hero-left">
<div class="hero-main">CODING FUN</div>
<div class="hero-secondary">
<p>This is the first site I ever made with HTML and CSS. So far I don't know much about Flexbox and Grid and all
that but I will keep learning. Next steps will be to learn more Javascript and Frameworks with the help of The Odin Project.</p>
</div>
<div class="btn-link"><a href="#end"><button class="hero-btn">Read more</button></a></div>
</div>
<div class="hero-right">
<div class="hero-img"><img src="img/laptop.avif"></div>
</div>
</div>
<main>
<h1>CODING IS CHALLENGING BUT REWARDING</h1>
<div class="main-container-upper">
<div><a href="html.html"><img src="img/html.jpg" width="200px" height="auto"></a>
<p>HTML isn't actually a coding language but a markup language that serves as the backbone of a website.</p>
</div>
<div><a href="css.html"><img src="img/css.jpg" width="200px" height="auto"></a>
<p>CSS is what gives all the elements defined in the HTML structure a layout and what makes (theoretically) a site pretty.</p>
</div>
<div><a href="js.html"><img src="img/js.jpg" width="200px" height="auto"></a>
<p>Javascript makes a site more responsive than can be achieved with with CSS alone. It is a coding language.</p>
</div>
<div><a href="python.html"><img src="img/python.jpg" width="200px" height="auto"></a>
<p>Python is a coding language that is a good starting point as its code is very readable.</p>
</div>
</div>
<div class="quote-container">
<p>“The single greatest skill I have picked up for my professional life has been learning how to code. Had I not
learned to code, I would have been out of work years ago. It’s been liberating and very lucrative.”</p>
<span>– Daniel Davidson</span>
</div>
<div class="main-container-lower">
<div class="main-container-lower-box">
<div class="main-container-lower-caption">So what are you waiting for?<p class="main-container-lower-paragraph">
All the tutorials and materials are out there and are waiting to be studied. Most importantly: do it! try
it! fail! repeat!</p>
</div><a href="#start"><button class="main-container-lower-btn">LET'S GO!</button></a>
</div>
</div>
<div class="divider"></div>
</main>
</body>
<footer>
<a id="end"></a>
<div class="footer-text">Made with literally no knowledge at all.</div>
</footer>
</html>