-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (99 loc) · 5.3 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en-US">
<div class="root">
<head class="My-heading">
<title>Ollie Lloyd</title>
<meta charset="UTF-8">
<meta author="Ollie Lloyd">
<meta name="Ollies Portfolio" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="./assets/resetcss.css"> -->
<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=Itim&family=Oswald:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./assets/mystyle.css">
</head>
<body>
<!-- Section with clickable links to appropriate sections on page -->
<header>
<nav class="nav-bar">
<h1>
<ul class="nav-bar-links">
<div class="div-bar-nav">
<li><a href="#About Me">About Me</a></li>
<li><a href="#My-Projects">My Projects</a></li>
<li><a href="#Contact-Me">Contact Me</a></li>
<li><a href="https://github.com/Olloyd321">My Github</a></li>
<li><a href="./assets/Files/Oliver Lloyd Resumé 07.2022 (tech_production).pdf">Resume</a></li>
</div>
</ul>
</h1>
</nav>
</header>
<main>
<!-- Main section with about me and projects -->
<h1 id="Main-Name-Header">Ollie Lloyd</h1>
<div class="intro-name">
<p>
A qualified production tech learning to code
</p>
</div>
</h1>
<!-- Profile picture and about me section -->
<div class="image-section">
<img class="profile-pic" src="./assets/images/Portfolio Pic-1.jpg" alt="Ollie Lloyd Professional Headshot">
</div>
<div class="About-Me-Title">
<h2 id="About Me">About Me</h2>
<p class="about-me-paragraph">My name is Ollie Lloyd and this page is designed to display my ability to write HTML and CSS,
as well as deploying the files properly.
I started my coding journey last year and am learning to create impressive and interactive web-pages.
My goal is to learn the fundamentals of web dev to widen my scope of experience and present myself with more oppourtunities.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, vel dicta eveniet molestias,
alias fugit libero voluptatem vitae amet quasi facilis impedit temporibus, qui sint debitis quas minus eligendi doloribus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, vel dicta eveniet molestias,
alias fugit libero voluptatem vitae amet quasi facilis impedit temporibus, qui sint debitis quas minus eligendi doloribus.
Iste temporibus ab dolorem eaque minus odit consequuntur laudantium, reprehenderit repellat dignissimos at sed!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, vel dicta eveniet molestias,
alias fugit libero voluptatem vitae amet quasi facilis impedit temporibus, qui sint debitis quas minus eligendi doloribus.
Sint vel officia repellendus! Voluptates atque dolorem deleniti beatae corrupti, labore quasi ad velit sed? Recusandae!</p>
</p>
</div>
<!-- My Projects section -->
<h3 id="My-Projects">My Projects</h3>
<section class="project-section" >
<div class="project-box-1" title="My first project">
<a id="Project-1" href="https://freewill201.github.io/Space-Repo/">Astro News Project</a>
</div>
<section class="row-2">
<div class="project-box-2" title="My first project repository">
<a id="Project-2" href="https://olloyd321.github.io/Weather-Planner/">Weather API App</a>
</div>
<div class="project-box-3" title="My second project">
<a id="Project-3" href="https://olloyd321.github.io/Work-Scheduler/">Work Day Scheduler </a>
</div>
</section>
</section>
<!-- How to contact me section -->
<section id="Contact-Me">
<h4 class="contact-me-header">Contact Me</h4>
<ul class="contact-me-links">
<div>
<li><a id="email" href="mailto:olloyd321@gmail.com">Email</a></li>
</div>
<div>
<li><a id="office" href="tel:555-555-5555"> Office</a></li>
</div>
<div>
<li><a id="cell" href="tel:555-565-5555"> Cell </a></li>
</div>
</ul>
</section>
</main>
<footer class="footer">
<div>
©2022 Ollie Lloyd
</div>
</footer>
</body>
</div>
</html>