-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (190 loc) · 15.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SINGOLO</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/fonts/fonts.css">
<link rel="stylesheet" href="./style.css">
</head>
<body id="home" class="page">
<header class="header">
<div class="headerContent">
<div class="headerBurgerMenu">
<div id="burger" class="headerBurgerButton">
<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.2C0 0.537259 0.537259 0 1.2 0H23.8C24.4627 0 25 0.537259 25 1.2C25 1.86274 24.4627 2.4 23.8 2.4H1.2C0.537259 2.4 0 1.86274 0 1.2ZM0 10C0 9.33726 0.537259 8.8 1.2 8.8H23.8C24.4627 8.8 25 9.33726 25 10C25 10.6627 24.4627 11.2 23.8 11.2H1.2C0.537259 11.2 0 10.6627 0 10ZM1.2 17.6C0.53726 17.6 0 18.1373 0 18.8C0 19.4627 0.537259 20 1.2 20H23.8C24.4627 20 25 19.4627 25 18.8C25 18.1373 24.4627 17.6 23.8 17.6H1.2Z" fill="white"/>
</svg>
</div>
<div id="mobileMenu" class="headerMobileMenu headerMobileMenuHidden mobileMenu ">
<nav class="mobileMenuNavigation mobileMenuNavigationHidden navigation">
<h1 class="headerLogoMobile headerLogo">SINGOLO<span class="headerAccent">*</span></h1>
<ul class="navigationListMobile">
<li class="navigationItemMobile"><a class="linkMobile navigationLinkMobile navigationLinkMobileStateActive linkHome " href="#">home</a></li>
<li class="navigationItemMobile"><a class="linkMobile navigationLinkMobile linkServices" href="#services">services</a></li>
<li class="navigationItemMobile"><a class="linkMobile navigationLinkMobile linkPortfolio" href="#portfolio">portfolio</a></li>
<li class="navigationItemMobile"><a class="linkMobile navigationLinkMobile linkAbout" href="#about">about</a></li>
<li class="navigationItemMobile"><a class="linkMobile navigationLinkMobile linkContact" href="#contact">contact</a></li>
</ul>
</nav>
<div class="mobileMenuCover"></div>
</div>
</div>
<h1 class="headerLogo">SINGOLO<span class="headerAccent">*</span></h1>
<nav class="navigation">
<ul class="navigationList" id="menu">
<li class="navigationItem">
<a class="navigationLink navigationLinkStateActive" href="#slider">home</a>
</li>
<li class="navigationItem">
<a class="navigationLink" href="#services">services</a>
</li>
<li class="navigationItem">
<a class="navigationLink" href="#portfolio">portfolio</a>
</li>
<li class="navigationItem">
<a class="navigationLink" href="#about">about</a>
</li>
<li class="navigationItem">
<a class="navigationLink" href="#contact">contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="plug"></div>
<main id="main" class="main">
<section id="slider" class="slider sliderRed">
<div id="slides" class="sliderContent">
<div class="sliderArrowControllers">
<img id="arrow-prev" class="sliderArrow left" src="./assets/images/arrow-prev.png" alt="Arrow prev.">
<img id="arrow-next" class="sliderArrow right" src="./assets/images/arrow-next.png" alt="Arrow next">
</div>
<div id="slideRed" class="sliderItem sliderItemActive">
<div class="sliderItemFrontSlide frontSlide">
<img class="frontSlidePhoneImageVertical" src="./assets/images/iphone-vertical.png" alt="IPhone">
<img class="frontSlidePhoneImageHorizontal" src="./assets/images/iphone-horizontal.png" alt="IPhone">
</div>
</div>
<div class="sliderItem sliderItemNext">
<div class="sliderItemBackSlide backSlide">
<img src="./assets/images/back-slide-phone-box.png" class="backSlidePhoneBox" alt="">
<img id="back-phone-display" src="./assets/images/back-slide-phone-display.png" class="backSlidePhoneDisplay" alt="">
<img src="./assets/images/back-slide-phone-shadow.png" class="backSlidePhoneShadow" alt="">
<img src="./assets/images/back-slide-phone-bg.png" class="backSlidePhoneLeft" alt="">
<img src="./assets/images/back-slide-phone-bg.png" class="backSlidePhoneRight" alt="">
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="servicesContent">
<h2 class="servicesTitle">Our Services</h2>
<p class="servicesSubtitle">Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<div class="benefits">
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/custom.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">Custom Design</h2>
<p class="benefitsText advantagesTextTopicServices">Curabitur vestibulum
eget mauris quis laoreet. Phasellus in quam laoreet, viverra lacus ut, ultrices velit.</p>
</div>
</div>
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/idea.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">Inovative Ideas</h2>
<p class="benefitsText">Quisque luctus, quam eget molestie com­modo,
lacus purus cursus purus, nec rutrum tellus dolor id lorem.</p>
</div>
</div>
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/love.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">Love Is The Answer</h2>
<p class="benefits__text">Nulla sed nunc et tortor luctus faucibus.
Morbi at aliquet turpis, et consequat felis. Quisque condimentum.</p>
</div>
</div>
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/responsive.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">Responsive Layout</h2>
<p class="benefitsText">Sed porttitor placerat rhoncus.
In at nunc tellus. Maecenas blandit nunc ligula. Prae­sent elit leo.</p>
</div>
</div>
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/support.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">24 / 7 Support</h2>
<p class="benefitsText">Vivamus vel quam lacinia, tincidunt dui non, vehicula nisi.
Nulla a sem erat. Pellen­tesque egestas venenatis lorem.</p>
</div>
</div>
<div class="benefitsItem">
<img class="benefitsIcon" src="./assets/images/star.png" alt="">
<div class="benefitsInfo">
<h2 class="benefitsTitle">Feel Like A Star</h2>
<p class="benefitsText">Quisque hendrerit purus dapibus, ornare nibh vitae, viverra nibh.
Fusce vitae aliquam tellus.</p>
</div>
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<div class="portfolioContent" >
<h2 class="portfolioTitle">Portfolio</h2>
<p class="portfolioSubtitle">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<div id="tabsMenu" class="portfolioTabs">
<button class="portfolioTabsItem portfolioTabsItemActive">All</button>
<button class="portfolioTabsItem">Web Design</button>
<button class="portfolioTabsItem">Graphic Design</button>
<button class="portfolioTabsItem">Artwork</button>
</div>
<div id="projects" class="portfolioPhotoGrid">
<img class="portfolioPhotoGridItem" src="./assets/images/image1.png" alt="Ship">
<img class="portfolioPhotoGridItem" src="./assets/images/image2.png" alt="Smiling girl">
<img class="portfolioPhotoGridItem" src="./assets/images/image3.png" alt="City">
<img class="portfolioPhotoGridItem" src="./assets/images/image4.png" alt="Robot">
<img class="portfolioPhotoGridItem" src="./assets/images/image5.png" alt="Rabbits">
<img class="portfolioPhotoGridItem" src="./assets/images/image6.png" alt="SDK">
<img class="portfolioPhotoGridItem" src="./assets/images/image7.png" alt="Robots">
<img class="portfolioPhotoGridItem" src="./assets/images/image8.png" alt="Birds">
<img class="portfolioPhotoGridItem" src="./assets/images/image9.png" alt="Monster">
<img class="portfolioPhotoGridItem" src="./assets/images/image10.png" alt="Cordons">
<img class="portfolioPhotoGridItem" src="./assets/images/image11.png" alt="Angry Monster">
<img class="portfolioPhotoGridItem" src="./assets/images/image12.png" alt="Shards of glass">
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footerContainer">
<div class="footerCopyright"><p>© Copyright 2013</p></div>
<div class="footerSocialIcons">
<a class="footerSocialIconsIcon" href="#"><svg class="socialIconsIconFacebookSvg" width="14px" height="14px" viewBox="0 0 50 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path id="" d="M50,15.65L35.72,15.65C34.03,15.65 32.14,17.87 32.14,20.84L32.14,31.15L50,31.15L50,45.85L32.14,45.85L32.14,90L15.29,90L15.29,45.85L0,45.85L0,31.15L15.29,31.15L15.29,22.5C15.29,10.09 23.9,0 35.72,0L50,0L50,15.65Z" style="fill:rgb(102,109,137);fill-rule:nonzero;"/>
</svg></a>
<a class="footerSocialIconsIcon" href="#"><svg class="socialIconsIconGooglePlusSvg" width="14px" height="14px" viewBox="0 0 90 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path id="" d="M4.75,21.94C4.75,29.41 7.25,34.8 12.17,37.94C15.527,39.95 19.377,40.989 23.29,40.94L24.69,40.94C24.385,44.524 25.438,48.095 27.64,50.94L27.47,50.94C21,50.89 0,52.23 0,69.52C0,87.1 19.31,88 23.18,88L24.45,88C29.583,88.012 34.658,86.917 39.33,84.79C47.07,81 51,74.49 51,65.36C51,56.54 45,51.29 40.65,47.45C37.98,45.11 35.65,43.09 35.65,41.12C35.65,39.15 37.33,37.62 39.46,35.71C42.91,32.63 46.15,28.25 46.15,19.96C46.15,12.67 45.21,7.78 39.39,4.68C40.646,4.333 41.932,4.106 43.23,4C46.38,3.56 51,3.07 51,0.5L51,0L28,0C27.78,0 4.75,0.86 4.75,21.94ZM41.87,67C42.31,74 36.29,79.22 27.26,79.88C18.23,80.54 10.54,76.43 10.1,69.4C9.975,65.821 11.516,62.379 14.27,60.09C17.449,57.322 21.461,55.689 25.67,55.45C26.19,55.45 26.67,55.39 27.21,55.39C35.71,55.39 41.46,60.38 41.87,67ZM35.87,17.12C38.12,25.05 34.72,33.35 29.29,34.88C28.664,35.052 28.019,35.139 27.37,35.14C22.37,35.14 17.47,30.14 15.64,23.14C14.615,19.682 14.699,15.988 15.88,12.58C17,9.41 19.09,7.23 21.69,6.5C22.316,6.328 22.961,6.241 23.61,6.24C29.62,6.24 33.48,8.72 35.87,17.13L35.87,17.12ZM74.61,34.41L74.61,19.41L65.11,19.41L65.11,34.41L50.11,34.41L50.11,43.91L65.11,43.91L65.11,58.91L74.61,58.91L74.61,43.91L89.61,43.91L89.61,34.41L74.61,34.41Z" style="fill:rgb(102,109,137);fill-rule:nonzero;"/>
</svg></a>
<a class="footerSocialIconsIcon" href="#"><svg class="socialIconsIconTwitterSvg" width="14px" height="14px" viewBox="0 0 92 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path id="" d="M92,8.85C88.558,10.388 84.903,11.399 81.16,11.85C85.103,9.496 88.055,5.782 89.46,1.41C85.753,3.609 81.698,5.161 77.47,6C73.902,2.215 68.925,0.067 63.724,0.067C53.361,0.067 44.834,8.594 44.834,18.957C44.834,20.375 44.994,21.788 45.31,23.17C30.137,22.415 15.98,15.24 6.4,3.45C1.426,12.028 4,23.135 12.24,28.65C9.245,28.564 6.315,27.754 3.7,26.29C3.695,26.37 3.695,26.45 3.7,26.53C3.72,35.464 10.075,43.222 18.83,45C16.052,45.754 13.137,45.864 10.31,45.32C12.762,53.004 19.876,58.31 27.94,58.47C21.256,63.716 12.997,66.563 4.5,66.55C2.996,66.551 1.493,66.461 0,66.28C8.626,71.831 18.672,74.779 28.93,74.77C63.65,74.77 82.64,46 82.64,21.06C82.64,20.25 82.64,19.43 82.58,18.62C86.278,15.951 89.468,12.642 92,8.85Z" style="fill:rgb(102,109,137);fill-rule:nonzero;"/>
</svg></a>
<a class="footerSocialIconsIcon" href="#"><svg class="socialIconsIconLinkedInSvg" width="14px" height="14px" viewBox="0 0 90 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="">
<path d="M20.38,9.62C20.38,14.94 16.45,19.24 10,19.24C3.92,19.24 0,14.94 0,9.62C0,4.3 4.05,0 10.25,0C16.45,0 20.25,4.18 20.38,9.62ZM0.51,88.74L0.51,26.84L19.75,26.84L19.75,88.74L0.51,88.74Z" style="fill:rgb(102,109,137);fill-rule:nonzero;"/>
<path d="M31.26,46.58C31.26,38.86 31.01,32.41 30.76,26.84L47.46,26.84L48.35,35.45L48.73,35.45C52.944,29.045 60.186,25.258 67.85,25.45C80.51,25.44 90,33.93 90,52.15L90,88.74L70.76,88.74L70.76,54.43C70.76,46.46 68,41 61,41C55.68,41 52.52,44.67 51.13,48.21C50.64,49.757 50.426,51.379 50.5,53L50.5,88.7L31.26,88.7L31.26,46.58Z" style="fill:rgb(102,109,137);fill-rule:nonzero;"/>
</g>
</svg></a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>