<p class="copyright">
<span>Pen Developed by <a href="https://codepen.io/Himateja" target="_blank">Himateja</a>| <a href="https://twitter.com/iamhimateja" target="_blank">@iamhimateja</a> | <a href="http://himateja.in" target="_blank">Go to himateja.in</a></span>
</p>
<div class="wrapper">
<div class="container">
<div class="search">
<div class="input">
<input type="text" placeholder="Search..." autofocus>
</div>
</div>
<div class="top_right">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="menu">
<div class="menu_container">
<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>
</div>
</div>
<div class="top">
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
<ul class="top_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bottom">
<ul class="list">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="transform:rotate(90deg)">
<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M3 4l9 16 9-16h-18zm3.38 2h11.25l-5.63 10-5.62-10z"/>
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M19 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm0 16h-14v-14h14v14z"/>
</svg>
</li>
</ul>
</div>
</div>
</div>/* latin-ext */
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 300;
src: local("Lato Light"), local("Lato-Light"),
url(https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2)
format("woff2");
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 300;
src: local("Lato Light"), local("Lato-Light"),
url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2)
format("woff2");
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc,
U+2000-206f, U+2074, U+20ac, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* CSS RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Author - Himateja
Editor- Sublime Text 2 & Codepen
for - Dribbble Rebound - Material Design Drawer (Webkit only) - inspired by Jovie Brett
*/
@import url("//fonts.googleapis.com/css?family=Lato");
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
body {
height: 100%;
width: 100%;
background: #1de9b6;
position: absolute;
overflow: hidden;
}
.wrapper {
z-index: 2000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 500px;
background: url("https://i.imgur.com/AMf9X7E.jpg");
background-repeat: no-repeat;
background-size: contain;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.container.active {
background: rgba(0, 0, 0, 0.3);
}
.search {
position: absolute;
width: 100%;
height: 100px;
padding-top: 29px;
z-index: 2;
}
.container .search.active {
z-index: 0;
}
.container .search .input {
width: 500px;
height: 35px;
overflow: hidden;
padding: 8px 10px;
margin-left: 150px;
pointer-events: all;
z-index: 10;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
pointer-events: all;
}
.container .input input {
color: #717171;
font: 300 normal 16px/150% "Lato";
margin-top: -3px;
width: 460px;
border: none;
padding: 1px 4px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.container .input input:focus {
outline: none;
}
.container .top_right {
position: absolute;
width: 30px;
height: 20px;
right: 10px;
top: 1px;
}
.container .top_right ul {
display: inline-flex;
}
.container .top_right ul li {
display: block;
width: 15px;
height: 20px;
}
.container .top_right ul li:nth-child(1) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmY7IiBkPSJNMTIuMDEgMjEuNDlsMTEuNjMtMTQuNDljLS40NS0uMzQtNC45My00LTExLjY0LTQtNi43MiAwLTExLjE5IDMuNjYtMTEuNjQgNGwxMS42MyAxNC40OS4wMS4wMS4wMS0uMDF6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0aC0yNHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==");
background-repeat: no-repeat;
background-size: 15px;
background-position: 50%;
}
.container .top_right ul li:nth-child(2) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmY7IiBkPSJNMiAyMmgyMHYtMjB6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0aC0yNHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==");
background-repeat: no-repeat;
background-size: 15px;
background-position: 50%;
}
.container .menu {
position: absolute;
width: 720px;
height: 410px;
border-radius: 3px;
background-color: transparent;
margin-left: 40px;
bottom: 65px;
z-index: 1;
-webkit-clip-path: circle(19px at 357px 388px);
clip-path: circle(19px at 357px 388px);
overflow: hidden;
}
.container .menu.active {
background-color: #f3f3f3;
-webkit-clip-path: circle(530px at 357px 388px);
clip-path: circle(530px at 357px 388px);
}
.container .menu .menu_container {
position: relative;
width: 100%;
height: 100%;
padding: 25px;
background: #ffffff;
-webkit-clip-path: circle(335px at 50% 42%);
clip-path: circle(335px at 50% 42%);
transition-delay: 0.15s;
}
.container .menu .menu_container.active {
-webkit-clip-path: circle(430px at 50% 42%);
clip-path: circle(430px at 50% 42%);
}
.container .menu .menu_container .app {
background-color: rgb(45, 184, 241);
width: 60px;
height: 60px;
float: left;
margin: 25px;
position: relative;
}
.container .menu .menu_container.active .app {
cursor: pointer;
}
.container .menu .menu_container .app:hover {
-webkit-transform: scale3d(0.9, 0.9, 1) !important;
transform: scale3d(0.9, 0.9, 1) !important;
}
.container .menu .menu_container .app:active {
-webkit-transform: scale3d(0.7, 0.7, 1) !important;
transform: scale3d(0.7, 0.7, 1) !important;
}
.container .menu .menu_container .app:before {
border-radius: 50% / 10%;
bottom: -10%;
left: 0;
right: 0;
top: -10%;
}
.container .menu .menu_container .app:after {
border-radius: 10% / 50%;
bottom: 0;
left: -10%;
right: -10%;
top: 0;
}
.container .menu .menu_container .app:after,
.container .menu .menu_container .app:before {
background-color: inherit;
content: "";
position: absolute;
z-index: -1;
}
.container .menu .menu_container .app:nth-child(1) {
background-color: rgb(45, 184, 241);
}
.container .menu .menu_container .app:nth-child(2) {
background-color: rgb(119, 145, 157);
}
.container .menu .menu_container .app:nth-child(3) {
background-color: rgb(50, 235, 189);
}
.container .menu .menu_container .app:nth-child(4) {
background-color: rgb(93, 153, 247);
}
.container .menu .menu_container .app:nth-child(5) {
background-color: rgb(223, 90, 78);
}
.container .menu .menu_container .app:nth-child(6) {
background-color: rgb(242, 140, 36);
}
.container .menu .menu_container .app:nth-child(7) {
background-color: #e5e5e5;
}
.container .top .dots {
position: absolute;
bottom: -15px;
height: 20px;
margin-left: 367px;
overflow: hidden;
}
.container .top {
position: absolute;
width: 100%;
height: 65px;
bottom: 50px;
z-index: 0;
}
.container .top .dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
position: relative;
margin-left: 12px;
float: left;
transform: translateY(100px);
}
.container .top .dots span.active {
transform: translateY(0);
}
.container .top .dots span:nth-child(2),
.container .top .dots span:nth-child(3) {
opacity: 0.5;
}
.container .top .dots span:nth-child(2) {
transition-delay: 0.2s;
}
.container .top .dots span:nth-child(3) {
transition-delay: 0.3s;
}
.container .top ul.top_list {
display: inline-flex;
margin-left: 165px;
}
.container .top ul.top_list li {
width: 100px;
height: 50px;
text-align: center;
line-height: 100px;
}
.container .top ul.top_list li:hover {
-webkit-transform: scale3d(0.9, 0.9, 1) !important;
transform: scale3d(0.9, 0.9, 1) !important;
}
.container .top ul.top_list li:hover {
-webkit-transform: scale3d(0.7, 0.7, 1) !important;
transform: scale3d(0.7, 0.7, 1) !important;
}
.container .top ul.top_list li:nth-child(1) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+DQogPHBhdGggc3R5bGU9InN0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojNzc5MTlkOyIgZD0ibTMuMzQ2MDksMTMuOTczNyw0MS4yMDYxLDBjMC4yMTk5MDEsMCwwLjM5NjkzMywwLjE3NzAzMywwLjM5NjkzMywwLjM5NjkzM3YyMi4xMDYxYzAsMC4yMTk5MDEtMC4xNzcwMzIsMC4zOTY5MzQtMC4zOTY5MzMsMC4zOTY5MzRoLTQxLjIwNjFjLTAuMjE5OTAxLDAtMC4zOTY5MzMtMC4xNzcwMzMtMC4zOTY5MzMtMC4zOTY5MzR2LTIyLjEwNjFjMC0wLjIxOTksMC4xNzcwMzItMC4zOTY5MzMsMC4zOTY5MzMtMC4zOTY5MzN6Ii8+DQogPHBhdGggc3R5bGU9ImZpbGw6IzcxYzhlOTsiIGQ9Im00My44NTM0LDE1Ljc0NjZjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTEsMC40NDgtMSwxLTEsMSwwLjQ0OCwxLDF6Ii8+DQogPHBhdGggc3R5bGU9ImZpbGw6IzcxYzhlOTsiIGQ9Im00LjU1MzM5LDEyLjk0NjYsNy4xMiwwLDAsMS4wNi03LjEyLDB6Ii8+DQogPHBhdGggc3R5bGU9InN0cm9rZTojNzc5MTlkO2ZpbGw6bm9uZTsiIGQ9Im0zNi4yNTM0LDIzLjg0NjZjMCw2Ljg4LTUuNTcsMTIuNC0xMi40LDEyLjQtNi44OCwwLTEyLjQtNS41Ny0xMi40LTEyLjQsMC02Ljg4LDUuNTctMTIuNCwxMi40LTEyLjQsNi44OCwwLDEyLjQsNS41NywxMi40LDEyLjR6Ii8+DQogPHBhdGggc3R5bGU9InN0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjc1MzAwMDAyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojNGI2NTcxOyIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIGQ9Im0zNS40NDM0LDIzLjU0NjZjMCw2LjQzNjA2LTUuMjE5MzYsMTEuNjQ1NC0xMS42NDA2LDExLjY0NTQtNi40Mzc3NiwwLTExLjY0MDYtNS4yMDkzNC0xMS42NDA2LTExLjY0NTRzNS4yMTkzNi0xMS42NDU0LDExLjY0MDYtMTEuNjQ1NGM2LjQzNzc2LDAsMTEuNjQwNiw1LjIwOTM0LDExLjY0MDYsMTEuNjQ1NHoiLz4NCiA8cGF0aCBzdHlsZT0iZmlsbDojNzFjOGU5OyIgZD0ibTI4Ljc1MzQsMjMuNTQ2NmMwLDIuNzYtMi4yNCw1LTUsNXMtNS0yLjI0LTUtNSwyLjI0LTUsNS01LDUsMi4yNCw1LDV6Ii8+DQogPHBhdGggc3R5bGU9ImZpbGw6IzcxYzhlOTsiIGQ9Im00My44NTM0LDE1Ljc0NjZjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTEsMC40NDgtMSwxLTEsMSwwLjQ0OCwxLDF6Ii8+DQogPHBhdGggc3R5bGU9ImZpbGw6IzcxYzhlOTsiIGQ9Im00LjU1MzM5LDEyLjk0NjYsNy4xMiwwLDAsMS4wNi03LjEyLDB6Ii8+DQogPHBhdGggc3R5bGU9InN0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDpub25lOyIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIGQ9Im0zNi4xNTM0LDIzLjI0NjZjMCw2Ljg4LTUuNTcsMTIuNC0xMi40LDEyLjQtNi44OCwwLTEyLjQtNS41Ny0xMi40LTEyLjQsMC02Ljg4LDUuNTctMTIuNCwxMi40LTEyLjQsNi44OCwwLDEyLjQsNS41NywxMi40LDEyLjR6Ii8+DQogPHBhdGggc3R5bGU9InN0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjc1MzAwMDAyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojNGI2NTcxOyIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIGQ9Im0zNS40NDM0LDIzLjU0NjZjMCw2LjQzNjA2LTUuMjE5MzYsMTEuNjQ1NC0xMS42NDA2LDExLjY0NTQtNi40Mzc3NiwwLTExLjY0MDYtNS4yMDkzNC0xMS42NDA2LTExLjY0NTRzNS4yMTkzNi0xMS42NDU0LDExLjY0MDYtMTEuNjQ1NGM2LjQzNzc2LDAsMTEuNjQwNiw1LjIwOTM0LDExLjY0MDYsMTEuNjQ1NHoiLz4NCiA8cGF0aCBzdHlsZT0iZmlsbDojNzFjOGU5OyIgZD0ibTI4Ljc1MzQsMjMuNTQ2NmMwLDIuNzYtMi4yNCw1LTUsNXMtNS0yLjI0LTUtNSwyLjI0LTUsNS01LDUsMi4yNCw1LDV6Ii8+DQo8L3N2Zz4=");
background-repeat: no-repeat;
background-position: 50%;
background-size: 75px;
}
.container .top ul.top_list li:nth-child(2) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMCI+DQogPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4yNTQyMzcyOSwxLjkwNjc3OTcpIj4NCiAgPHBhdGggc3R5bGU9ImZpbGw6I2YyOGMyNDsiIGQ9Ik0xNi4xNzk4LTEuNTI4MDdjLTcuNzMyMDMsMC0xNS4yNDg5LDcuODcwMzQtMTQuMTc5OCwxNS41MjgxbDAuNjczMTcsNC44MjE1OGMwLjMyNTE0NywxLjE3NjU2LTAuMTQ2MDk4LTAuMDcwMjIsMC41NjU0NDUsMS45NDI0NmwxLjIxMDE4LDQuNzgyMmMwLjE4MzczLDAuNDQ3MiwwLjM2NzQ2LDAuNDEwOSwwLjU1MTIsMC40NTM3aDJsLTEuNDMwMDgtOGgtMC41Njk5MmMtMC4xNDE3MSwwLjEyMjQsMCwwLjI2ODMtMC41NTQ3OCwwLjYwMy0wLjQwNjI3LDAuMjQ1MS0wLjQ0NTIyLDAuMjA1NS0wLjQ0NTIyLTAuMjIyN2wtMC42NzQxNS00LjI5MDRjLTAuOTcxMDItNi4xNzk3OSw2LjE4MTk4LTE0LjM4MiwxMi44MDktMTQuMzgyLDYuNjI3LDAsMTMuMzUwMSw3LjcyMDU5LDEyLjQ5NDQsMTQuMjkyMS0wLjExMTg0NywwLjg1ODkwNC0wLjQwMzQ2OCwyLjU4ODc2LTAuNTE1MzE1LDMuMzg1MzctMC4wOTc4OSwwLjY5NzE3OS0wLjAxNiwwLjQ5MDE5LTAuMTEzODksMC44NzIxMzMtMC4xMjA2MTEsMC4xODc0ODYtMC4yMDU0MzMsMC41MzAwMTMtMC41Mjk5MjcsMC40NzI4NC0wLjMxMjgtMC4zMDk1LTAuMTEwOC0wLjMyNTgtMC40NzAxLTAuNzMwM2gtMC42MDI4bC0xLjM5NzIsOGgyYzAuMjc2MDEtMC4xMjI3NjksMC41ODIyMjQtMC4yMzM0NTUsMC41NjkwMzQtMC40NzE5MDRsMS4zOTcyNy01LjMwMzM4LDAuNDQ5NDMyLTEuOTk5ODQsMC41ODQzLTQuMjI0OWMxLjA1OTItNy42NTkxMS02LjA4ODItMTUuNTI4MS0xMy44MjAyLTE1LjUyODF6Ii8+DQogPC9nPg0KIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuODIyOTQxODksMCwwLDAuNjUyMDk2MzUsMjUuODI3MjY3LC0wLjg3NzQ3Nzc0KSI+DQogIDxwYXRoIHN0eWxlPSJmaWxsOiNmZGNiM2Y7IiBkPSJtLTI0LjQyMzUsMjAuMTUyYzEuMTM5MDgtNi41NDYwMSw2LjIzNzQ0LTEzLjE4MTQsMTIuNzA2NS0xMy4zNzgxLDYuNjI3LDAsMTEuMjcxLDYuODMxMjQsMTMuMjAxOSwxMy42NTMyLDIuMDc1NS0wLjA2MjUzLDEuOTg1OTQtMC4xNDYyMDUsMS45ODU5NC0wLjE0NjIwNS0xLjY0OTExLTkuMTc4LTguNzc4MDctMTYuNjMyOC0xNS4yMDI2LTE2LjQ1MzItNi41NTY2LDAuMTgzMzItMTMuMzU5Myw4LjUwMjg0LTE0Ljk1NjUsMTYuMzU1NiwwLjg4OTcxNSwwLjEwOTA3NCwxLjM4MTk5LDAuMDMyOTMsMi4yNjQ4LTAuMDMxMzN6Ii8+DQogPC9nPg0KIDxwYXRoIHN0eWxlPSJzdHJva2Utd2lkdGg6MDtmaWxsLXJ1bGU6bm9uemVybztzdHJva2UtbWl0ZXJsaW1pdDo0O2ZpbGw6I2ZkY2IzZjsiIGQ9Im01LjgyNjI3LDE5LjkwNjgsMS4zNDUzNC0wLjAzMTc4LDEuNDMyMiw3Ljk2ODIyLTEuMzQ5NTgsMC4wNjM1NnoiLz4NCiA8cGF0aCBzdHlsZT0ic3Ryb2tlLXdpZHRoOjA7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlLW1pdGVybGltaXQ6NDtmaWxsOiNmZGNiM2Y7IiBkPSJtMjYuNjQ4MywxOS44ODM1LTEuNDA4OS0wLjAzMTc4LTEuNTU3Miw4LjA1NTA4LDEuNTcyMDMtMC4wMDAwMDF6Ii8+DQo8L3N2Zz4=");
background-repeat: no-repeat;
background-position: 50%;
background-size: 50px;
}
.container .top ul.top_list li:nth-child(3) {
width: 45px;
height: 45px;
border-radius: 50%;
background: #fff;
margin: 5px 10px;
}
.container .top ul.top_list li:nth-child(4) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+DQogPGc+DQoNCiAgPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLXdpZHRoOjA7ZmlsbDojMWFhMTVkOyIgZD0ibTQwLjg1MzQsMjEuMTk1OWMwLDguMjc1NDEtNC41MzAxNiwxNS40Mjg1LTE2LjU0NDgsMjEuNDA2Ny0wLjQyMTEsMC4yMDk2LDAuMTc0NC01LjYwMjctMC4zMDg2LTUuNjAyNy05LjMwNzksMC0xNi44NTM0LTcuMDc1Ny0xNi44NTM0LTE1LjgwNCwwLTguNzI4MzIsNy41NDU1NC0xNS44MDQsMTYuODUzNC0xNS44MDQsOS4zMDc5LDAsMTYuODUzNCw3LjA3NTcsMTYuODUzNCwxNS44MDR6Ii8+DQoNCiA8L2c+DQoNCjwvc3ZnPg0KDQo=");
background-repeat: no-repeat;
background-position: 50%;
background-size: 60px;
}
.container .top ul.top_list li:nth-child(5) {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+DQogPGc+DQoNCiAgPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLXdpZHRoOjA7ZmlsbDojYzdkOGRlOyIgZD0ibTExLjIyNDYsNi4zNTg3NiwyNS45MDQ0LDBjMC4yOTgxOTgsMCwwLjUzODI2MSwwLjI2MjYwMywwLjUzODI2MSwwLjU4ODc5NXYxNS4xOTg1YzAsMC4zMjYxOTItMC4yNDAwNjMsMC41ODg3OTUtMC41MzgyNjEsMC41ODg3OTVoLTI1LjkwNDRjLTAuMjk4MTk4LDAtMC41MzgyNjItMC4yNjI2MDMtMC41MzgyNjItMC41ODg3OTV2LTE1LjE5ODVjMC0wLjMyNjE5MiwwLjI0MDA2NC0wLjU4ODc5NSwwLjUzODI2Mi0wLjU4ODc5NXoiLz4NCg0KICA8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2Utd2lkdGg6MDtmaWxsOiM2YTgxOGQ7IiBkPSJtMTEuMjI0NiwyMi43MzQ4LDI1LjkwNDQsMGMwLjI5ODE5NywwLDAuNTM4MjYxLDAuMjYyNjAzLDAuNTM4MjYxLDAuNTg4Nzk1djE1LjE5ODVjMCwwLjMyNjE5My0wLjI0MDA2NCwwLjU4ODc5Ni0wLjUzODI2MSwwLjU4ODc5NmgtMjUuOTA0NGMtMC4yOTgxOTgsMC0wLjUzODI2Mi0wLjI2MjYwMy0wLjUzODI2Mi0wLjU4ODc5NnYtMTUuMTk4NWMwLTAuMzI2MTkyLDAuMjQwMDY0LTAuNTg4Nzk1LDAuNTM4MjYyLTAuNTg4Nzk1eiIvPg0KDQogIDxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybztzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS13aWR0aDowO2ZpbGw6IzA4OGJkMzsiIGQ9Im04Ljg4NzYxLDcuOTk2MzYsMzAuNTc4MywwYzAuMjk4MTk3LDAsMC45NjQyOSwwLjQ5ODAxMiwwLjg5OTM2MywwLjgxODgwNGwtMi42OTgxLDEzLjMzMDhjLTAuMDY0OTMsMC4zMjA3OTEtMC4yNDAwNjMsMC41ODg3OTUtMC41MzgyNjEsMC41ODg3OTVoLTI1LjkwNDRjLTAuMjk4MTk4LDAtMC40NzMzMzYtMC4yNjgwMDQtMC41MzgyNjItMC41ODg3OTVsLTIuNjk3OTYtMTMuMzMwOGMtMC4wNjQ5Mi0wLjMyMDc5LDAuNjAxMTctMC44MTg4MSwwLjg5OTM3LTAuODE4ODF6Ii8+DQoNCiAgPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLXdpZHRoOjA7ZmlsbDojMGM5ZGRkOyIgZD0ibTguODg3NjEsMzcuMzc0LDMwLjU3ODMsMGMwLjI5ODE5NywwLDAuOTY0MjktMC40OTgwMTQsMC44OTkzNjMtMC44MTg4MDRsLTIuNjk4MS0xMy4zMzA5Yy0wLjA2NDkzLTAuMzIwNzktMC4yNDAwNjMtMC41ODg3OTQtMC41MzgyNjEtMC41ODg3OTRoLTI1LjkwNDRjLTAuMjk4MTk4LDAtMC40NzMzMzYsMC4yNjgwMDQtMC41MzgyNjIsMC41ODg3OTRsLTIuNjk3OTYsMTMuMzMwOWMtMC4wNjQ5MjUsMC4zMjA3OSwwLjYwMTE2NiwwLjgxODgwNCwwLjg5OTM2MywwLjgxODgwNHoiLz4NCg0KIDwvZz4NCg0KPC9zdmc+DQoNCg==");
background-repeat: no-repeat;
background-position: 50%;
background-size: 55px;
margin-left: -10px;
}
.container .bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: transparent;
}
svg {
fill: #ffffff;
stroke-width: 2px;
transition: none;
}
.container .bottom .list {
display: inline-flex;
width: 100%;
height: 50px;
line-height: 60px;
text-align: center;
margin-left: 225px;
}
.container .bottom .list li {
width: 115px;
cursor: pointer;
}
.container .bottom .list li:hover {
background: rgba(0, 0, 0, 0.42);
}
.copyright {
position: fixed;
font-family: "Lato";
background: white;
width: 100%;
height: 50px;
line-height: 50px;
bottom: 0;
text-align: center;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 4px;
}
a {
text-decoration: none;
color: rgb(220, 72, 127);
}
a:hover {
transition: none;
border-bottom: 1px solid rgb(220, 72, 127);
}
(function() {
var seq;
seq = setInterval(function() {
return $(".menu").toggleClass("active");
}, 2000);
seq = setInterval(function() {
return $(".container").toggleClass("active");
}, 2000);
seq = setInterval(function() {
return $(".menu_container").toggleClass("active");
}, 2000);
seq = setInterval(function() {
return $(".search").toggleClass("active");
}, 2000);
seq = setInterval(function() {
return $(".dots span").toggleClass("active");
}, 2000);
}.call(this));
External CSS
This Pen doesn't use any external CSS resources.