-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (152 loc) · 7.61 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=DM+Serif+Display|Karla&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Insure landing page</title>
</head>
<body>
<div class="page">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white" id="navbar">
<a class="navbar-brand" href="/"><img src="images\logo.svg" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<ul class="navbar-nav ml-auto">
<li class=nav-item>
<a href="#"><button type="button" class="btn btn-default float-right">How we work</button></a>
</li>
<li class=nav-item>
<a href="#"><button type="button" class="btn btn-default float-right">Blog</button></a>
</li>
<li class=nav-item>
<a href="#"><button type="button" class="btn btn-default float-right">Account</button></a>
</li>
<li class="nav-item">
<a href="#"><button type="button" class="btn btn-default float-right">View plans</button></a>
</li>
</ul>
<img class="overlay5" src="images/bg-pattern-mobile-nav.svg">
</div>
</nav>
<!-- End Navbar -->
<!-- Header -->
<div class="row header">
<img class="col-lg-6 col-sm-12 order-lg-12" src="images\image-intro-desktop.jpg" alt="family">
<div class="col-lg-6 col-sm-12 mobile-cont order-lg-1">
<hr class="hr1">
<h1 class="light">Humanizing <br>your insurance.</h1>
<p class="light-small">
Get your life insurance coverage easier and faster. We blend our expertise
and technology to help you find the plan that’s right for you. Ensure you
and your loved ones are protected.
</p>
<a class="purple-button" href="#">View plans</a>
</div>
</div>
<!-- Note: Some reason there's a small gap in resizing this that makes the image 100% of the width while not conforming to the
mobile sizing. Need to evalaute before finishing -->
<!-- End Header -->
<!-- Content and Feature -->
<div class="content spacer">
<hr class="hr1">
<h1 class="dark col-sm-12">We’re different</h1>
</div>
<div class="row content">
<div class="col-lg-4 col-sm-12">
<img class="icons" src="images\icon-snappy-process.svg" alt="people-icon">
<h2>Snappy Process</h2>
<p class="gray">Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="col-lg-4 col-sm-12">
<img class="icons" src="images\icon-affordable-prices.svg" alt="people-icon">
<h2>Affordable Prices</h2>
<p class="gray">We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="col-lg-4 col-sm-12">
<img class="icons" src="images\icon-people-first.svg" alt="people-icon">
<h2>People First</h2>
<p class="gray">Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
<!-- End Content and Feature -->
<!-- How We Work -->
<div class="how-we-work">
<h2 class="lighth2">Find out more <br>about how we work</h2>
<a class="purple-button" id="al-right" href="#">How we work</a>
</div>
<!-- End How We Work -->
<!-- Footer Menu -->
<div class="section fmenu-container"> <!--footer menu-->
<div class="social-container">
<img class="pic-left" id="flogo" src="images\logo.svg" alt="Insure-logo">
<img class="pic-right" src="images\icon-instagram.svg" alt="instagram">
<img class="pic-right" src="images\icon-pinterest.svg" alt="pinterest">
<img class="pic-right" src="images\icon-twitter.svg" alt="twitter">
<img class="pic-right" src="images\icon-facebook.svg" alt="facebook">
</div>
<br>
<hr class="hr2">
<div class="row fmenu">
<div class="col-lg-3 col-sm-12 spacer-2">
Our company<br>
<br>
<a class="flink" href="#">How we work<br></a>
<a class="flink" href="#">Why Insure?<br></a>
<a class="flink" href="#">View plans<br></a>
<a class="flink" href="#">Reviews<br></a>
</div>
<div class="col-lg-3 col-sm-12 spacer-2">
Help me<br>
<br>
<a class="flink" href="#">FAQ<br></a>
<a class="flink" href="#">Terms of use<br></a>
<a class="flink" href="#">Privacy policy<br></a>
<a class="flink" href="#">Cookies<br></a>
</div>
<div class="col-lg-3 col-sm-12 spacer-2">
Contact<br>
<br>
<a class="flink" href="#">Sales<br></a>
<a class="flink" href="#">Support<br></a>
<a class="flink" href="#">Live chat<br></a>
</div>
<div class="col-lg-3 col-sm-12 spacer-2">
Others<br>
<br>
<a class="flink" href="#">Careers<br></a>
<a class="flink" href="#">Press<br></a>
<a class="flink" href="#">Licenses<br></a>
</div>
</div>
</div>
<!-- End Footer Menu -->
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
<div class="overlay" id="overlay">
<img class="overlay1 desk-gfx" src="images/bg-pattern-intro-right-desktop.svg">
<img class="overlay2 desk-gfx" src="images/bg-pattern-intro-left-desktop.svg">
<img class="overlay3 desk-gfx" src="images/bg-pattern-how-we-work-desktop.svg">
<img class="overlay4 desk-gfx" src="images/bg-pattern-footer-desktop.svg">
<img class="overlay1 mobile-gfx" src="images/bg-pattern-intro-right-mobile.svg">
<img class="overlay2 mobile-gfx" src="images/bg-pattern-intro-left-mobile.svg">
<img class="overlay3 mobile-gfx" src="images/bg-pattern-how-we-work-mobile.svg">
<img class="overlay4 mobile-gfx" src="images/bg-pattern-footer-mobile.svg">
</div>
</div>
</body>
</html>