-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·119 lines (95 loc) · 4.33 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
<!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">
<title>PSD 2 HTML - Grid ex!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<section class="container header-wrapper flex align-center">
<div class="logo flex-1">
Blogin
<span>.</span>
</div>
<nav id="mainMenu" class="main-menu-wrapper">
<ul class="main-menu clean-list flex align-center">
<li>
<a href="#" class="active">Journal</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Work</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<button class="toggle-menu-btn fa" onclick="toggleMenu()" alt="Open main menu"></button>
<div class="toggle-menu-screen screen" onclick="toggleMenu()" alt="toggle main menu"></div>
</nav>
</section>
</header>
<div class="hero flex justify-center align-center">
<h1>PSD to Html grid ex!</h1>
</div>
<main>
<section class="container main-wrapper flex space-between">
<div class="first-panel text-wrapper">
<h2>Duis aute irure dolor in henderit in voluptate.</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo
doconsequat,
sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in
reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo
doconsequat,
sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in
reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</p>
<a href="#" class="more">Continue Reading</a>
</div>
<div class="second-panel">
<div class="images images-wrapper grid">
<h2 class="image-item placeholder"></h2>
<h2 class="image-item placeholder1"></h2>
<h2 class="image-item placeholder2"></h2>
</div>
<ul class="social-logos">
<li class="social-logo f flex align-center justify-center"><img src="/images/F.png"></li>
<li class="social-logo t flex align-center justify-center"><img src="/images/T.png"></li>
<li class="social-logo b flex align-center justify-center"><img src="/images/B.png"></li>
<li class="social-logo d flex align-center justify-center"><img src="/images/D.png"></li>
</ul>
</div>
</section>
<section class="pager main-pager container flex space-between">
<button class="prev">Previous</button>
<button class="next">Next</button>
</section>
</main>
<footer>
<section class="container">
<div class="logo">
Blogin
<span>.</span>
</div>
<small>© 2014 Blogin.com - All Rights Reserved - Find more free Templates at Pixelhint.com</small>
</section>
</footer>
<script>
function toggleMenu() {
var mainMenu = document.getElementById('mainMenu');
console.log(mainMenu);
mainMenu.classList.toggle('open');
}
</script>
</body>
</html>