-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (75 loc) · 3.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-top">
<div class="logo">Header Logo</div>
<ul class="links">
<li><a href="https://google.com">link-one</a></li>
<li><a href="https://google.com">link-two</a></li>
<li><a href="https://google.com">link-three</a></li>
</ul>
</div>
<div class="header-bottom">
<div class="header-bottom-left">
<div class="hero-main">This is an awesome website about Winnie</div>
<div class="hero-secondary">This website has some subtext that goes here under the main title. It's a smaller font and the colour is lower contrast.</div>
<button>Sign up</button>
</div>
<div class="header-bottom-right">
<!-- <div class="img-box">Image placeholder</div> -->
<img src="https://images.pexels.com/photos/11098665/pexels-photo-11098665.jpeg" alt="Winnie the Pooh baloon, credits: Carlos Cruz" class="img-01">
</div>
</div>
</div>
<div class="info-title">Some random information.</div>
<div class="information">
<div class="items">
<div class="item">
<!-- <div class="box"></div> -->
<img src="https://images.pexels.com/photos/283937/pexels-photo-283937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Winnie the Pooh toy, credits: Inna Lesyk" class="img-box-info">
<div class="text">this is some subtext under an illustration or an image</div>
</div>
<div class="item">
<!-- <div class="box"></div> -->
<img src="https://images.pexels.com/photos/10987077/pexels-photo-10987077.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Winnie the Pooh toy, credits: Tahir Osman" class="img-box-info">
<div class="text">this is some subtext under an illustration or an image</div>
</div>
<div class="item">
<!-- <div class="box"></div> -->
<img src="https://cdn.pixabay.com/photo/2017/01/31/23/52/baby-2028307_960_720.png" alt="Winnie the Pooh vector graphic, credits: Open Clipart Vectors" class="img-box-info">
<div class="text">this is some subtext under an illustration or an image</div>
</div>
<div class="item">
<!-- <div class="box"></div> -->
<img src="https://images.unsplash.com/photo-1676313699709-dae4ad20cd3a?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Honey Jar, credits: Bermix Studio/Unsplash" class="img-box-info">
<div class="text">this is some subtext under an illustration or an image</div>
</div>
</div>
</div>
<div class="quote">
<div class="quote-main">Brother, whatever I have done to wrong you, whatever I have done to
lead you to do this, I am truly sorry. But these people are innocent,
taking their lives will gain you nothing. So take mine, and end this</div>
<div class="quote-author">-Thor Odinson</div>
</div>
<div class="call-to-action">
<div class="cta-box">
<div class="cta-left">
<div class="cta-text-bold">Call to action! It's time!</div>
<div class="cta-text-regular">Sign up for our product by clicking that button right over there!</div>
</div>
<button class="cta-sign-up">Sign up</button>
</div>
</div>
<div class="footer">
Copyright © The Odin Project 2024 - bart p
</div>
</body>
</html>