-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (139 loc) · 7.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sophie's Homepage</title>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/243b648db7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<header class="indexHeader">
<input type="checkbox">
<div class="toggle"><i class="fas fa-bars"></i></div>
<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<span class="logo" id="#home">Sophie</span>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<div class="content wrapper">
<div class="circular">
<img src="./assets/circle-text.png" alt="picture with text saying "it's all about"">
<h1>Sophie</h1>
</div>
<div>
<img src="./assets/home-image-1.jpg" alt="a person holding two orange slices infront of their eyes">
</div>
</div>
</header>
<main>
<section id="about" class="about">
<div class="textContainer wrapper">
<h2>who is sophie?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, hic dignissimos ratione voluptatem, nihil nulla quaerat et asperiores rerum quasi, vel ab excepturi! Nisi necessitatibus eos optio ipsa debitis tempore nihil consectetur velit dicta, explicabo molestias autem molestiae est numquam!</p>
<button class="find"><a href="">find out more</a></button>
</div>
</section>
<section class="cards">
<div class="things flexContainer">
<div class="side red"></div>
<div class="wrapper flexContainer">
<div class="bgContainer"></div>
<div class="textContainer">
<h3>Sophie's Favourite Things</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde nisi modi officia ut explicabo officiis earum corporis temporibus quisquam? Mollitia excepturi dolores illo similique atque doloribus.</p>
<button class="read"><a href="">Read More</a></button>
</div>
</div>
<div class="side white"></div>
</div>
<div class="travelled flexContainer">
<div class="side white"></div>
<div class="wrapper flexContainer">
<div class="bgContainer"></div>
<div class="textContainer">
<h3>Where She's travelled</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A aliquam alias natus, obcaecati omnis facere labore iste perspiciatis quidem cupiditate itaque beatae error deleniti ea nam!</p>
<button class="read"><a href="">Read More</a></button>
</div>
</div>
<div class="side yellow"></div>
</div>
</section>
<section class="info">
<div class="wrapper flexContainer">
<div class="card">
<div class="textContainer">
<div class="flexContainer">
<i class="fas fa-image"></i>
<h2>photos</h2>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aut nemo unde voluptatem ipsum dolores culpa omnis adipisci. Magnam ducimus provident nemo odit consequuntur!</p>
</div>
</div>
<div class="card">
<div class="textContainer">
<div class="flexContainer">
<i class="fas fa-user"></i>
<h2>about</h2>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aut nemo unde voluptatem ipsum dolores culpa omnis adipisci. Magnam ducimus provident nemo odit consequuntur!</p>
</div>
</div>
<div class="card">
<div class="textContainer">
<div class="flexContainer">
<i class="fas fa-desktop"></i>
<h2>blog</h2>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aut nemo unde voluptatem ipsum dolores culpa omnis adipisci. Magnam ducimus provident nemo odit consequuntur!</p>
</div>
</div>
<div class="card">
<div class="textContainer">
<div class="flexContainer">
<i class="fas fa-phone"></i>
<h2>get in touch</h2>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aut nemo unde voluptatem ipsum dolores culpa omnis adipisci. Magnam ducimus provident nemo odit consequuntur!</p>
</div>
</div>
</div>
<div class="bg"></div>
</section>
<section class="journey">
<div class="wrapper flexContainer">
<div class="imageContainer">
<img src="./assets/home-image-5.jpg" alt="a person standing with a orange shirt">
</div>
<div class="textContainer">
<h2>Sophie's journey</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit et, aliquid eaque quibusdam dolor officia dignissimos voluptas minus earum maiores minima quasi maxime vel ducimus reprehenderit exercitationem eligendi nam, enim animi? Aperiam sunt vel temporibus qui, voluptatibus molestias, earum necessitatibus omnis tempore asperiores voluptate impedit soluta</p>
<button class="find"><a href="">find out more</a></button>
</div>
</div>
</section>
<section class="gallery">
<div class="wrapper flexContainer">
<div class="imageContainer">
<a href="https://www.instagram.com/"><img src="./assets/home-image-6.jpg" alt="teal bicycle against a orange wall"></a>
</div>
<div class="imageContainer">
<a href="https://www.instagram.com/"><img src="./assets/home-image-7.jpg" alt="a large orange building with a archway"></a>
</div>
<div class="imageContainer">
<a href="https://www.instagram.com/"><img src="./assets/home-image-8.jpg" alt="a yellow sun umbrella with banana beach text on the brim"></a>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright ©2020 Juno College, Created by Kyle Wong</p>
</footer>
</body>
</html>