个人空间页面html模板,HTML5 家庭主页/个人空间模板

CSS 语言： CSSSCSS 确定 @import url(https://fonts.googleapis.com/css?family=Oxygen:400,300); .header { padding: 2em; background: #f08f90; border-bottom: 0.5em solid #f47983; } .header h1, .header h6 { color: #fff; font-weight: 100; } .main { margin-bottom: 3em; } .img-round { height: 150px; width: 150px; border-radius: 100%; -webkit-transition: all 300ms ease-in; transition: all 300ms ease-in; cursor: pointer; } .img-round:hover, .img-round:focus { border: 3px solid #f08f90; } .mason, .chlo, .lola { -webkit-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; opacity: 0; } .mason:after, .lola:after { content: ''; position: absolute; bottom: 5px; right: 0; left: 1em; height: 0.15em; background-image: -webkit-linear-gradient(0deg, #f47983 0%, #fff 100%); background-image: linear-gradient(90deg, #f47983 0%, #fff 100%); } .chlo:after { content: ''; position: absolute; bottom: 5px; right: 1em; left: 0; height: 0.15em; background-image: -webkit-linear-gradient(0deg, #fff 0%, #f47983 100%); background-image: linear-gradient(90deg, #fff 0%, #f47983 100%); } .breaker { margin: 2em 0; text-align: center; } .breaker h3 { color: #bfbfbf; } .breaker h3:before { content: ""; display: block; border-top: solid 1px #e5e0e0; width: 100%; height: 1px; position: absolute; top: 50%; z-index: 1; } .breaker h3 span { background: #fff; padding: 0 20px; position: relative; z-index: 5; } img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .mason-img:after { content: '+'; font-size: 3em; position: relative; top: 0; left: 20%; color: #e5e0e0; } .text-holder { margin-top: 1em; } h1, h2, h3, h4, h5, h6 { font-family: Oxygen; } p { font-size: 0.8em; } footer { background: #f08f90; padding: 0.75em; } footer h6 { color: #fff; font-weight: 100; } @media only screen and (max-width: 1025px) { .mason-img, .lola-img { margin: 2em 0; } .mason-img:after { display: none; } .mason, .chlo, .lola { opacity: 1; } } .heart-shape { position: relative; margin: 1em auto 0.2em auto; width: 14px; height: 14px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #f47983; } .heart-shape:before, .heart-shape:after { position: absolute; width: 14px; height: 14px; content: ''; border-radius: 50%; background-color: #f47983; } .heart-shape:before { bottom: 0px; left: -7px; } .heart-shape:after { top: -7px; right: 0px; }