-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (123 loc) · 4.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Brianna Parris is a photographer that specializes in drone videography." />
<meta name="robots" content="index,follow" />
<title>Brianna Parris | Video Photographer </title>
<!-- favicon -->
<link rel="shortcut icon" type="image/icon" href="img/favicon.ico" />
<!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navigation section -->
<header class="main-head">
<nav>
<h1 id="logo"><a href="/">Brianna</a></h1>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
<div class="burger">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</div>
</nav>
</header>
<!-- Navation section ends -->
<main>
<!-- Wraps all of the main content -->
<!-- Hero section -->
<section class="hero">
<div class="hero-introduction flex">
<h2>Brianna Smith <br>Video Photographer</Smithbr>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque maiores cumque laboriosam pariatur facilis quam quis totam maxime.</p>
<a href="#work" class="cta">View Gallery</a>
</div>
<div class="hero-images">
<img src="img/brianna-parris.png" alt="picture of Brianna Parris" class="hero-brianna">
<img src="img/plant1.png" alt="" class="plant plant1">
<img src="img/plant2.png" alt="" class="plant plant2">
</div>
</section>
<!-- Hero section ends -->
<!-- About section -->
<section class="about" id="about">
<div class="about-image">
<h5>MINIMAL</h5>
<img src="img/about-image.png" alt="portrait-picture" />
</div>
<div class="about-text flex">
<h2>Brianna Parris</h2>
<div class="about-life">
<h3>My Life</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptas, maxime reprehenderit. Assumenda necessitatibus id
consectetur asperiores harum dolore nihil fuga?
</p>
</div>
<div class="about-work">
<h3>My Work</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptas, maxime reprehenderit. Assumenda necessitatibus id
consectetur asperiores harum dolore nihil fuga?
</p>
</div>
<div class="about-contact">
<h3>Get in touch</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptas, maxime reprehenderit. Assumenda necessitatibus id
consectetur asperiores harum dolore nihil fuga?
</p>
</div>
</div>
</section>
<!-- About section ends -->
<!-- Gallery section -->
<section class="gallery" id="gallery">
<header class="gallery-head">
<h2>My Photographs</h2>
<p>Photos taken by drone</p>
</header>
<img src="img/gallery-1.jpg" alt="image of city" class="gallery1">
<img src="img/gallery-2.jpg" alt="beach shot" class="gallery2">
<img src="img/gallery-3.jpg" alt="country side" class="gallery3">
<img src="img/gallery-4.jpg" alt="golf course" class="gallery4">
</section>
<!-- Gallery section ends -->
<!-- Contact section -->
<section class="contact" id="contact">
<div class="form-wrapper flex">
<h2>Get in <br><span>touch.</span></h2>
<form>
<label for="email">Your Email:</label>
<input type="email" id="email required">
<button type="submit">Submit</button>
</form>
</div>
<img src="img/contact-image.png" alt="Brianna Parris">
</section>
<!-- Contact section ends -->
</main> <!-- Main content ends -->
<footer>
<h4>Brianna Parris © 2021</h4>
<ul>
<li><a href="#"><img src="img/youtube-symbol1.svg" alt="Youtube-social-media"></a></li>
<li><a href="#"><img src="img/twitter1.svg" alt="Twitter-social-media"></a></li>
<li><a href="#"><img src="img/instagram1.svg" alt="Instagram-social-media"></a></li>
</ul>
</footer>
<!-- Javascript file -->
<script src="js/app.js"></script>
</body>
</html>