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-pills-icons .nav-item .nav-link { border-radius: 4px; } .nav-pills .nav-item .nav-link.active { color: #fff; background-color: #9c27b0; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6); } .nav-pills .nav-item .nav-link { line-height: 24px; font-size: 12px; font-weight: 500; min-width: 100px; color: #555; transition: all .3s; border-radius: 30px; padding: 10px 15px; text-align: center; } .nav-pills .nav-item .nav-link:not(.active):hover { background-color: rgba(200,200,200,.2); } .nav-pills .nav-item i { display: block; font-size: 30px; padding: 15px 0; } .tab-space { padding: 20px 0 50px; } .profile-page .gallery { margin-top: 3.213rem; padding-bottom: 50px; } .profile-page .gallery img { width: 100%; margin-bottom: 2.142rem; } .profile-page .profile .name{ margin-top: -80px; } img.rounded { border-radius: 6px!important; } .tab-content>.active { display: block; } /*buttons*/ .btn { position: relative; padding: 12px 30px; margin: .3125rem 1px; font-size: .75rem; font-weight: 400; line-height: 1.428571; text-decoration: none; text-transform: uppercase; letter-spacing: 0; border: 0; border-radius: .2rem; outline: 0; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1); will-change: box-shadow,transform; } .btn.btn-just-icon { font-size: 20px; height: 41px; min-width: 41px; width: 41px; padding: 0; overflow: hidden; position: relative; line-height: 41px; } .btn.btn-just-icon fa{ margin-top: 0; position: absolute; width: 100%; transform: none; left: 0; top: 0; height: 100%; line-height: 41px; font-size: 20px; } .btn.btn-link{ background-color: transparent; color: #999; } /* dropdown */ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 11rem !important; margin: .125rem 0 0; font-size: 1rem; color: #212529; text-align: left; background-color: #fff; background-clip: padding-box; border-radius: .25rem; transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1); } .dropdown-menu.show{ transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1); } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu a:active, .dropdown-menu a:focus, .dropdown-menu a:hover { box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4); background-color: #9c27b0; color: #FFF; } .show .dropdown-toggle:after { transform: rotate(180deg); } .dropdown-toggle:after { will-change: transform; transition: transform .15s linear; } .dropdown-menu .dropdown-item, .dropdown-menu li>a { position: relative; width: auto; display: flex; flex-flow: nowrap; align-items: center; color: #333; font-weight: 400; text-decoration: none; font-size: .8125rem; border-radius: .125rem; margin: 0 .3125rem; transition: all .15s linear; min-width: 7rem; padding: 0.625rem 1.25rem; min-height: 1rem !important; overflow: hidden; line-height: 1.428571; text-overflow: ellipsis; word-wrap: break-word; } .dropdown-menu.dropdown-with-icons .dropdown-item { padding: .75rem 1.25rem .75rem .75rem; } .dropdown-menu.dropdown-with-icons .dropdown-item .material-icons { vertical-align: middle; font-size: 24px; position: relative; margin-top: -4px; top: 1px; margin-right: 12px; opacity: .5; } /* footer */ footer{ margin-top: 10px; color: #555; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; margin: 0 0 10px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; } </style> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-material-design.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"> </head> <body class="profile-page"> <nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit </a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false"> <i class="material-icons">apps</i> Components </a> <div class="dropdown-menu dropdown-with-icons"> <a href="../index.html" class="dropdown-item"> <i class="material-icons">layers</i> All Components </a> <a href="https://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item"> <i class="material-icons">content_paste</i> Documentation </a> </div> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">cloud_download</i> Download </a> </li> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/CreativeTim" target="_blank"> <i class="fa fa-twitter"></i> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/CreativeTim" target="_blank"> <i class="fa fa-facebook-square"></i> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.instagram.com/CreativeTimOfficial" target="_blank"> <i class="fa fa-instagram"></i> </a> </li> </ul> </div> </div> </nav> <div class="page-header header-filter" data-parallax="true" style="background-image:url('//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg');"></div> <div class="main main-raised"> <div class="profile-content"> <div class="container"> <div class="row"> <div class="col-md-6 ml-auto mr-auto"> <div class="profile"> <div class="avatar"> <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Circle Image" class="img-raised.........完整代码请登录后点击上方下载按钮下载查看
网友评论0