forked from niklastheman/insurance-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (121 loc) · 6.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insurance</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<section class="intro">
<div class="intro-content">
<h1>We've got you Covered.</h1>
<p>Together we keep each other safe at home or at work.
By paying a tiny fee a day, you are fully insured all day long.
You get it all for as little as <span class="white-text">$0.4 per pay.</span>
</p>
<button type="button" name="button" class="join-now" href="#">JOIN NOW</a> <!--button-->
</div>
</section>
<section class="sub-header" id="learn">
<p class="small-heading">What do we have to offer?</p>
<h3><a href="#">Learn more</a></h3>
</section>
<section class="sub-header" id="join">
<p class="small-heading">What are you waiting for?</p>
<h3><a href="#">Join today</a></h3>
</section>
</header>
<nav>
<ul class="nav-ul">
<li class="nav-li"><a href="index.html">Home</a></li>
<li class="nav-li"><a href="#">Our offer</a></li>
<li class="nav-li"><a href="#">Why us</a></li>
<li class="nav-li"><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<section class="main-information">
<h2>Your personal financial safety net online.</h2>
<button type="button" name="button" class="join-now" href="#">JOIN NOW</button> <!--button-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula magna, euismod in dolor nec, consequat ultricies augue.
Aliquam tortor urna, varius sit amet nunc finibus, vulputate volutpat risus. Phasellus fringilla tristique varius.
Aenean ullamcorper, nisl non euismod finibus, augue lectus ullamcorper justo, quis congue lectus purus feugiat magna.
Praesent id vulputate orci.
</p>
</section>
<section class="cards-container">
<section class="card">
<div class="card-visual children"><img class="card-image" src="img/child.png" alt="Cartoon child"></div>
<h4 class="card-heading">Children</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus
massa magna, id interdum ligula rhoncus eu. Vestibulum et dapibus
ipsum. Nullam rutrum vitae elit id aliquam. Nunc sed mi.
</p>
</section>
<section class="card">
<div class="card-visual adult"><img class="card-image" src="img/adult.png" alt="Cartoon adult"></div>
<h4 class="card-heading">Just right</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus
massa magna, id interdum ligula rhoncus eu. Vestibulum et dapibus
ipsum. Nullam rutrum vitae elit id aliquam. Nunc sed mi.
</p>
</section>
<section class="card">
<div class="card-visual old"><img class="card-image" src="img/old.png" alt="Cartoon old person"></div>
<h4 class="card-heading">Old fart</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus
massa magna, id interdum ligula rhoncus eu. Vestibulum et dapibus
ipsum. Nullam rutrum vitae elit id aliquam. Nunc sed mi.
</p>
</section>
</section>
</main>
<section class="about-us">
<h2>About us</h2><br/>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
facere possimus. Similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga.
</p><br/>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
facere possimus.
</p>
</section>
<section class="summary-grid">
<div class="summary-item item0">
<h1>How it works?</h1>
</div>
<div class="summary-item item1">
<h4 class="summary-number">01</h4>
<p>Answer a few questions <br/>about yourself</p>
</div>
<div class="summary-item item2">
<h4 class="summary-number">02</h4>
<p>Choose a plan.<br/>Get a quote.</p>
</div>
<div class="summary-item item3">
<h4 class="summary-number">03</h4>
<p>Answer some questions about<br/>your medical history.</p>
</div>
<div class="summary-item item4">
<h4 class="summary-number">04</h4>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="summary-item item5">
<h4 class="summary-number">05</h4>
<p>Done!</p>
</div>
</section>
<footer>
<p>^</p>
<a href="#">Take me up again!</a>
</footer>
</div>
</body>
</html>