-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinsure.html
132 lines (108 loc) · 5.47 KB
/
insure.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;700&family=Public+Sans&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/navigation.js"></script>
<script src="js/contact.js"></script>
<script src="js/footer.js"></script>
<script defer src="js/nav.js"></script>
<script defer src="js/contact-no-line.js"></script>
<title>Frontend Mentor | Insure Project</title>
</head>
<body>
<div class="master-container">
<nav class="navigation-top">
<img src="./images/logo.svg" alt="" class="navigation-top__logo">
<button class="hamburger-menu"></button>
<div class="nav-container">
<ul class="nav-primary">
<li class="nav-primary__list-item"><a href="./index.html" id="home-link"
class="nav-primary__list-link">Home</a>
</li>
<li class="nav-primary__list-item"><a href="./portfolio.html"
class="nav-primary__list-link cyan">Portfolio</a>
</li>
<li class="nav-primary__list-item"><a href="./contact.html" class="nav-primary__list-link">Contact me</a></li>
</ul>
</div>
</nav>
<main>
<div class="project__hero-preview">
<picture class="project__hero">
<source media="(min-width: 1000px)" srcset="./images/detail/desktop/image-insure-hero@2x.jpg">
<source media="(min-width: 600px)" srcset="./images/detail/tablet/image-insure-hero@2x.jpg">
<img class="project__hero-picture" alt="world map" src="./images/detail/mobile/image-insure-preview-1@2x.jpg">
</picture>
</div>
<div class="main-content">
<div class="left-content">
<div class="project">
</div>
<div class="project__introduction-content">
<h2 class="project__heading">Insure</h2>
<p class="project__description description-text">This project required me to build a fully responsive landing
page to the designs provided.
I used HTML5, along with CSS Grid and JavaScript for the areas that required interactivity, such as the
testimonial slider.</p>
<p class="project__description-tools">Interaction Design / Front End Development <br> HTML / CSS / JS</p>
<button id="live-link" class="btn-secondary">visit website</button>
</div>
</div>
<div class="right-content">
<div class="project-background">
<h2 class="project-background__heading">Project background</h2>
<p class="project-background__description description-text">This project was a front-end challenge from
Frontend
Mentor. It’s a platform that enables you to practice building websites to a design and project brief. Each
challenge includes mobile and desktop designs to show how the website should look at different screen sizes.
Creating these projects has helped me refine my workflow and solve real-world coding problems. I’ve learned
something new with each project,
helping me to improve and adapt my style.</p>
</div>
<div class="static-previews">
<h2 class="static-previews__heading">Static Previews</h2>
<picture class="static-previews__picture">
<source media="(min-width: 1000px)" srcset="./images/detail/desktop/image-insure-preview-1@2x.jpg">
<source media="(min-width: 600px)" srcset="./images/detail/tablet/image-insure-preview-1@2x.jpg">
<img class="static-previews__image" alt="preview"
src="./images/detail/mobile/image-insure-preview-1@2x.jpg">
</picture>
<picture class="static-previews__picture">
<source media="(min-width: 1000px)" srcset="./images/detail/desktop/image-insure-preview-2@2x.jpg">
<source media="(min-width: 600px)" srcset="./images/detail/tablet/image-insure-preview-2@2x.jpg">
<img class="static-previews__image" alt="preview"
src="./images/detail/mobile/image-insure-preview-2@2x.jpg">
</picture>
</div>
</div>
<!--right-content-end-->
</div> <!--main-content-end-->
<div class="project-navigation">
<a href="./bookmark.html" class="project-navigation__previous">
<img src="./images/icons/arrow-left.svg" alt="arrow-left" class="project-navigation__left-arrow">
<div class="project-navigation__text-content">
<h3 class="project-navigation__heading">Bookmark</h3>
<p class="project-navigation__description">Previous Project</p>
</div>
</a>
<a href="./fylo.html" class="project-navigation__next">
<img src="./images/icons/arrow-right.svg" alt="arrow-right" class="project-navigation__right-arrow">
<div class="project-navigation__text-content">
<h3 class="project-navigation__heading">Fylo</h3>
<p class="project-navigation__description">Next Project</p>
</div>
</a>
</div>
<contact-component></contact-component>
</main>
</div>
<footer-component></footer-component>
</body>
</html>