-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
74 lines (74 loc) · 3.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Lato&family=Lustria&family=Monoton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/index.css">
<title>Your Name</title>
<script src="https://kit.fontawesome.com/8a25087001.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="main">
<div>
<a href="index.html">Your<br>Name</a>
</div>
<div class="links">
<a href="#about">About</a>
<a href="projects.html">Projects</a>
<a href="#hire">Hire Me</a>
</div>
</nav>
</header>
<section class="top">
<div>
<h1>Hi, I'm <span>Name</span></h1>
<p>Fullstack developer based in Toronto</p>
<button><span class="btn">Hire Me</span></button>
</div>
</section>
<section id="about">
<div class="left">
<img src="images/headshot.jpg" alt="">
</div>
<div class="right">
<div class="box">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel error sit eius quod iure, hic blanditiis accusamus officiis laudantium beatae quas delectus alias odit maxime doloremque vero quidem sed eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim molestias, quis at corrupti accusantium architecto nam nisi debitis aspernatur modi molestiae sit ducimus, numquam alias, natus soluta eius itaque quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel error sit eius quod iure, hic blanditiis accusamus officiis laudantium beatae quas delectus alias odit maxime doloremque vero quidem sed eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim molestias, quis at corrupti accusantium architecto nam nisi debitis aspernatur modi molestiae sit ducimus, numquam alias, natus soluta eius itaque quo.</p>
</div>
</div>
</section>
<section class="projects">
<h2>My Projects</h2>
<div class="container">
<div class="box">
<img src="images/icecream.jpg" alt="cover photo for icecream shop website">
<h3>Ice Cream Shop</h3>
</div>
<div class="box">
<img src="images/yoga.jpg" alt="cover photo for yoga studio website">
<h3>Yoga Studio</h3>
</div>
<div class="box">
<img src="images/flowers.jpg" alt="cover photo for flower shop wesbite">
<h3>Flower Shop</h3>
</div>
</div>
<button><span class="btn">See More</span></button>
</section>
<footer id="hire">
<div>
<button class="special">Hire Me</button>
<nav class="social">
<a href="https://www.linkedin.com/in/brit-hemming-613b3551/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/BrityHemming" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://twitter.com/BritHemming" target="_blank"><i class="fab fa-twitter"></i></a>
</nav>
</div>
</footer>
</body>
</html>