-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (73 loc) · 2.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Landing Page</title>
</head>
<body>
<main>
<div class="header">
<h1 class="logo">cybl</h1>
<div class="links">
<a href="index.html">Home</a>
<a href="https://www.github.com/cyblcode">Github</a>
<a href="https://www.theodinproject.com">Odin Project</a>
</div>
</div>
<div class="hero">
<img class="hero-image" src="img/hero-img.jpg" alt="">
<h1 class="hero-intro">hello, my name is cybl</h1>
<p class="hero-text">im aiming to become a web developer in the future.
by the time i have done this project, i will have learned basic css and html!
thank you to the odin project! (the rest of the page will be dummy content)
</p>
<button class="hero-button">Sign up</button>
</div>
</main>
<section>
<h1 class="info-text">Some random information</h1>
<div class="info-img">
<div class="info-row">
<img class="info-column" src="img/info-img/info-beach.jpg" alt="1">
<figcaption>this is some subtext under a image</figcaption>
</div>
<div class="info-row">
<img class="info-column" src="img/info-img/info-forest.jpg" alt="2">
<figcaption>this is some subtext under a image</figcaption>
</div>
<div class="info-row">
<img class="info-column" src="img/info-img/info-sea.jpg" alt="3">
<figcaption>this is some subtext under a image</figcaption>
</div>
<div class="info-row">
<img class="info-column" src="img/info-img/info-fireworks.jpg" alt="4">
<figcaption>this is some subtext under a image</figcaption>
</div>
</div>
</section>
<section>
<div class="quote">
<div class="quote-text">This is an inspiring quote or a testmonial from a customer. Maybe it's filling up space,
or maybe people will actually read it. Who knows? All I know is that it looks nice.
</div>
<div class="quote-author">- Thor, God of Thunder</div>
</div>
</section>
<section>
<div class="action">
<div class="call-action">
<h2 class="action-text">Call to action! It's time!</h2>
<p class="action-text">Sign up for our product by clicking that button right over there! ->
<button class="action-button">Sign up</button>
</p>
</div>
</div>
</section>
<footer>Copyright © The Odin Project 2021</footer>
</body>
</html>