Html+css page Exercises--legend Part II

Part II--headerwrap

Brief introduction:

This section has two titles

Page effect:

HTML code:

<DivID= "Headerwrap">      <Headerclass= "Clearfix">          <H1><span>legend!</span>We make Web a beautiful place.</H1>          <Divclass= "Container">              <H2>Signup for we Newsletter to be updated</H2>              <inputtype= "Email"placeholder= "[email protected]"class= "Cform-text"size= "Max"title= "Your email"/>              <inputtype= "Submit"value= "Notify Me"class= "Cform-submit"/>          </Div>          <Divclass= "Row">            <ulclass= "icon">                <Li><ahref="#"Target= "_blank"><Iclass= "icon-pinterest-circled"></I></a></Li>                <Li><ahref="#"Target= "_blank"><Iclass= "icon-facebook-circled"></I></a></Li>                <Li><ahref="#"Target= "_blank"><Iclass= "icon-twitter-circled"></I></a></Li>                <Li><ahref="#"Target= "_blank"><Iclass= "icon-gplus-circled"></I></a></Li>                <Li><ahref="#"Target= "_blank"><Iclass= "icon-skype-circled"></I></a></Li>            </ul>          </Div>      </Header>    </Div>

CSS code:

        #headerwrap {width:100%;  Background:url (img/top-bg.jpg) #0b333f no-repeat Center Center fixed;            /* Background is a picture and fixed in a position unchanged */-webkit-background-size:cover;            -moz-background-size:cover;            -o-background-size:cover;            Background-size:cover;            padding-top:80px;            padding-bottom:110px;            Text-align:center./* content is centered horizontally */} #headerwrap h1{color: #FFFFFF;            Font-size:4em;               font-family: ' Patua one ', cursive;            font-weight:400;        Margin:1em 0;        } #headerwrap H1 span{color: #f0bf00;            } #headerwrap h2{color: #ffffff;            Font-size:2em;            font-family: ' Open Sans ', Sans serif;            Font-weight:normal;            Margin:0.5em 0;        text-shadow:1px 1px 1px #333333;    } #headerwrap input[type=email]{Background-color:rgba (227,231,228,1);        Font-size:1.4em;            font-family: ' Open Sans ', Sans serif;            border:0;    Text-align:center;  /* Center horizontally */vertical-align:middle; /* Center vertically */margin-bottom:0!            Important            Height:2.9em;        width:50%;            } #headerwrap input[type=email]:focus{/* When it gets focus, its style changes to the following */background: #43413e;            Color: #eff1ef;        Transition:background 0.25 ease-in;            } #headerwrap input[type=submit]{color: #fff;            width:185px;            Height:3em;  Font-size:1.4em;            /*21px*/font-family: ' Patua one ', cursive;            Font-weight:bold;  Letter-spacing:0.05em;            /* Letter Spacing */margin:0;            border:0;            Vertical-align:middle;            Text-transform:none;            Background: #f0bf00!important;        border-radius:3px; } #headerwrap input[type=submit]:hover, #headerwrap input[type=submit]:active{/* When the mouse hovers over it, its background changes color */background: #43413e!important;            } ul.icon{font-size:54px;        Margin:1em 0 0.5em 0;            } Ul.icon li{Display:inline-block;            -webkit-transition:all 0.3s linear;            -moz-transition:all 0.3s linear;            -o-transition:all 0.3s linear;        Transition:all 0.3em linear;        } Ul.icon li:hover{/* When the mouse hovers over it, its transparency changes to 0.7*/opacity:0.7; }

Summarize:

This part of the implementation of the process did not encounter major problems.

Html+css page Exercises--legend Part II