generated from lsburtonBYU/css-fonts-button
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (74 loc) · 5.48 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mattia's first website, yippe">
<title>home - Mattia's first website!</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<!-- <link rel="manifest" href="images/site.webmanifest"> -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="container">
<!-- background image -->
<img class="gfg"
src=
"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/897fca0f-1fed-44fb-a031-c90db43013e4/dgddg1m-e3ea680a-49da-45a5-8edd-f691a348f6fe.jpg/v1/fill/w_1095,h_730,q_70,strp/sunflower_tem_by_caiobella_dgddg1m-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODU0IiwicGF0aCI6IlwvZlwvODk3ZmNhMGYtMWZlZC00NGZiLWEwMzEtYzkwZGI0MzAxM2U0XC9kZ2RkZzFtLWUzZWE2ODBhLTQ5ZGEtNDVhNS04ZWRkLWY2OTFhMzQ4ZjZmZS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.ZcHoSIWgesUT8T25psHmTM056u-_azA4lJLPOGc_dc0">
<!-- title and tag line -->
<div class="logo">
<h1>This is Mattia's first website</h1>
<p>I have no idea what im doing!!</p>
</div>
</div>
<p>Woah I didn't realize that I should have been making a serious page this whole time! Ahahah this is my first webside and I'm still figuering things out!</p>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<!--<li><a href="/index.html">Home</a></li>??? okay so it sounds like i don't need to add the forward slash -->
<li><a href="about/">About</a></li>
<li><a href="contact/">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome to my shoddy art site!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida in fermentum. Eu non diam phasellus vestibulum lorem sed. Eu turpis egestas pretium aenean. Id consectetur purus ut faucibus pulvinar elementum integer enim. Sed cras ornare arcu dui. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Metus vulputate eu scelerisque felis imperdiet. Urna cursus eget nunc scelerisque viverra mauris in. Ipsum dolor sit amet whale consectetur adipiscing elit duis. Orci ac auctor augue mauris augue neque gravida. Lacus viverra vitae congue eu. Porttitor eget dolor morbi non. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. At consectetur lorem donec massa sapien faucibus et molestie ac. Dignissim suspendisse in est ante in nibh mauris cursus. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Lacinia quis vel eros donec ac odio tempor orci.</p>
<a class="button" href="#"> This link will look like a button
</a>
<p>Varius vel pharetra vel turpis nunc eget lorem dolor. Eleifend donec pretium vulputate sapien. Placerat orci nulla pellentesque dignissim enim sit. Placerat duis ultricies lacus sed turpis. Sagittis vitae et leo duis. Proin fermentum leo vel orci porta non pulvinar. Dignissim convallis aenean et tortor at risus viverra adipiscing. Placerat vestibulum lectus mauris ultrices. </p>
</article>
<article>
<h2>Modern Problems…</h2>
<p><strong>modern solutions</strong></p>
<p>If I use my own artwork for the images on this website I won’t have to worry about finding Copyright free images, which is something I really don’t want to worry about right now.</p>
</article>
</main>
<aside>
<p>This is an aside! I'm still not quite sure how to use it! <em> It also will have an example of the "em" tag.</em></p>
</aside>
<article>
<h2>I needed to as this, but i can hide it later</h2> <!-- why do it need it? this is like my title for my artical section. this helps with screen readers and Artical must have a heading -->
<figure>
<img src="images/bel-smaller.png" alt="Portrait of a red dragon surrounded by fog at night. She is looking slightly behind her and has glowing yellow scales."
height="900" width="720">
<figcaption>Bel, a large red dragon</figcaption> <!-- Figuers do not HAVE to be in artical tags-->
</figure>
<picture>
<source media="(max-width: 499px)" srcset="images/iski-on-gold-200px.jpg"/>
<source media="(max-width: 899px)" srcset="images/iski-on-gold-500px.jpg" />
<source media="(min-width: 900px)" srcset="images/iski-on-gold-900px.jpg" />
<img src="images/iski-on-gold-900px.jpg" alt="Iskierka laying in a heap on a gold background" />
</picture> <!-- i don't want hight wasn with in side a picture in a figure-->
<img src="images/regal-head-svg.svg" alt="Portrait of a female Regal Copper">
<figcaption>this is my SVG img tag</figcaption>
</article>
<footer>
<p class="footer">footer</p>
</footer>
</body>
</html>