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() { |
@font-face { |
||||||
$(this).stop(true,true).fadeTo(280 , 1); |
font-family: Code; |
||||||
}); |
src: url('fonts/codelight.otf'); |
||||||
$('.cdiv_1,.cdiv_2').mouseleave(function test3(){ |
} |
||||||
$(this).stop(true,true).fadeTo(600,0.6); |
|
||||||
}); |
|
||||||
|
|
||||||
|
/*header*/ |
||||||
|
|
||||||
//Change View Mode
|
|
||||||
|
|
||||||
$('input.vms').click(function test1() { |
header { |
||||||
$('#container>div#here').stop(true, true).fadeTo(500,0); |
height: 40px; |
||||||
setTimeout(cdivclass,510); |
width: 100%; |
||||||
setTimeout(c_fadein,550); |
/*border-bottom: 1px solid #e8e8e8;*/ |
||||||
$(this).toggleClass('vms'); |
} |
||||||
$(this).toggleClass('vmshl'); |
|
||||||
$('#viewmode-switch').css('margin', 'auto'); |
|
||||||
}); |
|
||||||
|
|
||||||
function cdivclass() { |
#viewmode-switch { |
||||||
$('#container>div#here').toggleClass('cdiv_1'); |
position:relative; |
||||||
$('#container>div#here').toggleClass('cdiv_2'); |
margin:auto; |
||||||
}; |
width:100px; |
||||||
|
} |
||||||
|
|
||||||
function c_fadein() { |
#vmsb{ |
||||||
$('#container>div#here').stop(true,true).fadeTo(500,0.5); |
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