Bootstrap Snippet AZAD using HTML CSS Bootstrap Javascript

/* Author URI: http://webthemez.com/ Note: Licence under Creative Commons Attribution 3.0 -------------------------------------------------------*/ @import url('http://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:400,600,700'); @import url('font-awesome.css'); @import url('animate.css'); /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } h3 { text-align: center; margin-bottom: 50px; color: #333; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } /* =Scss Variables -------------------------------------------------------------- */ /* =Global -------------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #3cb5f9; color: #505050; font-family: "Ubuntu", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; } /* Headings */ h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 300; } a { text-decoration: none; color: #3cb5f9; } a:hover { color: #0793e2; } /* =Template -------------------------------------------------------------- */ #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #fff; padding-top: 100px; } section { padding: 60px 0; } section h1 { font-weight: 700; margin-bottom: 10px; } section p { margin-bottom: 30px; } section p:last-child { margin-bottom: 0; } section.color { background-color: #3cb5f9; color: white; } /* =Info Bar -------------------------------------------------------------- */ #info-bar { background-color: #3cb5f9; } #info-bar a { color: white; font-size: 14px; text-transform: uppercase; display: inline-block; margin: 0; padding: 10px; } #info-bar a:hover { background-color: #0793e2; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { display: block; width: 50%; } #info-bar span.all-tutorials { float: left; text-align: left; } #info-bar span.back-to-tutorial { float: right; text-align: right; } /* =Header -------------------------------------------------------------- */ header { width: 100%; height: 104px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header h1#logo { display: inline-block; height: 150px; line-height: 150px; float: left; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav { display: inline-block; float: right; } header nav a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav a:hover { color: white; } header.smaller { height: 75px; } header.smaller h1#logo { width: 150px; height: 75px; line-height: 75px; font-size: 30px; } header.smaller nav a { line-height: 75px; } /*slider css code start */ .sky { height: 570px; background: #007fd5; position: relative; overflow: hidden; -webkit-animation: sky_background 50s ease-out infinite; -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .moon { background: url("http://montanaflynn.me/lab/css-clouds/images/moon.png"); position: absolute; left: 0; height: 100%; width: 300%; -webkit-animation: moon 50s linear infinite; -moz-animation: moon 50s linear infinite; -o-animation: moon 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_one { background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_one 50s linear infinite; -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_two { background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_three { background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } @-webkit-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-webkit-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-moz-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } } /*slider css code end */ /* my code 1st 3 box */ /* Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn Image credits: unsplash.com, uifaces.com/authorized Image placeholders: placemi.com */ #t-cards { padding-top: 80px; padding-bottom: 80px; } /********************************/ /* Panel cards */ /********************************/ .panel.panel-card { position: relative; height: 241px; border: none; overflow: hidden; } .panel.panel-card .panel-heading { position: relative; z-index: 2; height: 120px; border-bottom-color: #fff; overflow: hidden; -webkit-transition: height 600ms ease-in-out; transition: height 600ms ease-in-out; } .panel.panel-card .panel-heading img { position: absolute; top: 50%; left: 50%; z-index: 1; width: 120%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .panel.panel-card .panel-heading button { position: absolute; top: 10px; right: 15px; z-index: 3; } .panel.panel-card .panel-figure { position: absolute; top: auto; left: 50%; z-index: 3; width: 70px; height: 70px; background-color: #fff; border-radius: 50%; opacity: 1; -webkit-box-shadow: 0 0 0 3px #fff; box-shadow: 0 0 0 3px #fff; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); -webkit-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } .panel.panel-card .panel-body { padding-top: 40px; padding-bottom: 20px; -webkit-transition: padding 400ms ease-in-out; transition: padding 400ms ease-in-out; } .panel.panel-card .panel-thumbnails { padding: 0 15px 20px; } .panel-thumbnails .thumbnail { width: 60px; max-width: 100%; margin: 0 auto; background-color: #fff; } .panel.panel-card:hover .panel-heading { height: 55px; -webkit-transition: height 400ms ease-in-out; transition: height 400ms ease-in-out; } .panel.panel-card:hover .panel-figure { opacity: 0; -webkit-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } .panel.panel-card:hover .panel-body { padding-top: 20px; -webkit-transition: padding 400ms ease-in-out; transition: padding 400ms ease-in-out; } /* my 3box closed */ /* =Footer -------------------------------------------------------------- */ /* =Extras -------------------------------------------------------------- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* =Media Queries -------------------------------------------------------------- */ @media all and (max-width: 660px) { /* =Header -------------------------------------------------------------- */ header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header nav a { line-height: 50px; margin: 0 10px; } header.smaller { height: 75px; } header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } header.smaller nav { height: 35px; } header.smaller nav a { line-height: 35px; } } @media all and (max-width: 600px) { .container { width: 100%; } #info-bar a { display: block; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { width: 100%; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { float: none; text-align: center; } #info-bar span.all-tutorials { border-bottom: solid 1px #0793e2; } }

"AZAD "
Bootstrap 3.3.0 Snippet by azadweb

Related: See More

Questions / Comments:

"AZAD " Bootstrap 3.3.0 Snippet by azadweb

Related: See More

Questions / Comments:

"AZAD "
Bootstrap 3.3.0 Snippet by azadweb