Difference between revisions of "Team:Jiangnan China/CSS"

Latest revision as of 10:01, 28 June 2018

body{

font-family:Lora, 'Helvetica Neue', Helvetica, Arial,sans-serif;

position:relative; width:100%; height:100%; color:#fff; background-color:#000

}

html{

width:100%; height:100% }

h1, h2, h3, h4, h5, h6{

font-family:Cabin, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; margin:0 0 35px; letter-spacing:1px; text-transform:uppercase }

p{

font-family:Arial; font-size:16px; line-height:1.5; margin:0 0 25px }

@media (min-width:768px){

p{

font-size:18px; line-height:1.6; margin:0 0 12px }

}

a{

-webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; transition:all .2s ease-in-out; color:#42dca3 }

li{ text-align:left; }

a:focus, a:hover{

text-decoration:none; color:#1d9b6c }

mainNav{

font-family:Cabin, 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom:0; /*text-transform:uppercase;*/ border-bottom:1px solid rgba(255,255,255,.3); background-color:#000 }

mainNav .navbar-toggler{

font-size:14px; padding:11px; color:#fff; border:1px solid #fff }

mainNav .navbar-brand{

font-weight:700 }

mainNav a{

color:#fff }

mainNav .navbar-nav .nav-item{

-webkit-transition:background .3s ease-in-out; -moz-transition:background .3s ease-in-out; transition:background .3s ease-in-out }

mainNav .navbar-nav .nav-item:hover{

color:fade(white, 80%); outline:0; background-color:transparent }

mainNav .navbar-nav .nav-item:active,
mainNav .navbar-nav .nav-item:focus{

outline:0; background-color:transparent }

@media (min-width:992px){

#mainNav{

padding-top:20px; padding-bottom:20px; -webkit-transition:background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s; -moz-transition:background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s; transition:background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s; letter-spacing:1px; border-bottom:none; background:0 0 }

#mainNav.navbar-shrink{

padding-top:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.3); background:#000 }

#mainNav .nav-link.active{

outline:0; background-color:rgba(255,255,255,.3) }

#mainNav .nav-link.active:hover{

color:#fff }

}

.masthead{

display:table; width:100%; height:auto; padding:200px 0; text-align:center; color:#fff; background:url(../img/intro-bg.png) no-repeat bottom center scroll; background-color:#000; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover }

.masthead .intro-body{

display:block; vertical-align:middle }

.masthead .intro-body .brand-heading{

font-size:50px }

.masthead .intro-body .intro-text{

font-size:18px }

@media (min-width:768px){

.masthead{

height:100%; padding:0 }

.masthead .intro-body .brand-heading{

font-size:100px }

.masthead .intro-body .intro-text{

font-size:22px }

}

.btn-circle{

font-size:26px; width:55px; height:55px; margin-top:15px; line-height:38px; -webkit-transition:background .3s ease-in-out; -moz-transition:background .3s ease-in-out; transition:background .3s ease-in-out; color:#fff; border:2px solid #fff; border-radius:100%!important; background:0 0 }

.btn-circle:focus, .btn-circle:hover{

color:#fff; outline:0; background:rgba(255,255,255,.1) }

.content-section{

padding-top:150px; padding-bottom:150px }

.profile-section{

color:#000; margin-top: 0px; margin-bottom:0px; padding-bottom: 10px; padding-top:10px; background:url(../img/downloads-bg.jpg) no-repeat center center scroll; background-color:#000;

-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }

.remix-section{

color:#fff; background:url(../img/downloads-bg.jpg) no-repeat center center scroll; background-color:#000; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; padding-top:170px; padding-bottom:170px }

map{

width:100%; height:300px }

@media (min-width:992px){

.content-section{

padding-top:200px; padding-bottom:200px }

#map{

height:350px }

}

.btn{

font-family:Cabin, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; transition:all .3s ease-in-out; /*text-transform:uppercase;*/ border-radius:0 }

.btn-default{

color:#42dca3; border:1px solid #42dca3; background-color:transparent }

.btn-default:focus, .btn-default:hover{

color:#000; border:1px solid #42dca3; outline:0; background-color:#42dca3 }

ul.banner-social-buttons{

margin-top:0 }

@media (max-width:1199px){

ul.banner-social-buttons{

margin-top:15px }

}

@media (max-width:767px){

ul.banner-social-buttons li{

display:block; margin-bottom:20px; padding:0 }

ul.banner-social-buttons li:last-child{

margin-bottom:0 }

}

footer{

padding:50px 0 }

footer p{

font-size:14px; margin:0 }

-moz-selection{

background:#fcfcfc; background:rgba(255,255,255,.2); text-shadow:none }

selection{

background:#fcfcfc; background:rgba(255,255,.2); text-shadow:none }

img::selection{

background:0 0 }

img::-moz-selection{

background:0 0 }

body{

-webkit-tap-highlight-color:rgba(255,255,255,.2) }

particles-js{

display:flex; vertical-align:bottom; width:100%; min-height:100vh; background-repeat:no-repeat; background-size:cover; background-attachment:fixed }

particles-js .particles-js-canvas-el{

width:100%!important; height:100vh!important } .header{

z-index:1; text-align:center; color:#fff; position:absolute; top:50%; left:50%; margin:0 auto; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .header .site-title{

font-size:20px; display:block; line-height:1; color:#fff } @media only screen and (min-width:1000px){

.header .site-title{

margin:0; font-size:70px } } .header .site-description{

font-size:20px; display:block; line-height:1; color:#fff; margin-top:10px } @media only screen and (min-width:550px){

.header .site-description{

font-size:25px } } .header-links{

margin:10px } .header-links .link{

color:#fff; text-decoration:none; font-size:15px; margin:10px } @media only screen and (min-width:550px){

.header-links .link{

font-size:20px } } .header-icons{

display:flex; justify-content:center; text-align:center } .down,.header-icons .icon{

color:#fff; text-align:center } .header-icons .icon{

height:20px; padding:10px; border-radius:50%; border:2px solid #fff; transition:all .7s; width:20px; font-size:20px; margin:5px } .header-icons .icon:active,.header-icons .icon:hover{

color:#1a222c; background:#fff } @media only screen and (min-width:550px){

.header-icons .icon{

width:35px; height:35px; font-size:35px } } .down{

position:absolute; bottom:25px; width:100%; margin:0 auto; display:block; font-size:30px; cursor:pointer } .down .icon{

position:absolute; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:100px; height:100px; fill:#fff; -webkit-animation:pulse 1.3s infinite; animation:pulse 1.3s infinite } .down .icon:active,.down .icon:hover,.footer a:active,.footer a:hover{

color:#4b5664 }

about{

width:100%; margin:0 auto; /*max-width:960px*/ }

des{

background-color: #fff; padding: 50px; } @media only screen and (min-width:550px){

#about{

width:80% }

} .tech{

margin:10px } .user{

text-align:center; font-size:60px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between } .user p{

font-size:16px } @media only screen and (min-width:550px){

.user{

flex-wrap:nowrap; font-size:75px }

} .user-details{

text-align:center; margin:5px auto }

projects{

display:flex; flex-direction:column; justify-content:space-between; width:90%; max-width:960px; margin:0 auto } @media only screen and (min-width:550px){

#projects{

width:80% } } .user-projects{

margin:20px auto } .user-projects img{

max-width:100%; height:auto; border-radius:5px } .user-projects h5,body{

margin:0 } .user-projects li{

color:#1a222c; font-size:1.1rem } .user-projects p{

margin-right:5px } @media only screen and (min-width:550px){

.contents{

margin-left:0; width:48% } .contents-right{

margin-top:-5% } .contents-right,.images-right{

float:right; width:48% } .images-right img{ float:right } .images-left{ float:left; width:48% } .images-left img{ float:left }

} .project-link{ display:block; width:100px; margin:10px 0; padding:5px; color:#1a222c; background-color:transparent; border:1px solid #1a222c; border-radius:10px; text-align:center; outline:none; text-decoration:none; cursor:pointer; transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out } .project-link:active,.project-link:hover{ background-color:#54516a; border-color:#54516a; color:#fff; transition:color .3s ease-in,background-color .3s ease-in,border-color .3s ease-in } .footer{ background:#1a222c; padding:10px 0; margin-top:100px; text-align:center; color:#fff } .footer .love{ color:red } .footer a{ text-decoration:none; margin:0; color:#fff }

Revision as of 09:44, 28 June 2018 (view source) Wangzhihao (Talk \| contribs) ← Older edit	Latest revision as of 10:01, 28 June 2018 (view source) Wangzhihao (Talk \| contribs)
(4 intermediate revisions by the same user not shown)
(No difference)