-
Notifications
You must be signed in to change notification settings - Fork 0
/
mainpage.html
176 lines (160 loc) · 7.52 KB
/
mainpage.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/mqueries.css">
<title>Main page</title>
</head>
<body>
<header>
<div class="logo"><img src="https://i.ibb.co/1GD5Vj1/Screenshot-1.png" alt="logo"></div>
<div class="SignInForm">
<!--Sign in input field-->
<form action=""></form>
<input type="text" placeholder="Input E-Mail" required>
<input type="password" placeholder="Input Password" required >
<a href="#">Or register here.</a>
<label for="checkbox">Remember me </label>
<input type="checkbox" id="checkbox">
<button>Sign in</button>
</form>
</div>
<div class="menu-list">
<!-- Navbar menu list -->
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="mainpage.html">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="menu-item">
<a href="#0">Pages</a>
<ol class="sub-menu">
<li class="menu-item"><a href="gallery.html">Gallery</a></li>
<li class="menu-item"><a href="forum.html" style="margin:40px -80px;">Forum</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Dropdown</a>
<ol class="sub-menu" style="height:220px;">
<li class="menu-item" id="one"><a href="#0" style="margin:-10px -75px;">Page 1</a></li>
<li class="menu-item" id="two"><a href="#0" style="margin:50px -78px;">Page2</a></li>
<li class="menu-item" id="three"><a href="#0" style="margin:115px -80px;">Page3</a></li>
</ol>
</li>
</ul>
</nav>
</div>
</header>
<!--Head image with buttons-->
<div class="start-img">
<section class="txtandBtns">
<h1>Lorem ipsum</h1>
<h2>Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Get started</button>
<Button>Lorem ipsum</Button>
<section>
</div>
<!--Offers and price-->
<div class="offers">
<h1 align="center">Dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore enim pariatur assumenda illo? Quidem laudantium deleniti iste, culpa natus ut quisquam error ab aspernatur ex possimus aliquid molestiae tempora assumenda.</p>
<article>
<img src="https://image.ibb.co/cYPB2A/laptop-1.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam. </p>
<span align="center">90$</span>
<button>details</button>
</article>
<article>
<img src="https://image.ibb.co/ebQbKq/flask-1.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam. </p>
<span>120$</span>
<button>details</button>
</article>
<article>
<img src="https://image.ibb.co/g0KssA/cogwheel-1.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam. </p>
<span>40$</span>
<button>details</button>
</article>
</div>
<!--Mid page search bar-->
<div class="searchIconBar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<input type="text" placeholder="Search...">
</div>
<!--Second icon pack-->
<div class="scndIconPack">
<h1 align="center">Sed ut perspiciatis</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<article>
<img src="https://image.ibb.co/b2dJnA/award.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam[...] </p>
<button>Read more</button>
</article>
<article>
<img src="https://image.ibb.co/mh7TnA/diagram-1.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam[...] </p>
<button>Read more</button>
</article>
<article>
<img src="https://image.ibb.co/emXHfV/quality.png" height="65" width="65" alt="laptop">
<h2>consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nihil rem ad architecto quam[...] </p>
<button>Read more</button>
</article>
</div>
<!--Detail section-->
<div class="details">
<img src="https://pbs.twimg.com/profile_images/994911053812256768/7r3N8y8F_400x400.jpg" alt="profilePic" height="120" width="120">
<p>Strahinja Babic <br>FreecodeCamp Certfied<br> Selftaught webdeveloper</p>
</div>
<!--Info section-->
<div class="infoSection">
<p><img src="https://image.ibb.co/hvnVZq/phone.png" alt="phoneicon" height="20" width="20"><b>Give us a call</b>:<br>+0038765123456</p>
<p><img src="https://image.ibb.co/dL00Zq/inbox.png" alt="phoneicon" height="20" width="20"><b>Send us an e-mail</b>:<br>mail@domain.com</p>
<p><img src="https://image.ibb.co/nihVZq/timeline.png" alt="phoneicon" height="20" width="20"><b>Monday-Saturday</b>:<br>8.00am - 17.00pm</p>
<p><img src="https://image.ibb.co/c5Gk0V/placeholder.png" alt="phoneicon" height="20" width="20"><b>Come visit us</b>:<br>at our <a href="#">location</a></p>
</div>
<!--Footer section-->
<footer>
<!--Social buttons-->
<section class="social">
<h2 style="padding-bottom:10px;">Iusto harum sit debitis</h2>
<p style="color:rgb(196, 196, 196);">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto harum sit debitis facere asperiores accusantium in, repellendus odit dicta repudiandae sequi...</p>
<img src="https://image.ibb.co/bRTAjq/twitter-1.png" alt="twitter" border="0" height="30" width="30">
<img src="https://image.ibb.co/f91ucA/google-plus.png" alt="google-plus" border="0" height="30" width="30">
<img src="https://image.ibb.co/eiuEcA/linkedin.png" alt="linkedin" border="0" height="30" width="30">
<img src="https://image.ibb.co/bx4GPq/facebook-1.png" alt="facebook" border="0" height="30" width="30">
</section>
<section class="links">
<h2> Icon packages </h2>
<a href="https://www.flaticon.com/">Find over 1M flat icon packages here</a>
<span></span>
<a href="https://www.flaticon.com/authors/freepik">Icons that were used on this project were made by FreePik, make sure to check them out here</a>
</section>
<section class="updates">
<h2 style="color:white; padding-bottom: 10px;">Updates</h2>
<p style="color:wheat;">Lorem ipsum dolor sit amet <a href="#" style="color:red; text-decoration: none;">[...]</a></p>
<p id="date">Thursday, 5th April 2045</p>
<span></span>
<p style="color:wheat;"> amet consectetur adipisicing<a href="#" style="color:red; text-decoration: none;">[...]</a></p>
<p id="date">Thursday, 5th April 2045</p>
</section>
<section class="contact">
<h2>Contact us directly</h2>
<input type="text" placeholder="e-mail">
<textarea placeholder="leave a message"></textarea>
<button>Submit</button>
</section>
</footer>
</body>
</html>