-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (139 loc) · 11.8 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chloe Elliott / Web Developer</title>
<script>
let images=['wood2.jpg','windmillstairway.jpg','newport.jpg','capehouse.jpg'];
let img_index = 0;
setInterval(function(){ //sets the background image to change from a list of images in intervals of 7 seconds and then loops it. used Css animation to make the transition less jarring.
//var url=images[Math.floor(Math.random() * images.length)];
let url = images[img_index];
document.getElementById('header').style.backgroundImage = 'url('+url+')';
img_index++;
if (img_index >= images.length) {
img_index = 0;
}
},7000);
</script>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#the-work">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<header id="header">
<h1>Hello World!</h1>
</header>
<main>
<section id="the-work" class="work">
<div class="one-half">
<h2>This is my work section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac orci.
Accumsan sit amet nulla facilisi. Pellentesque dignissim enim sit amet venenatis urna cursus
eget nunc. Leo duis ut diam quam nulla. Aliquam vestibulum morbi blandit cursus risus at
ultrices mi tempus. Feugiat in ante metus dictum. Eget magna fermentum iaculis eu non diam
phasellus vestibulum. In vitae turpis massa sed. Sollicitudin aliquam ultrices sagittis
orci a scelerisque purus. Suscipit adipiscing bibendum est ultricies integer quis auctor.
Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Volutpat maecenas
volutpat blandit aliquam etiam erat velit scelerisque in. Aliquet lectus proin nibh nisl.
Mi in nulla posuere sollicitudin aliquam ultrices. Nibh sit amet commodo nulla facilisi
nullam vehicula ipsum. Odio facilisis mauris sit amet massa vitae tortor condimentum. Risus
feugiat in ante metus. Elementum nisi quis eleifend quam adipiscing vitae. Egestas integer
eget aliquet nibh.
Fames ac turpis egestas sed. Mauris pellentesque pulvinar pellentesque habitant.
Consectetur adipiscing elit duis tristique sollicitudin. Purus ut faucibus pulvinar
elementum. Morbi non arcu risus quis varius quam quisque. Ut eu sem integer vitae justo eget
magna fermentum. Posuere ac ut consequat semper. Cursus sit amet dictum sit amet justo
donec enim diam. Aliquam sem fringilla ut morbi tincidunt augue. Ante metus dictum at
tempor commodo ullamcorper a. Eget est lorem ipsum dolor. Id aliquet lectus proin nibh
nisl condimentum id venenatis. Ac auctor augue mauris augue neque gravida in fermentum.
In fermentum posuere urna nec tincidunt praesent semper. Cursus metus aliquam eleifend mi
in. Sed adipiscing diam donec adipiscing. Rhoncus est pellentesque elit ullamcorper.
Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.</p>
</div>
<div class="one-half">
<h2>This is my work section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac orci.
Accumsan sit amet nulla facilisi. Pellentesque dignissim enim sit amet venenatis urna cursus
eget nunc. Leo duis ut diam quam nulla. Aliquam vestibulum morbi blandit cursus risus at
ultrices mi tempus. Feugiat in ante metus dictum. Eget magna fermentum iaculis eu non diam
phasellus vestibulum. In vitae turpis massa sed. Sollicitudin aliquam ultrices sagittis
orci a scelerisque purus. Suscipit adipiscing bibendum est ultricies integer quis auctor.
Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Volutpat maecenas
volutpat blandit aliquam etiam erat velit scelerisque in. Aliquet lectus proin nibh nisl.
Mi in nulla posuere sollicitudin aliquam ultrices. Nibh sit amet commodo nulla facilisi
nullam vehicula ipsum. Odio facilisis mauris sit amet massa vitae tortor condimentum.
Risus feugiat in ante metus. Elementum nisi quis eleifend quam adipiscing vitae.
Egestas integer eget aliquet nibh.
Fames ac turpis egestas sed. Mauris pellentesque pulvinar pellentesque habitant.
Consectetur adipiscing elit duis tristique sollicitudin. Purus ut faucibus pulvinar
elementum. Morbi non arcu risus quis varius quam quisque. Ut eu sem integer vitae
justo eget magna fermentum. Posuere ac ut consequat semper. Cursus sit amet dictum sit
amet justo donec enim diam. Aliquam sem fringilla ut morbi tincidunt augue. Ante metus
dictum at tempor commodo ullamcorper a. Eget est lorem ipsum dolor. Id aliquet lectus proin
nibh nisl condimentum id venenatis. Ac auctor augue mauris augue neque gravida in fermentum.
In fermentum posuere urna nec tincidunt praesent semper. Cursus metus aliquam eleifend mi in.
Sed adipiscing diam donec adipiscing. Rhoncus est pellentesque elit ullamcorper.
Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.</p>
</div>
</section>
<aside id="about" class="one-third about">
<h2>This is my about aside</h2>
<div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="chloeelliott"><a class="LI-simple-link" href='https://www.linkedin.com/in/chloeelliott?trk=profile-badge'>Chloe Elliott, MBA</a></div>
<p>Learning to code is one of the best things I have ever asked my brain to do. Many nights of pretty incredible dreams, where code and real-life seemingly flirt together daring me to understand their symbiotic relationship. I could literally ‘feel' my brain stretching and can I tell you, "I love every moment of it". Everyday, I get to wake up and challenge myself to solve a new problem using nothing more than pure will and a flicker of my fingers. Every other minute I learn something new. Best of all, I get to create something out of thin air, it’s the closest thing to magic I have found and I’m not giving it up.
I started by spending about a year learning, on my own, using various online learning platforms. Eventually, I wanted more hands on help from experts. Ended up at PDX Code Guild completing their stack: Python, Django, HTML/CSS, JavaScript. I am eager to find work in programming and am researching what opportunities might be available for me in Portland for a beginner developer. Finding the right first environment which will foster curiosity, discovery and growth is a high priority. My journey to become the best programmer I can has begun, I cannot wait to experience what is next.
</p>
</aside>
<section id="contact" class="one-third contact">
<h2>This is my contact me section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et
sollicitudin ac orci. Accumsan sit amet nulla facilisi. Pellentesque dignissim enim
sit amet venenatis urna cursus eget nunc. Leo duis ut diam quam nulla. Aliquam vestibulum
morbi blandit cursus risus at ultrices mi tempus. Feugiat in ante metus dictum. Eget
magna fermentum iaculis eu non diam phasellus vestibulum. In vitae turpis massa sed.
Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Suscipit adipiscing
bibendum est ultricies integer quis auctor. Egestas maecenas pharetra convallis posuere
morbi leo urna molestie. Volutpat maecenas volutpat blandit aliquam etiam erat velit
scelerisque in. Aliquet lectus proin nibh nisl. Mi in nulla posuere sollicitudin aliquam
ultrices. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Odio facilisis
mauris sit amet massa vitae tortor condimentum. Risus feugiat in ante metus.
Elementum nisi quis eleifend quam adipiscing vitae. Egestas integer eget aliquet nibh.
Fames ac turpis egestas sed. Mauris pellentesque pulvinar pellentesque habitant.
Consectetur adipiscing elit duis tristique sollicitudin. Purus ut faucibus pulvinar
elementum. Morbi non arcu risus quis varius quam quisque. Ut eu sem integer vitae justo
eget magna fermentum. Posuere ac ut consequat semper. Cursus sit amet dictum sit amet
justo donec enim diam. Aliquam sem fringilla ut morbi tincidunt augue. Ante metus dictum
at tempor commodo ullamcorper a. Eget est lorem ipsum dolor. Id aliquet lectus proin
nibh nisl condimentum id venenatis. Ac auctor augue mauris augue neque gravida in fermentum.
In fermentum posuere urna nec tincidunt praesent semper. Cursus metus aliquam eleifend mi in.
Sed adipiscing diam donec adipiscing. Rhoncus est pellentesque elit ullamcorper.
Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.</p>
</section>
<section class="two-thirds random">
<h2>This is my random section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Donec adipiscing tristique risus nec. Id diam vel
quam elementum pulvinar etiam non. Non diam phasellus vestibulum lorem sed risus ultricies
tristique. Sit amet justo donec enim diam vulputate ut pharetra. Pulvinar etiam non quam lacus.
Id consectetur purus ut faucibus pulvinar elementum integer enim. Nibh praesent tristique magna
sit amet purus. In hac habitasse platea dictumst vestibulum rhoncus. Sit amet consectetur
adipiscing elit.</p>
</section>
</main>
<footer>
<p>Design by Chloe Elliott</p>
</footer>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
</body>
</html>