bootstrap-material-design实现响应式个人主页及作品集页面代码
代码语言:html
所属分类:响应式
代码描述:bootstrap-material-design实现响应式个人主页及作品集页面代码
代码标签: bootstrap-material-design响应式 个人主页 作品集
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html *{
-webkit-font-smoothing: antialiased;
}
.h6, h6 {
font-size: .75rem !important;
font-weight: 500;
font-family: Roboto,Helvetica,Arial,sans-serif;
line-height: 1.5em;
text-transform: uppercase;
}
.name h6 {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar {
border: 0;
border-radius: 3px;
padding: .625rem 0;
margin-bottom: 20px;
color: #555;
background-color: #fff!important;
box-shadow: 0 4px 18px 0 rgba(0,0,0,.12), 0 7px 10px -5px rgba(0,0,0,.15) !important;
z-index: 1000 !important;
transition: all 150ms ease 0s;
}
.navbar.navbar-transparent {
z-index: 1030;
background-color: transparent!important;
box-shadow: none !important;
padding-top: 25px;
color: #fff;
}
.navbar .navbar-brand {
position: relative;
color: inherit;
height: 50px;
font-size: 1.125rem;
line-height: 30px;
padding: .625rem 0;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
.navbar .navbar-nav .nav-item .nav-link:not(.btn) .material-icons {
margin-top: -7px;
top: 3px;
position: relative;
margin-right: 3px;
}
.navbar .navbar-nav .nav-item .nav-link .material-icons {
font-size: 1.25rem;
max-width: 24px;
margin-top: -1.1em;
}
.navbar .navbar-nav .nav-item .nav-link .fa, .navbar .navbar-nav .nav-item .nav-link .material-icons {
font-size: 1.25rem;
max-width: 24px;
margin-top: 0px;
}
.navbar .navbar-nav .nav-item .nav-link {
position: relative;
color: inherit;
padding: .9375rem;
font-weight: 400;
font-size: 12px;
border-radius: 3px;
line-height: 20px;
}
a .material-icons {
vertical-align: middle;
}
.fixed-top {
position: fixed;
z-index: 1030;
left: 0;
right: 0;
}
.profile-page .page-header {
height: 380px;
background-position:center;
}
.page-header {
height: 100vh;
background-size: cover;
margin: 0;
padding: 0;
border: 0;
display: flex;
align-items: center;
}
.header-filter:after, .header-filter:before {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
.header-filter::before {
background: rgba(0,0,0,.5);
}
.main-raised {
margin: -60px 30px 0;
border-radius: 6px;
box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.main {
background: #FFF;
position: relative;
z-index: 3;
}
.profile-page .profile {
text-align: center;
}
.profile-page .profile img {
max-width: 160px;
width: 100%;
margin: 0 auto;
-webkit-transform: translate3d(0,-50%,0);
-moz-transform: translate3d(0,-50%,0);
-o-transform: translate3d(0,-50%,0);
-ms-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.img-raised {
box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
}
.rounded-circle {
border-radius: 50%!important;
}
.img-fluid, .img-thumbnail {
max-width: 100%;
height: auto;
}
.title {
margin-top: 30px;
margin-bottom: 25px;
min-height: 32px;
color: #3C4858;
font-weight: 700;
font-family: "Roboto Slab","Times New Roman",serif;
}
.profile-page .description {
margin: 1.071rem auto 0;
max-width: 600px;
color: #999;
font-weight: 300;
}
p {
font-size: 14px;
margin: 0 0 10px;
}
.profile-page .profile-tabs {
margin-top: 4.284rem;
}
.nav-pills, .nav-tabs {
border: 0;
border-radius: 3px;
padding: 0 15px;
}
.nav .nav-item {
position: relative;
margin: 0 2px;
}
.nav-pills.nav-pil.........完整代码请登录后点击上方下载按钮下载查看
网友评论0