CODE CSS & RESPONSIVE : LAMAN NAURAH LEE

- Oktober 13, 2016

CSS

/* CSS STYLESHEET FOR NURAH*/
body{
	background:url(bg.jpg);
	font-family:century gothic, sans-serif;
	margin-left:15px; 
	font-size:16px;}

header{
	background:lightcoral;
	width: 100%;}
	
.seg-bar{
	cursor:pointer;
	text-align: center;
	width:50%;
	vertical-align: middle;
	display: table-cell;}

.search input{
	padding: 7px 7px 7px 7px;
	color:gray ;
	background:snow;
	}	
.icon{
	display: block;
	position:absolute;}
	
/*--NAVIGATION--*/
nav{
	background:white;
	padding:4px ;
	text-align:center ;}

nav ul{
	list-style:none;}
nav li{
	display:inline-block;
	padding: 0px 9px 0px 9px;}
nav a{
	text-decoration: none;
	letter-spacing: 0.1em;
	color:black ;
	}
nav a:hover{
	border-bottom:1.5px dashed lightcoral ;
	color: lightcoral;}
	
/* ---------------------------->    ARTICLE, SECTION, CONTENT IN HERE                                */

.container{
	align-content: center;}
	
.row{
	margin-left: 15px;
	margin-right: 15px;}
.row img{
	height:40%}
	
.box{
	width:60%;
	border-bottom:10px solid lightcoral;
	color:white;
	margin:3px 0 3px 0;}

.no-box{
	background:transparent;
	margin:0px;
	padding: 15px 25px 15px 25px;}
.no-box img{
	height:55%;}

.white-box{
	background:white;
	margin:0px;
	padding: 15px 25px 15px 25px;
	width:auto;}
	
.white-box img{
	width:45%;}
.white-box td{
	width:35% ;}
	
.about td{
	width:20%;}

section{
	width:100% ;
	display: block;}
	
.banner img{
	width:100%;}
.banner img:hover{
	transform:none;}

h1,h2,h3,h4,h5,h6{
	text-shadow:5px 5px 10px gray;
	text-align:center;}

td{padding: 20px 5px 10px 5px;}

.sign-in{
	position: relative;
 	min-height: 1px;
  	width: 30%;
  	margin: 20px 0px 5px 0px;}
  	
 .panel{
 	background:salmon;
 	padding:10px;
 	border-top-left-radius:20px;
  	border-top-right-radius:20px;}
  	
 .desc{
 	background:lightgoldenrodyellow;
 	padding: 5px;
 	border-bottom-left-radius:20px;
 	border-bottom-right-radius:20px;
	font-size:14px ;
	color:maroon ;}
 
 .desc input{
 	background:lavender;
 	padding:10px ;
 	margin: 3px;
 	color:lightcoral ;}
.desc input[type="button"]{
	cursor:pointer ;
	font-weight:bold ;}
.desc input:focus{
 	background:white;
 	color:lightcoral ;}
 
.td-o{
	background:lightsalmon;
	text-align: center;}
button{
	background:black ;
	color:white ;
	padding:20px ;
	font-size: 20px;
	cursor: pointer;}
button:focus{
	background:seagreen;}
	
.btn-order{
	background:black;
	font-size:15px; 
	color:white ;
	padding:10px ;}
.btn-order:focus{
	background: white;
	color:black ;}
	
.form{
	margin:inherit;
	width:50%;}
	
.form input{
	margin:2px 0 5px 0 ;
	border:1px solid salmon ;
	padding:3px 2px 3px 2px ;
	color:salmon ;
	width: 200px;}
input[type="checkbox"], input[type="radio"]{
	width:30px ;}
select{
	background:lightyellow;
	padding:5px ;
	color:orangered;}
	
.form input:focus{
	box-shadow: 2px 2px 4px lightcoral;
	border:2px solid snow ;}
.form textarea{
	background:ivory;
	color:salmon ;
	width:250px ;}

img:hover{
	positon:absolute;
	z-index:1030 ;
	-o-transition: all 0.3s;
	-moz-transition: all 0.3s;
	webkit-transition:all 0.3s;
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-webkit-transform:scale(1.5);}
	
.center{text-align:center;}
	
/* CARD */

.card{
  	box-shadow:0 8px 16px 0 gray !important ;
  	position:relative ;
  	width:;
  	display:inline-block;
  	margin:3px ;}
  	
 .card figure{
 	margin:1px;
  	padding:2px;
	position:relative;}
  
 .card figcaption, figcaption h4{text-align: left;}
 .card figure img{
  width:100% ;
  display:block;
  position:relative;
  align: center;}
	 
.card button{
	background:lightcoral ;
	padding: 2px 4px 2px 4px;
	position: inherit;}
	
.card span{
	width:75%;}
	
/* END CARD */

.note{
	position:absolute;
	width:20% ;
	background:lightcoral;
	color: white;
	border-radius:12px ;
	font-size: 15px;
	padding:8px ;}

button[type="submit"] span{
	display:none;}
button[type="submit"]:focus span{
	display:block;}

.social{
	float:left;
	position:absolute;
	width:15%;}
.social li{
	list-style:none;}

hr {
  background: url("../img/hr.png") no-repeat scroll 50% 0 transparent;
  border: medium none;
  height: 19px;
  margin: 0px 0 10px;
}

/*                                 END ARTICLE, SECTION, CONTENT IN HERE       <-------------------- */
	
footer, footer a{
	background:lightcoral;
	color:white;
	padding:3px 3px 3px 3px ;}

footer ul{
	list-style:none;}
footer li{
	display:inline-block;}
footer a{
	text-decoration: none;
	}

footer a:hover{
	border-bottom:1px dashed white;}

RESPONSIVE

@media (min-width: 1000px) {
    /*-----*/
	.body{width:99%;}
	.sign-in{width: 45%;}
	.form table{width:100%;}
    }

@media (min-width: 768px) and (max-width: 979px) {

/*-----*/
	body{width:99%;
		margin:1px ;}

.desc input{width:250px;}
	.desc input[type="button"]{width:130px;}
	.sign-in{width: 45%;}

}

@media (max-width: 768px) {

header {
        position: relative;}

/* body container */
    .container {
        margin: 0px!important;
        position: none !important;}

.form table{width:100%;}
	.form input{width:200px;}
	.form input[type="checkbox"],.form input[type="radio"]{width:15px;}
	.item input{width:140px ;}
	
	
	.desc input{width:200px;}
	.desc input[type="button"]{width:130px;}
	.sign-in{width: 300px;}

/* sidebar */
    nav {margin: 0px !important;}

/* sidebar collabler */

#seg-bar{
        position: absolute;
        right: 35px;
        width: 0;
        height: 0;
        top:48px;
        border-bottom: 15px solid #282e36;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;}
    
    .note{display:none;}

}

@media (max-width: 480px) {
	 .container {
        margin: 0px!important;
        position: none !important;}
	
    .search, .banner{
        display: none;}

.row img{width:auto;}
	 
	.form input{width:200px;}
	.form input[type="checkbox"],.form input[type="radio"]{width:10px;}
	.item input{width:90px ;}
	
	.desc input{width:200px;}
	.desc input[type="button"]{width:130px;}
	.sign-in{width: 300px;}
	.note{display:none;}

}

@media (max-width:320px) {
	 .container {
        margin: 0px!important;
        position: none !important;}

.row img{width:150px; height:auto;}

.banner .search {display: none;}
	.form table{width:100%;}
	.form input{width:100px;}
	.form input[type="checkbox"],input[type="radio"]{width:10px ;}
	
	.desc input{width:100px;}
	
	.sign-in{width: 300px;}
	
	.card{width:100%;}
	.note{display:none;}
	}
	
}

Cari Blog Ini

Nurah.lee

CODE CSS & RESPONSIVE : LAMAN NAURAH LEE

Ulasan

Catatan popular daripada blog ini

SISTEM PENGOPERASIAN KOMPUTER (OS)

APA ITU ASCII (AMERICAN STANDARD CODE FOR INFORMATION INTERCHANGE) ?

APA ITU EBCDIC (EXTANDENT BINARY CODEC DECIMAL INTERCHANGE CODE) ?

JENIS-JENIS SISTEM PENGOPERASIAN KOMPUTER

Router CP2001/RS980+ dan Cara config