jquery.fullPage+bootstrap实现全屏幻灯片式个人简历网站代码
代码语言:html
所属分类:布局界面
代码描述:jquery.fullPage+bootstrap实现全屏幻灯片式个人简历网站代码
代码标签: jquery.fullPage bootstrap 全屏 幻灯片 个人 简历 网站 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="description" content="Web designer and front-end developer"> <link href='https://fonts.googleapis.com/css?family=Raleway:100,200,400,600' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.fullPage.2.9.5.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css"> <style> /* general styles */ body { font-family: "Raleway", sans-serif !important; } ul { list-style-type: none; } a { text-decoration: none !important; } h1 { color: #ff6363; font-weight: bold; } p { font-size: 20px; color: #484848; } .section { text-align: center; } .skillbar { cursor: pointer; } .hide { display: none; } .display { display: block; } /* flash alert styles */ .flash-container { width: 100%; position: fixed; z-index: 700; padding-top: 20px; font-weight: bold; } .alert { text-align: center !important; width: 500px !important; margin-left: auto !important; margin-right: auto !important; color: #211809 !important; } /* Nav Screen */ .nav-screen { height: 100%; z-index: 500; position: fixed; background-color: #000; opacity: 1; right: -285px; /* start off behind the scenes */ -webkit-font-smoothing: antialiased; position: fixed; width: 285px; } .nav-screen .active { display: block; } /* nav header links */ .nav-brand { position: fixed; left: 0; z-index: 600; padding: 10px; } .nav-brand img { width: 50px; } .fa-bars { display: none !important; color: #ff6363; float: right; padding: 20px; position: fixed; right: 0; z-index: 500; cursor: pointer; } .fa-times { color: #ff6363; float: right; padding: 20px; right: 0; z-index: 600; cursor: pointer; } .header-links { position: fixed; width: 100%; z-index: 500; } .header-links li { color: white; display: inline; float: right; padding: 15px; font-size: 16px; } .header-links a { color: #757575; -webkit-transition: all 0.2s ease-in; } .header-links a:hover { color: #ff6363 !important; } /* slide out nav menu styles */ .nav-container { padding-top: 10%; } .nav-links { width: 250px; text-align: center; margin-left: auto; margin-right: auto; } .nav-links ul { margin-top: 15%; text-align: center; padding-top: 10%; } .nav-links a { color: #ffffff; font-size: 30px; line-height: 2.5; font-weight: bold; text-decoration: none; margin-left: auto; margin-right: auto; } .nav-links a:hover { color: #ff6363; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #fp-nav ul li .fp-tooltip { color: #5f5f5f !important; } /* Expanding border effect */ .header-links a::after { display: block; margin: 0 auto; margin-top: 5px; width: 0; height: 2px; background-color: #fff; content: ""; opacity: 0; -webkit-transition: width 0.6s, opacity 0.8s; -moz-transition: width 0.6s, opacity 0.8s; transition: width 0.6s, opacity 0.8s; } .header-links a:hover::after, .header-links a:focus::after { opacity: 1; width: 100%; } /* main header section */ .opaque-bg { margin-left: auto; margin-right: auto; max-width: 380px; padding: 1px 1px 5px 5px; } .aboutme { background: url("//repo.bfw.wiki/bfwrepo/image/637adcfa0b4a5.jpeg") no-repeat; background-size: cover; } .aboutme p { color: white; font-weight: 100; font-size: 17.4px; } /* bouncing arrow */ .fa-chevron-down { color: #ff6363 !important; bottom: 10px; margin-left: -30px; cursor: pointer; position: absolute; opacity: 0; -webkit-transition: 1.2s ease; } /* Scroll down indicator (bouncing) */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateX(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -ms-transform: translateY(0); transform: translateY(0); } 40% { -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } /* about section */ /* Skill bars */ .container-skillbar { width: 100%; padding-top: 30px; padding-right: 2%; padding-left: 2%; height: auto; overflow: none; } .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #efefef; height: 30px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .skillbar-title { position: absolute; top: 0; left: 0; width: 110px; font-weight: bold; font-size: 13px; color: #fff; background: #6adcfa; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-title span { display: block; background: rgba(0, 0, 0, 0.15); padding: 0 20px; height: 30px; line-height: 30px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-bar { height: 30px; width: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 30px; line-height: 30px; color: #ffffff; color: rgba(0, 0, 0, 0.5); } /* portfolio section */ .content { margin-left: auto; margin-right: auto; max-width: 800px; } .content-slide { margin-left: auto; margin-right: auto; max-width: 800px; } .content-slide img { width: 70%; } .fp-controlArrow.fp-next { border-color: transparent transparent transparent #ff6363 !important; right: 45px !important; } .fp-controlArrow.fp-prev { border-color: transparent #ff6363 transparent transparent !important; left: 45px !important; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: rgba(0, 0, 0, 0.62) !important; } /* contact us styles */ .fa-paper-plane { color: #484848; } /* paper plane shake on hover */ .plane-animated { animation-duration: 6s; animation-fill-mode: both; animation-iteration-count: infinite; animation-play-state: paused; } .fa-paper-plane:hover { /* Toggle our animation play state to running when we are hovering over our sticker */ animation-play-state: running; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { animation-name: shake; } /* input field styles */ .contact-form { padding: 0px 15px 0px 15px; } .form-control { border: 2px solid rgba(0, 0, 0, 0.27); width: 100%; max-width: 100%; height: 3em; font-size: 16px; padding: 1em; margin: 0.5em 0 2em 0; font-weight: bold; } textarea { min-height: 10em; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-size: 18px; text-transform: uppercase; font-weight: 500; } #submit { outline: none; padding: 12px; min-width: 200px; border-radius: 2px; border: 2px solid #ff6363; text-align: center; font-size: 1em; color: #ff6363; background-color: white; text-decoration: none; text-transform: uppercase; font-weight: bold; } #submit:hover { background-color: #ff6363; color: white; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* footer styles */ .footer { background-color: #484848; height: 100px; padding-top: 10px; } .footer p { color: white; font-weight: bold; font-size: 16px; } .social-links a { color: white; padding: 0px 5px 0px 5px; } .social-links a:hover { color: #ff6363; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* smaller resolution styles */ @media (min-width: 100px) and (max-width: 500px) { .fa-bars { display: block !important; } .header-links { display: none; } } /* mobile styles */ @media (min-width: 100px) and (max-width: 400px) { .content { max-width: 300px; } .aboutme h1 { font-size: 28px; } } /* loading screen animation */ .spinner { position: fixed; width: 100%; height: 100%; padding: 25%; background-color: #2f2f2f; text-align: center; font-size: 10px; z-index: 1000; } .spinner > div { background-color: #ff6363; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } .blinking-cursor { font-weight: 500; margin-left: 4px; font-size: 20px; color: white !important; -webkit-animation: 1s blink step-end infinite; -moz-animation: 1s blink step-end infinite; -ms-animation: 1s blink step-end infinite; -o-animation: 1s blink step-end infinite; animation: 1s blink step-end infinite; } @keyframes "blink" { from, to { color: transparent; } 50% { color: white; } } @-moz-keyframes blink { from, to { color: transparent; } 50% { color: white; } } @-webkit-keyframes "blink" { from, to { color: transparent; } 50% { color: white; } } @-ms-keyframes "blink" { from, to { color: transparent; } 50% { color: white; } } @-o-keyframes "blink" { from, to { color: transparent; } 50% { color: white; } } .success { padding: 1em; margin-bottom: 0.75rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .error { padding: 1em; margin-bottom: 0.75rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #b94a48; background-color: #f2dede; border: 1px solid rgba(185, 74, 72, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } </style> </head> <body> <!-- navbar header --> <div class="nav-header"> <div class="nav-brand"> <img src="//repo.bfw.wiki/bfwrepo/icon/63e331177b5ab.png"> </div> <i class="fa fa-bars fa-3x"></i> <div class="header-links"> <ul> <li data-menuanchor="fourthPage"><a href="#contact">CONTACT</a></li> <li data-menuanchor="thirdPage"><a href="#portfolio">PORTFOLIO</a></li> <li data-menuanchor="secondPage"><a href="#about">ABOUT</a></li> </ul> </div> </div> <!-- end navbar header --> <!-- sidebar slider --> <div class="nav-screen"> <i class="fa fa-times fa-3x"></i> <div class="nav-container"> <div class="nav-links"> <ul id='myMenu'> <li data-menuanchor="secondPage"><a href="#about">ABOUT</a></li> <li data-menuanchor="thirdPage"><a href="#portfolio">PORTFOLIO</a></li> <li data-menuanchor="fourthPage"><a href="#contact">CONTACT</a></li> </ul> </div> </div> </div> <!-- end navbar slider --> <!-- begin fullpage --> <div id="fullpage"> <!-- begin section --> <div class="section aboutme" data-anchor="aboutme"> <div class="opaque-bg animated fadeInDown"> <h1 style="color:white">BRAD<span style="color:#FF6363">/</span>ENGELHARDT</h1> <p><span id="holder"></span><span class="blinking-cursor">|</span></p> </div> <i id="moveDown" class="fa fa-chevron-down fa-3x bounce"></i> </div> <!-- end section --> <!-- begin section --> <div class="section" data-anchor="skills"> <div class="content"> <h1 class="wow fadeInDown" data-wow-delay="0.2s">ABOUT.........完整代码请登录后点击上方下载按钮下载查看
网友评论0