-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (131 loc) · 9.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fake Landing Page | Educational Purposes Only">
<meta name="author" content="JessIxAm">
<title>Skins</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- fontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!-- favicon -->
<link rel="shortcut icon" href="images/5.png" type="image/x-icon">
<!-- stylesheets -->
<link rel="stylesheet" href="css/template.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header id="header" class="flex">
<div class="img-div">
<a href="index.html"><img id="header-img" src="images/5.png" alt="company logo. a bottle and a flower surrounded from another flower"> </a>
</div>
<input id="checkbox-menu" type="checkbox" />
<label for="checkbox-menu" class="flex">
<span id="menu-toggler"></span>
</label>
<nav id="nav-bar" class="flex">
<ul class="flex">
<li class="nav-link flex"><a href="#services">Services</a></li>
<li class="nav-link flex"><a href="#products">Products</a></li>
<li class="nav-link flex"><a href="#blogandadvices">Blog & Advices</a></li>
</ul>
<div class="account flex">
<button class="sign signup">Sign Up</button>
<button class="sign signin">Sign In</button>
<button class="cart flex"><a href="https://github.com/jessixam" title="Easter Egg"><i class="fas fa-cart-plus"></i></a></button>
</div>
</nav>
</header>
<main id="main">
<section class="hero flex">
<div class="product_hero flex">
<span class="span_product">With this product</span>
<h1 id="title">Make your skin Fresh & smooth</h1>
<p>Have you ever dream of a glowing skin? Dream of staying as fresh as the 18 years old you?
We have the solution...
</p>
<a class="flex" href="#video">See how it works <i class="fas fa-arrow-circle-down"></i></a>
</div>
<div class="hero_image_container flex">
<div class="hero_image_shape flex">
<img class="hero_image" src="images/lanza-hero.jpg" alt="two bottle of Lanza products">
</div>
</div>
<form action="https://www.freecodecamp.com/email-submit" id="form" class="flex">
<div class="mail_regis flex">
<input id="email" type="email" name="email" required placeholder="Keep in touch ...">
<div class="fake_button flex">
<input id="submit" type="submit" value="Go">
<i class="fas fa-envelope"></i>
</div>
</div>
</form>
</section>
</main>
<div id="main_down">
<section class="other_section" id="services">
<h2> Services</h2>
<div class="card_container flex">
<div class="card flex">
<h4 class="card_title flex">Normal</h4>
<p class="card_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, consequuntur! Eaque, perferendis reprehenderit. Necessitatibus quos corporis maiores, labore perferendis ex!
</p>
<div class="price flex"> <span>0$</span> </div>
</div>
<div class="card flex">
<h4 class="card_title flex">Family</h4>
<p class="card_body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque sit atque blanditiis quod aspernatur eveniet ea nihil officiis maiores autem!
</p>
<div class="price flex"> <span>24$</span> </div>
</div>
<div class="card flex">
<h4 class="card_title flex">Prestige</h4>
<p class="card_body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore iure temporibus id modi reprehenderit sequi tenetur, ea beatae est?
</p>
<div class="price flex"> <span>64$</span> </div>
</div>
</div>
</section>
<section class="other_section" id="products">
<h2> Products</h2>
<p style="margin-bottom: 1rem; text-align: left;">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. In tempora possimus assumenda error aliquid! Ipsum ex unde aliquid doloremque dolores.
</p>
<div class="video_container">
<iframe id="video" src="https://www.youtube.com/embed/j0FnlTgLKjo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="remove">
<h4>Lorem</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aperiam vel beatae repellat impedit expedita voluptatum cupiditate quia. Assumenda animi eligendi veniam odit! Hic eius corporis nostrum, modi autem magni repudiandae dicta iure exercitationem numquam ea ab reprehenderit a id odio quod neque fugit, accusamus sapiente? Magni, quibusdam non ullam maiores quod deleniti accusamus, est necessitatibus, tempora perferendis laudantium quas ut sint consectetur esse exercitationem odit cum ipsa modi vero labore tempore nostrum eius. Dignissimos deleniti adipisci obcaecati consequatur eveniet reiciendis ipsam voluptatum beatae temporibus veritatis distinctio, dolorum cum necessitatibus expedita maxime praesentium accusamus! Autem, esse quaerat. Nostrum, illo assumenda?
</div>
</section>
<section class="other_section" id="blogandadvices">
<h2> Blog & Advices</h2>
<div class="remove">
<h4>Lorem</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aperiam vel beatae repellat impedit expedita voluptatum cupiditate quia. Assumenda animi eligendi veniam odit! Hic eius corporis nostrum, modi autem magni repudiandae dicta iure exercitationem numquam ea ab reprehenderit a id odio quod neque fugit, accusamus sapiente? Magni, quibusdam non ullam maiores quod deleniti accusamus, est necessitatibus, tempora perferendis laudantium quas ut sint consectetur esse exercitationem odit cum ipsa modi vero labore tempore nostrum eius. Dignissimos deleniti adipisci obcaecati consequatur eveniet reiciendis ipsam voluptatum beatae temporibus veritatis distinctio, dolorum cum necessitatibus expedita maxime praesentium accusamus! Autem, esse quaerat. Nostrum, illo assumenda?
</div>
<div class="remove">
<h4>Lorem</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aperiam vel beatae repellat impedit expedita voluptatum cupiditate quia. Assumenda animi eligendi veniam odit! Hic eius corporis nostrum, modi autem magni repudiandae dicta iure exercitationem numquam ea ab reprehenderit a id odio quod neque fugit, accusamus sapiente? Magni, quibusdam non ullam maiores quod deleniti accusamus, est necessitatibus, tempora perferendis laudantium quas ut sint consectetur esse exercitationem odit cum ipsa modi vero labore tempore nostrum eius. Dignissimos deleniti adipisci obcaecati consequatur eveniet reiciendis ipsam voluptatum beatae temporibus veritatis distinctio, dolorum cum necessitatibus expedita maxime praesentium accusamus! Autem, esse quaerat. Nostrum, illo assumenda?
</div>
</section>
</div>
<footer class="flex">
<span class="fake">FAKE </span>
This is a fake website. Made for only Educational purposes. I do not own or intend to own any of the products, images or other assets presented here.
</footer>
</div>
<a class="upbutton" href="#header"><i class="fas fa-chevron-circle-up fa-3x"></i></a>
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->
</body>
</html>