gabriel becker
2 years ago
3 changed files with 177 additions and 63 deletions
@ -1,34 +1,147 @@
|
||||
$(document).ready(function () { |
||||
body { |
||||
margin: 0px; |
||||
padding: 0px; |
||||
background-color: #000; |
||||
height: 100%; |
||||
width: 100%; |
||||
position:absolute; |
||||
} |
||||
|
||||
body::-webkit-scrollbar { |
||||
width: 10px; |
||||
} |
||||
|
||||
//Content Fade
|
||||
body::-webkit-scrollbar-track { |
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
||||
border: none; |
||||
} |
||||
|
||||
body::-webkit-scrollbar-thumb { |
||||
background-color: #cccccc; |
||||
outline: 1px solid #cccccc; |
||||
} |
||||
|
||||
$('.cdiv_1,.cdiv_2').mouseenter(function test2() { |
||||
$(this).stop(true,true).fadeTo(280 , 1); |
||||
}); |
||||
$('.cdiv_1,.cdiv_2').mouseleave(function test3(){ |
||||
$(this).stop(true,true).fadeTo(600,0.6); |
||||
}); |
||||
@font-face { |
||||
font-family: Code; |
||||
src: url('fonts/codelight.otf'); |
||||
} |
||||
|
||||
/*header*/ |
||||
|
||||
//Change View Mode
|
||||
|
||||
$('input.vms').click(function test1() { |
||||
$('#container>div#here').stop(true, true).fadeTo(500,0); |
||||
setTimeout(cdivclass,510); |
||||
setTimeout(c_fadein,550); |
||||
$(this).toggleClass('vms'); |
||||
$(this).toggleClass('vmshl'); |
||||
$('#viewmode-switch').css('margin', 'auto'); |
||||
}); |
||||
header { |
||||
height: 40px; |
||||
width: 100%; |
||||
/*border-bottom: 1px solid #e8e8e8;*/ |
||||
} |
||||
|
||||
function cdivclass() { |
||||
$('#container>div#here').toggleClass('cdiv_1'); |
||||
$('#container>div#here').toggleClass('cdiv_2'); |
||||
}; |
||||
#viewmode-switch { |
||||
position:relative; |
||||
margin:auto; |
||||
width:100px; |
||||
} |
||||
|
||||
function c_fadein() { |
||||
$('#container>div#here').stop(true,true).fadeTo(500,0.5); |
||||
} |
||||
}); |
||||
#vmsb{ |
||||
outline-color: transparent; |
||||
position:relative; |
||||
margin-top:2.5px; |
||||
width: 100px; |
||||
color: white; |
||||
font-family: Code; |
||||
font-size: 22px; |
||||
height: 34px; |
||||
border-radius: 30px; |
||||
position: absolute; |
||||
} |
||||
|
||||
.vms { |
||||
background-color: #d9d9d9; |
||||
border: 1px solid transparent; |
||||
transition: background-color 1s; |
||||
position: absolute; |
||||
} |
||||
|
||||
.vmshl { |
||||
background-color: #4a5d68; |
||||
transition: background-color 1s; |
||||
border: 1px solid transparent; |
||||
position: absolute; |
||||
} |
||||
|
||||
/*content*/ |
||||
|
||||
content { |
||||
|
||||
} |
||||
|
||||
#container { |
||||
margin:auto; |
||||
max-width:948px; |
||||
margin-top:200px; |
||||
margin-bottom:40px; |
||||
transition: height 1s; |
||||
} |
||||
|
||||
.cdiv_1 { |
||||
height:200px; |
||||
width:200px; |
||||
border-radius:100%; |
||||
box-shadow: 0 0 10px black; |
||||
border: 7px solid #e8e8e8; |
||||
display: inline-block; |
||||
margin-right:20px; |
||||
margin-bottom:40px; |
||||
opacity:0.5; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.cdiv_2{ |
||||
height: 100px; |
||||
width: 100px; |
||||
border-radius:100%; |
||||
box-shadow: 0 0 7px black; |
||||
border: 3px solid #e8e8e8; |
||||
display: inline-block; |
||||
margin-right: 10px; |
||||
margin-bottom:20px; |
||||
opacity:0.5; |
||||
background-color: #e2e2e2; |
||||
} |
||||
|
||||
.cdiv_1 img { |
||||
height:200px; |
||||
width:200px; |
||||
border-radius:100%; |
||||
opacity:0,6; |
||||
} |
||||
|
||||
.cdiv_2 img { |
||||
height:100px; |
||||
width:100px; |
||||
border-radius:100%; |
||||
opacity:0,6; |
||||
} |
||||
|
||||
.cdiv_1:nth-child(4) { |
||||
margin-right:0px; |
||||
} |
||||
|
||||
.cdiv_1:nth-child(8) { |
||||
margin-right:0px; |
||||
} |
||||
|
||||
.cdiv_1:nth-child(12) { |
||||
margin-right:0px; |
||||
} |
||||
|
||||
.cdiv_2:nth-child(8) { |
||||
margin-right:0px; |
||||
} |
||||
|
||||
.cdiv_2:nth-child(16) { |
||||
margin-right:0px; |
||||
} |
||||
|
||||
.cdiv_2:nth-child(24) { |
||||
margin-right:0px; |
||||
} |
Loading…
Reference in new issue