-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (123 loc) · 7.18 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
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<!--the xmlns attribute is pretty old-school and not really used any more-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<title>Carl Ollington</title>
<!-- I didn't show you this, but it's useful to link this normalize.css to reset-->
<!-- all the different browser's defaults to be the same and give you a blank slate-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- It's usually best to link your css at the bottom, after everything else-->
<link rel="stylesheet" href="PortoStyles.css">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel='stylesheet'>
</head>
<body>
<!--There's also a special <nav> tag that you can use for nav bars,-->
<!-- it acts just like a div or section-->
<section id="navigation">
<div class="navigation">
<!-- There's no need to give these classes if you select them-->
<!-- with ".navigation a" in the css-->
<a class="navbutton" href="#profile">About me</a>
<a class="navbutton" href="#portfolio">Portfolio</a>
<a class="navbutton" href="#contact">Contact Me</a>
</div>
</section>
<section id=welcome>
<div class="banner">
<div>
<h1>Carl Ollington</h1>
<p>Full-stack Developer</p>
</div>
</div>
</section>
<section id="profile">
<div class="profile">
<div class="biography">
<img src="" class="profilephoto" alt="Carl's Headshot">
<p> Nonsense about me </p>
</div>
<div class="skills">
<article>
<h3>Languages</h3>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>M</li>
</ul>
</article>
<article>
<h3>Platforms</h3>
<ul>
<li>Microsoft 365</li>
<li>ServiceNow</li>
<li>SAP</li>
</ul>
</article>
<article>
<h3>Methodologies</h3>
<ul>
<li>Agile</li>
<li>Lean Six Sigma</li>
<li>Javascript</li>
</ul>
</article>
</div>
</div>
</section>
<section id="portfolio">
<div class="title">
<h1> Projects </h1>
</div>
<div class="project_grid">
<div class="project">
<article>
<h2> Project 1 </h2>
<p>
Summary Description of Portfolio Project
</p>
<img src="https://placedog.net/501" alt="Placeholder 1">
</article>
</div>
<div class="project">
<article>
<h2>Project 2</h2>
<p>
Summary Description of Portfolio Project
</p>
<img src="https://placedog.net/502" alt="Placeholder 2">
</article>
</div>
<div class="Project">
<article>
<h2>Project 3</h2>
<p>
Summary Description of Portfolio Project
</p>
<img src="https://placedog.net/503" alt="Placeholder 3">
</article>
</div>
</div>
</section>
<section id="contact">
<div class="socials">
<a class="linkedin" href="https://www.linkedin.com/in/carlollington">
<!-- Better to use icon fonts from boxicons for these icons-->
<img alt="LinkedIn" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAV1JREFUaEPtWVsOAiEM7J5MPZl6MvVkupPQZIMtC2tDIZYffjbQ6UwfWxaafC2T208BwJvBYGBkBs5EdCUi7J7rSUT31Q7sX6skoccAxrPBMP7SCuDt6fZaZ5cYCADGDIrOPsIAAuqWjMOOQO+xTABsjWeje4EwAaAx1iNeAgAkg1ycF5SpJAQQ2zhAlUbB67FMJNTDUO2OAADPQP8vwUXbWgCJ5euU+ipuzPgsSJCbxb16YsKAFMR5HEgXIU4AnAugJJO9ZOAKACDFdjhDUgLhCqAl+LWiOAyAPTa0/xB3ALk8pL4KTGkycgWgFTzJqJZvi3MhSYtHs5Dm1ZrzOH5cGZgegBaY0zAQANYu2DUGgoFgICXjmqyhdaPSjLXmvCHqwDAxIE2JeYrNnpKGsNqUu+Y8UwZa2mLrb03SqLVRLef9H4DpHzimf2Jq0afbt/HM6ub6dHEwEAz86IEPNMOKMSsOYKkAAAAASUVORK5CYII="/>
</a>
<a class="github" href="https://github.com/CarlOllington">
<img alt="Github" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAkpJREFUaEPtmVlOA0EMRJOTAScDTgacDDAaS43HdpV7mSEo/CAlvdRz2b3lernxv+uN67/cAc52cKYDjxvMcwOln71vn31s/19mgc8AEJEiWsVWtL1+Nx6CGQGQidtoV4Tbtt0gPQAjEUeQZZAqwMyoRzAliArAEeIVioZgAY4UrxCycj2hnGMAzhBPO4EAIvFisURICxoFKvpe9wcZLxorTScE8BnMLNbq5NLEA22/lzZ2n7DC5Pu3YL5QZwaQpU7Uz+68np6sTRSw0IUMIBpMRCHnelMqm9O6/jNHJAQVrjtYr+qmXwbgrkp/CSCrAWEsAWSRoDeZDkekiLND4c55z4Gz0kdXqmglku+HAajdsSPybZfMhd38VQdWpo9CZBlAAWQROAIgK+ZhgFXLZ5tCaDX6lTVeCp3tAFpEhgCOKOJ/DTBcA+5aPLhs2u6lTdSrAVREK9MIpc9uFYzOQlkUVrmAAkfvxNIQnUmkzcw9gRHvnp6zi0l7JtHbFbpVVcuh8sbkBoy90LR5H10f2XfP9u5beY50tVaulC1ElGJMgTPpaZ3sulJ6tdAK9AqdqQs231uIrkt9dD7X85AI0XTQGoEPUVuf7MxPR5+9nNucZ9IEFTNaprU/dJR9XbAQcGBAwABQc7AAosdbffSFTvXax6yIAwFQ4tkUakWgrZ4NSOm8k7nJTmgvHNFPSux4HoC4Zx1FtTT0wua50QtAp4wlYifMIqE/0j0w7/nbQNJH2pcjvgIA2ryywQwHVuqDY98BYIgWN7h5B74AeFmTMe34xmMAAAAASUVORK5CYII="/>
</a>
<a class="Email" href="mailto:[email protected]?subject=Let's Connect">
<img alt="Email" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAVlJREFUaEPtmUESwjAIRenN9GTqyfRmWhZxYiSQBkjTDtk4Y03Kfx+aYBc4+FgOHj+EgL0dDAfCASWB06bQBQBuAICfM4zHGsSdCqTmwHuGqIkYrivUV/49JQCVIv0ZBwaPIr6DEjAr/RT0T8yzC0DiZR1uFoAT9kirVLhlRnQJQPtGiUDqGHwqVjMBKQc9hVCPS3MBHm6U1PMHjVpAdRMxSitufSzgZ/E831wDON9DBEedc7lLQIJgJUSizh1jVAK0bvRSr26+mo1sqxsa6i4CWt2woO4moKU2aofC3iO7ugZqAXEpUs7RbIZuAlrc6KXunkIlYcoNDfXhAnI3sIgt21P3FPLu5EKAN2Fp/XBAIuR9PRzwJiytHw5IhLyviw5gDzrLn7riEYVqaKhG2ptq6/p/8XLvB6wOX63Bcb+rNkWnfcFhQW3IGuHAEMzMTcKBcEBJ4PAp9AGloFoxlr+6BgAAAABJRU5ErkJggg=="/>
</a>
<a class="Home" href="#welcome">
<img alt="Home" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAUZJREFUaEPtllEOwjAMQ7ObwcmAk8HNgEibNI2usZdkaBB+JtE29bNDxiAH/wwH1y8F8O0EK4FKwOnAX7bQ02madZwyldo83lwARgSUqdTmX0nA6uFd17cksKtA67ICMBy6juvT0zKUXs9MQEVfRkW39zMFIgtgLn5yNQUiA6AlPg0iGqAnPgUiEgARHw4RBcCID4WIANgiPgzCC7AmXifONELnYpff6ZprOnkAeuJ1bfm3W++yzuz2IkOEtABUIHIWBtmSACpgDSAUggVAxavIHkAYBANwEpF7I9u1H6EF0IM4i8gD6SMGoHVhb4IgAGzNDyYWYH6hNf5QAKZmCIAW0XayImYA0JphAEh7sgBIzQJgXKoEELe2TCGkLvIiQ+t09xVAx576DSA9ltlCyP3uPQXgttBZoBJwGug+Xgm4LXQWOHwCL424RTGF/pxQAAAAAElFTkSuQmCC"/>
</a>
</div>
</section>
</body>
</html>