Skip to main content

Web Design and Development class -7

Video

Html Practice to create Facebook login page

Html




Html Practice to create Facebook login page

Css


*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.wrapper{
	width: 940px;;
	margin:auto;
	
}

/*************************************************************************
*  Heading Section 
*************************************************************************/



#header{
	background:#3B5998;
	min-height:83px;
	max-height:83px;
}
.clearfix{
	position: relative;
	overflow:hidden;
}

 .column1{
	width: 60%;
	float:left;
}

 .column2{
	width: 40%;
	float:left;
}

#logo a{
	padding-top: 20px;
	font-size: 30px;
	font-weight: bold;
	color:#fff;
	display:block;
	text-decoration:none;
}

.fieldgroup{
	width:40%;
	float:left;
	padding-top:15px;
	font-size: 12px;
	
}

.fieldgroup input{
	max-width: 90%;
}

#headingaction input{
	margin-top:16px;
	background-color: #4267b2;
    border-color: #29487d;
	color:#fff;
	padding:3px 5px;
	font-size:11px;
}

a#headerforget{
	color:#9cb4d8;
	display:block;
	padding-top: 5px;
	font-size: 11px;
}

a#headerforget:hover{
	color:#fff;
}

#headingaction{
	width:20%;
}

#header label{
	color: #fff;
}

/*************************************************************************
*  Body Section 
*************************************************************************/


#body{
	min-height:400px;
	background: linear-gradient(white, #D3D8E8);
	padding-top:25px;
}
#bodyleft{
	padding-right: 112px;
}

#bodyleft h3{
	color: #0e385f;
}
#bodyright h2{
	font-size:36px;
}

.formfield input{
	    border-color: #bdc7d8;
    border-radius: 5px;
    margin: 0;
    border: 1px solid #bdc7d8;
	font-size: 18px;
    padding: 8px 10px;
}

.formfield {
	
	width: 100%;
	margin: 5px 0;
}	

.formfield input{
	width: 100%;
}

.formfield:nth-child(1) , .formfield:nth-child(2) {
	width: 50%;
	float: left;
}

.fleft{
	width: 50%;
	float: left;
}

.formfield:nth-child(1){
padding-right: 5px;	
}

.formfield:nth-child(2){
padding-left:5px;
}	

#submitbutton{
	background: linear-gradient(#67ae55, #578843);
    background-color: #69a74e;
    box-shadow: inset 0 1px 1px #a4e388;
    border-color: #3b6e22 #3b6e22 #2c5115;
	    border: 1px solid;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
	margin-top: 10px;
    margin-bottom: 10px;
	 min-width: 194px;
    padding: 7px 20px;
    text-align: center;
	    font-size: 19px;
	
}

    




Share this post

Comments (0)