-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
43 lines (43 loc) · 2.89 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Tarika the Horse</title>
</head>
<body>
<main>
<nav id="navbar">
<p class="nav" style="flex-grow: 8; justify-content: flex-start; padding-left: 5%;">Tarika the Horse</p>
<p class="nav" style="flex-grow: 1"><a href="#about-me">About</a></p>
<p class="nav" style="flex-grow: 1"><a href="#projects">Work</a></p>
<p class="nav" style="flex-grow: 1"><a href="#contact">Contact</a></p>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Tarika the Horse</h1>
<h2>A (sometimes) web dev!</h2>
</section>
<section class="about-me">
<h2 id="about-me" class="about-me-header">A bit about me...</h2>
<div class="container">
<img class="profile-pic" src="https://i.imgur.com/um3dZc1.png" alt="Tarika">
<p class="bio">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sapiente, modi totam soluta eaque ab, nobis, placeat vero voluptatem rem vel aut aliquid molestias corporis veritatis nesciunt a tempore animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, deserunt labore harum vel iure, illum veniam voluptas iusto temporibus asperiores, nam inventore hic eius amet consectetur consequatur. Natus, ullam ipsum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nisi praesentium nam ducimus deleniti quasi perspiciatis, repudiandae harum quisquam architecto sed assumenda amet explicabo, odit ipsam in itaque aperiam! Distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias assumenda, at veritatis dolorem omnis hic excepturi labore ullam nobis voluptates. Nam natus sapiente a, accusamus soluta nobis dicta nemo repudiandae! </p>
</div>
</section>
<section class="projects">
<h2 id="projects" class="projects-header"><a href="https://codepen.io/TarikaTheHorse/full/gOXPEKK" target="_blank">Projects</a></h2>
<div class="projects-display">
<iframe src="https://codepen.io/TarikaTheHorse/full/dyZoxMa" class="project-tile" id="project-tile"></iframe>
<iframe src="https://codepen.io/TarikaTheHorse/full/KKyVRgV" class="project-tile" id="project-tile"></iframe>
<iframe src="https://codepen.io/TarikaTheHorse/full/gOXPdWy" class="project-tile" id="project-tile"></iframe>
<iframe src="https://codepen.io/TarikaTheHorse/full/RwjrdGg" class="project-tile" id="project-tile"></iframe>
</div>
</section>
<section id="links" class="links">
<h1 id="contact">Contact</h1>
<h2><a href="https://www.freecodecamp.org/tarikathehorse" target="_blank" class="contact" id="profile-link">Free Code Camp</a></h2>
<h2><a href="https://twitter.com/darkacademiaho3" target="_blank" class="contact" id="profile-link">Twitter</a></h2>
<h2><a href="https://github.com/TarikaTheHorse" target="_blank" class="contact" id="profile-link">Github</a></h2>
</section>
</main>
</body>
</html>