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

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
body{
 
body{
  
−
background-color:#000;
+
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
 
}
 
}

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 }

  1. 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 }

  1. mainNav .navbar-toggler{

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

  1. mainNav .navbar-brand{

font-weight:700 }

  1. mainNav a{

color:#fff }

  1. 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 }

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

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

  1. mainNav .navbar-nav .nav-item:active,
  2. 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 }

  1. 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) }

  1. particles-js{


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

  1. 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 }

  1. about{

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

  1. 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 }

  1. 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 }