forked from julianguyen/workshop-templates
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (63 loc) · 2.98 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to Foo Bar's Site - Home</title>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<header>
<div id="header-title">
<a href="index.html">Foo Bar's Site</a>
</div>
<nav>
<ul>
<li><a href="index.html#about">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Resume</a></li>
</ul>
</nav>
</header>
<main>
<section id="welcome">
<div id="welcome-text">
Hello, I'm Foo Bar! Welcome to my little corner of the interwebs!
</div>
</section>
<section id="about" class="white-section">
<h1>About Foo</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis arcu augue, ac laoreet dolor lobortis quis. Mauris nisl erat, faucibus vitae eros eget, lobortis dictum dolor. Quisque consequat molestie eros, vel ultrices nunc rhoncus scelerisque. Etiam ornare sed justo eu efficitur. In mollis tellus et facilisis congue. Aenean volutpat urna sed leo consectetur pharetra. Suspendisse vel cursus enim, non elementum mauris. Donec sed enim non lorem lobortis bibendum. Fusce sed nibh justo. In sollicitudin pulvinar lectus. Nam non libero justo. Integer eu risus ac nibh faucibus tincidunt. Aenean sodales turpis vel odio bibendum, sed hendrerit dui sodales. Donec vel leo et magna hendrerit consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eget ultricies nunc.
</section>
<section id="fun-facts" class="brown-section">
<h1>Fun Facts</h1>
<div class="three-items">
<div class="an-item">
<div class="padded-item">
<img src="http://lorempixel.com/output/cats-q-c-500-500-10.jpg" alt="First kitty" class="medium-circle">
<div class="item-text">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec velit sit amet metus molestie luctus. Suspendisse lectus turpis, eleifend vitae augue ut, consectetur tempor erat.
</div>
</div>
</div>
<div class="an-item">
<div class="padded-item">
<img src="http://lorempixel.com/output/cats-q-c-500-500-8.jpg" alt="Second kitty" class="medium-circle">
<div class="item-text">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec velit sit amet metus molestie luctus. Suspendisse lectus turpis, eleifend vitae augue ut, consectetur tempor erat.
</div>
</div>
</div>
<div class="an-item">
<img src="http://lorempixel.com/output/cats-q-c-500-500-4.jpg" alt="Third kitty" class="medium-circle">
<div class="item-text">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec velit sit amet metus molestie luctus. Suspendisse lectus turpis, eleifend vitae augue ut, consectetur tempor erat.
</div>
</div>
</div>
</section>
</main>
<footer>
Made by Foo Bar
</footer>
</body>
</html>