-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex_finished.html
85 lines (85 loc) · 5.05 KB
/
index_finished.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
<!-- Comments in HTML look like this! They're pretty wild. -->
<!-- If you're using this version and planning on uploading it to Github, remember to rename it to "index.html" or else Github won't automatically load this file!-->
<!DOCTYPE html>
<html>
<!-- Content in the "head" tag doesn't actually show up on the page. It's mostly for setting up stuff like the title and linking CSS or JS. -->
<head>
<meta charset="utf-8">
<!-- This is the title that shows up in the tab -->
<title>My Website!</title>
<!-- Here is where you tell your HTML where to look for in term of styling the page. We've linked a favicon (lil image that shows up in the tab), external CSS page ("style.css") and a Google Fonts font-->
<link rel="icon" type="image/x-icon" href="img/tag-favicon.ico">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
<!-- Here's where the fun begins! Stuff inside of the body tag is displayed on the page. -->
<body>
<br/> <!-- The "br" tag represents a line-break and is self-closing. -->
<div id="about-me"> <!-- "div"s group together related content. -->
<!-- Check it out- it's an image! You tell the page where the picture is located in your file directory using the "src" attribute. This picture is in the "img" folder of our project. There's also an "alt" attribute, which is a short description of the image that makes life easier for people who use screen-readers. -->
<img id="self-photo" src="img/me-and-charles.jpg" alt="picture of me and a cat">
<br/>
<h1>Hello there!</h1> <!-- "h1" means header 1. Use is for the most important header. -->
<p>My name is Olga Andreeva, and I'm a student at the University of Washington. My hobbies include bouldering, playing soccer, and making websites!</p> <!-- "p" stands for paragraph. Use it when you just want text to show up. -->
</div>
<div id="projects">
<h2>Projects</h2> <!-- "h2" means header2. Use it for less important headers than h1. -->
<p>Here are some projects I've worked on:</p>
<div class="column">
<!-- We're wrapping an "img" tag in a "a" tag, so when you click on the image, it redirects you to whatever link is referenced in the "href" property. target="_" means it will open the link in a new tab. -->
<a href="https://olgatron9000.github.io/2017-in-Review/" target="_">
<div class="image-container">
<img src="img/2017.png" alt="2017 in Review">
</div>
</a>
<a href="https://olgatron9000.github.io/Emergency-Optimization" target="_">
<div class="image-container">
<img src="img/emergency.png" alt="emergency optimization">
</div>
</a>
<a href="https://olgatron9000.github.io/Holy-Guacamole/" target="_">
<div class="image-container">
<img src="img/holy-guacamole.png" alt="holy guacamole">
</div>
</a>
<a href="https://www.youtube.com/channel/UC_c8WqNLbcs-2o2XCFqPkbg" target="_">
<div class="image-container">
<img src="img/grace-hopper.png" alt="math youtube channel">
</div>
</a>
</div>
</div>
<br/>
<div id="classes">
<h2>Classes</h2>
<p>Here are some classes I've taken:</p>
<!-- "ul" stands for unordered list: it's a list with bullet points rather than numbers. Try making an "ol" (ordered list). -->
<ul>
<!-- Each "li" (list object) is a different class -->
<li>CSE 142/143</li>
<li>CSE 154</li>
<li>CSE 332</li>
<li>MATH 308</li>
</ul>
</div>
<br/>
<div id="contact">
<h2>Contact Me</h2>
<p>Interested in learning more? Check out <a href="https://drive.google.com/open?id=1EakoT6DMCR4feT2tN2t2mMAHBSl6Th5g" id="resume-link" target="_">my resume!</a></p>
<p>Interested in connecting?</p>
<!-- "ul" stands for unordered list: it's a list with bullet points rather than numbers. Try making an "ol" (ordered list). -->
<ul id="contact-icons">
<!-- Each "li" (list object) is an "img" that is linked to a particular social media using the "a" tag. If you click on the img, it will redirect you to whatever link is specified as the "href" in the "a" tag. -->
<li class="contact-img"><a href="https://www.linkedin.com/in/olga-andreeva/" target="_blank"><img src="img/linked-in.png" alt="LinkedIn Logo"></a></li>
<li class="contact-img"><a href="https://twitter.com/olgatron9000" target="_blank"><img src="img/twitter.png" alt="Twitter Logo"></a></li>
<li class="contact-img"><a href="https://www.facebook.com/olga.andreeva.18" target="_blank"><img src="img/facebook.png" alt="Facebook Logo"></a></li>
<li class="contact-img"><a href="https://www.instagram.com/olgatron9000/" target="_blank"><img src="img/instagram.png" alt="Instagram Logo"></a></li>
<li class="contact-img"><a href="https://www.github.com/olgatron9000" target="_blank"><img src="img/github.png" alt="Github Logo"></a></li>
<li class="contact-img"><a href="mailto:andreolg@uw.edu" target="_blank"><img src="img/email.png" alt="Email"></a></li>
</ul>
</div>
<!-- Make sure to close up all of the tags that require closing tags! -->
<br/>
<br/>
</body>
</html>