-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (218 loc) · 10.7 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PSDtoHTML</title>
<style>a{text-decoration-line:none}p{font-size:16px;font-family:'Roboto',sans-serif;font-weight:300}img{width:100%}ul{list-style:none}span{font-size:12px}h1{font-weight:800;color:#f5f5f5;font-size:130px;line-height:126px}h2{font-weight:700;padding:50px 0;font-size:32px}h3{font-weight:500;font-size:18px}h4{font-family:'Roboto',sans-serif;font-weight:400;font-size:14px}h1,h2,h3,h4{text-transform:uppercase}html{margin:0;padding:0;height:100%;overflow:hidden;width:100%;height:100%}body{perspective:1.1px;transform-style:preserve-3d;overflow-y:scroll;overflow-x:hidden;width:100%;height:100%}.nw{margin:0 auto;width:1200px;font-size:0}header{overflow:hidden;height:100%;min-height:500px;width:100%}header::before{content:'';display:block;position:absolute;left:0;right:0;bottom:0;top:0;z-index:-1;transform-origin:center;background:url('img/bg1.png') no-repeat;background-size:cover;transition:1s;transform:translateZ(-1px) scale(2)}#menu{border-bottom:1px solid rgba(255,255,255,0.3)}.menu-ct{display:flex;justify-content:space-between}#logo{height:116px}#logo img{padding:20px}#toogle{display:none}nav{text-align:right;width:85%;display:flex;justify-content:space-between}nav ul{display:flex}.nav-menu a{display:block;padding:0 25px;font-weight:500;font-family:'Roboto',sans-serif;line-height:116px;font-size:18px;color:white;transition:.3s}.nav-img a{display:block;padding:0 15px;line-height:116px;font-size:18px;color:white;transition:.3s}nav a:hover{opacity:.6}.nav-img img{width:initial}.header-content{text-align:center;padding:15vh 0;position:relative;height:calc(100% - 116px)}.header-content h3{font-size:24px;letter-spacing:14px;color:#176586}.header-content span{display:block;text-align:center;font-size:10px;position:absolute;width:100%;bottom:20%;color:white}#header-but{cursor:pointer;position:absolute;bottom:5%;margin-left:-30px;width:60px;height:60px;text-align:center;line-height:60px;font-size:20px;background:0;background:url(img/arrow-down.png) no-repeat;background-size:16px 16px;background-position:center;border:1px solid rgba(255,255,255,0.3);border-radius:50%}.header-content button:focus{outline:0;box-shadow:0 0 0 1px #2f7cc0}</style>
</head>
<body>
<header>
<div id="menu">
<div class="menu-ct nw">
<div id="logo">
<img src="img/cs.png" alt="">
</div>
<nav>
<label for="toogle">☰</label>
<input type="checkbox" id="toogle">
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Extensions</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="nav-img">
<li><a href="#"><img src="img/face.png" alt=""></a></li>
<li><a href="#"><img src="img/twit.png" alt=""></a></li>
<li><a href="#"><img src="img/sky.png" alt=""></a></li>
<li><a href="#"><img src="img/in.png" alt=""></a></li>
</ul>
</nav>
</div>
</div>
<div class="header-content nw">
<h1>Creatives</h1>
<h3>Powered by psdreebies.com</h3>
<span>Scroll Down</span>
<button id="header-but"></button>
</div>
</header>
<!-- Секция с описанием преимуществ -->
<section id="w">
<h2>We are an awesome agency</h2>
<article class="nw">
<div class="w-div">
<div class="w-back">
<img src="img/write.png" alt="">
</div>
<h4>Feature one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, nisi!</p>
</div>
<div class="w-div">
<div class="w-back">
<img src="img/write.png" alt="">
</div>
<h4>Feature one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus, dolor animi totam.</p>
</div>
<div class="w-div">
<div class="w-back">
<img src="img/search (and thou shall find).png" alt="">
</div>
<h4>Feature one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore rem nemo rerum recusandae.</p>
</div>
<div class="w-div">
<div class="w-back">
<img src="img/simon says.png" alt="">
</div>
<h4>Feature one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quas veniam natus.</p>
</div>
</article>
</section>
<!-- Новостная часть-->
<section id="news">
<div class="news-text-left">
<div class="black">
<span>Jan 4 2016 | in Culture</span>
<h3>Akita Inu Dog</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam exercitationem voluptates error odit alias aut assumenda incidunt molestiae laudantium beatae. Aliquam, libero consequatur, veniam voluptatem temporibus rem ab mollitia sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur expedita, deserunt earum tempora quibusdam sit quod?</p>
</div>
</div>
<div class="news-img"><img src="img/bim1.png" alt=""></div>
<div class="news-img"><img src="img/bim2.png" alt=""></div>
<div class="news-text-right">
<div class="white">
<span>Jan 4 2016 | in Culture</span>
<h3>Akita Inu Dog</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam exercitationem voluptates error odit alias aut assumenda incidunt molestiae laudantium beatae. Aliquam, libero consequatur, veniam voluptatem temporibus rem ab mollitia sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur expedita, deserunt earum tempora quibusdam sit quod?</p>
</div>
</div>
</section>
<!-- Блог -->
<section id="blog">
<h2>Let's blog</h2>
<h3>We love clean design and advanced digital solutions.</h3>
<article id="arc-blog" class="nw">
<div class="blog-div">
<img src="img/blog1.png" alt="">
<h3>Fresh summer camping</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam dicta, dolores, deserunt id adipisci soluta. Eaque porro, distinctio alias praesentium nihil ullam at, iusto eos molestiae aperiam doloremque perspiciatis sit.</p>
</div>
<div class="blog-div">
<img src="img/blog2.png" alt="">
<h3>Fresh summer camping</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam dicta, dolores, deserunt id adipisci soluta. Eaque porro, distinctio alias praesentium nihil ullam at, iusto eos molestiae aperiam doloremque perspiciatis sit.</p>
</div>
<div class="blog-div">
<img src="img/blog3.png" alt="">
<h3>Fresh summer camping</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam dicta, dolores, deserunt id adipisci soluta. Eaque porro, distinctio alias praesentium nihil ullam at, iusto eos molestiae aperiam doloremque perspiciatis sit.</p>
</div>
<div class="blog-div">
<img src="img/blog1.png" alt="">
<h3>Fresh summer camping</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam dicta, dolores, deserunt id adipisci soluta. Eaque porro, distinctio alias praesentium nihil ullam at, iusto eos molestiae aperiam doloremque perspiciatis sit.</p>
</div>
</article>
<article id="arc-details">
<div class="blog-details-ct nw">
<div class="blog-details">
<img src="img/write.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam deserunt, dicta unde illo error quam tenetur, modi nihil, at repudiandae veniam. Dolorem mollitia, incidunt, sed eaque totam repellat explicabo illo.</p>
</div>
<div class="blog-details">
<img src="img/write.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam deserunt, dicta unde illo error quam tenetur, modi nihil, at repudiandae veniam. Dolorem mollitia, incidunt, sed eaque totam repellat explicabo illo.</p>
</div>
</div>
</article>
</section>
<!-- Описание возможностей-->
<section id="desk">
<div id="desk-text">
<div>
<h2>Akita Inu Dog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eos quia ad praesentium adipisci, vero error, assumenda officia voluptates quidem, iure, ipsa earum! Officia reiciendis optio minima eaque quibusdam reprehenderit?</p>
<ul>
<li id="desk-li-1">Fully responsive design</li>
<li id="desk-li-2">High quality code</li>
<li id="desk-li-3">Different headers & layout</li>
</ul>
</div>
</div>
<div id="desk-img"></div>
</section>
<!-- Команда разработки -->
<section id="team">
<h2>Our team</h2>
<h3>sales long tail influancer pitch release niche mraket.</h3>
<article class="nw">
<button id="slide-but-1" onclick="slide_left()"></button>
<ul id="slider">
<li class="team-div">
<img class="team-img" src="img/t1.png" alt="">
<div class="team-text">
<h3>John Snow</h3>
<h4>CEO</h4>
</div>
</li>
<li class="team-div">
<img class="team-img" src="img/t2.png" alt="">
<div class="team-text">
<h3>Leo Manak</h3>
<h4>WebDesigner</h4>
</div>
</li>
<li class="team-div">
<img class="team-img" src="img/t3.png" alt="">
<div class="team-text">
<h3>David Smith</h3>
<h4>Photographer</h4>
</div>
</li>
<li class="team-div">
<img class="team-img" src="img/t4.png" alt="">
<div class="team-text">
<h3>Lady Sansa</h3>
<h4>Photographer</h4>
</div>
</li>
</ul>
<button id="slide-but-2" onclick="slide_right()"></button>
</article>
</section>
<!-- Оставить отзыв -->
<section id="contact">
<h2>We'd love to hear about your project.</h2>
<form class="nw">
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="E-mail">
<input type="text" id="phone" placeholder="Phone">
<textarea id="message" cols="30" rows="10" placeholder="Message"></textarea>
<button id="submit">submit</button>
</form>
<map name="main"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7924.359849597789!2d35.04771810672735!3d48.46408653208967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf0d27ffa5285f7ee!2sThe+Place!5e0!3m2!1sru!2sua!4v1534347836131" frameborder="0" style="border:0" allowfullscreen></iframe></map>
</section>
<footer>
<article class="nw">
<!-- Добавить авторство (С в кругу)-->
<h4>2016 PSDfreebies.com - All Right Reserved</h4>
<img src="img/foot-text.png" alt="">
</article>
</footer>
<script>
function loadCSS(hf) {
var ms=document.createElement("link");ms.rel="stylesheet";
ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
}
loadCSS("style.css"); //User Styles: Main
loadCSS("media.css"); //User Styles: Media
</script>
<script src="script.js"></script>
</body>