www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/130/stylesheets/layout-blue.css
/* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Temp ================================================== */ .css_switcher { position: fixed; z-index: 1000; width: 40px; height: 40px; top: 220px; left: 0; background: #fff; -webkit-box-shadow: 0px 0px 3px 1px #484848; box-shadow: 0px 0px 3px 1px #484848; } .css_switcher img { margin: 7px 0 0 6px; text-align: center; } .slidingDiv { position: fixed; z-index: 960; top: 261px; left: 0; background: #fff; height: auto; width: auto; -webkit-box-shadow: 0px 0px 3px 1px #484848; box-shadow: 0px 0px 3px 1px #484848; } .slidingDiv p { margin: 7px 0 7px 8px; font-size: 13px; } .slidingDiv a { display: block; padding: 3px 8px 3px 8px; text-decoration: none; } a.orange { background: #e76343; color: #fff; } a.blue { background: #0876a7; color: #fff; } a.yellow { background: #eec902; color: #fff; } .show_hide { display:none; } /* #Typography ================================================== */ p { font-family: 'Open Sans', sans-serif; } a { font-family: 'Open Sans', Sans-serif; } h1, h2, h3, h4, h5 { font-family: 'Open Sans', sans-serif; } h1 { font-size: 100px; font-weight: 800; color: #fff; line-height: 85px; text-shadow: 2px 2px 2px #515151; filter: dropshadow(color=#515151, offx=2, offy=2); } h2 { font-size: 54px; font-weight: 700; color: #333333; margin-top: 75px; border-bottom: 2px solid #0876a7; padding-bottom: 14px; margin-bottom: 30px; } h3 { font-size: 28px; font-weight: 700; color: #333333; margin: 15px 0 18px 0; } h4 { font-size: 16px; font-weight: 600; color: #0876a7; } h5 { font-size: 18px; font-weight: 600; color: #333333; border-bottom: 1px dotted #aeaeae; margin-bottom: 20px; } /* #Generic Styles ================================================== */ body { background: url(../images/intro_bg2.jpg) fixed; } .separator { background: url(../images/intro_bg2.jpg) fixed; width: 100%; height: 70px; position: relative; margin-top: -8px; } .jagged { background: url(../images/jagged.png) repeat-x; width: 100%; height: 8px; position: relative; z-index: 20; } .jagged_bottom { background: url(../images/jagged_bottom.png) repeat-x; width: 100%; height: 8px; position: relative; z-index: 20; margin-top: -8px; margin-bottom: 0px; } .jagged_bottom_color { background: url(../images/jagged_bottom_blue.png) repeat-x; width: 100%; height: 8px; position: relative; z-index: 20; margin-top: -8px; margin-bottom: 0px; } .jagged_top_color { background: url(../images/jagged_top_blue.png) repeat-x; width: 100%; height: 8px; position: relative; z-index: 250; margin-top: 0; margin-bottom: 0px; } .div_line { border-bottom: 2px dotted #c8c8c8; margin-bottom: 40px; } /* #Header ================================================== */ header { text-align: center; position: relative; } .topbar { background: url(../images/dotted_bg_blue.png) repeat; width: 100%; height: 4px; position: fixed; z-index: 1000; } /* #Nav ================================================== */ nav { text-align: center; position: fixed; z-index: 1000; width: 100%; } nav ul { text-align: center; padding-top: 17px; margin-top: 30px; } nav ul li { display: inline-block; margin-top: -30px; } nav ul a { font-size: 16px; font-weight: 400; color: #fff; text-decoration: none; text-transform: uppercase; padding: 0 15px 0 15px; text-shadow: 1px 1px 1px #515151; filter: dropshadow(color=#515151, offx=1, offy=1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; } nav ul a:visited { color: #fff; } nav ul a:hover { color: #0876a7; text-shadow: 1px 1px 1px #212121; } .thumb { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; } .thumb:hover { color: #e76343; } span.logo { display: inline-block; background: url(../images/logo.png) no-repeat 0 0; width: 83px; height: 83px; margin-top: -10px; vertical-align: middle; z-index: 950; position: relative; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } .logo:hover { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); } span.logotext { font-family: 'Marck Script', cursive; color: #0876a7; font-weight: normal; font-size: 42px; text-transform: none; text-shadow: none; filter: none; position: relative; padding-top: 34px; display: inline-block; } /* #Intro ================================================== */ #intro { background: url(../images/intro_bg2.jpg) fixed; height: 560px; } .title { margin: 170px auto 0 auto; text-align: center; position: fixed; color: #fff; width: 100%; } .title h1 { margin-top: -10px; } span.title_line { border-bottom: 2px solid #fff; display: inline-block; width: 180px; height: 2px; margin: 0 15px 0 15px; -webkit-box-shadow: 1px 1px 1px 1px #00000; box-shadow: 1px 1px 1px 1px #00000; } span.small { font-size: 44px; font-weight: 600; text-shadow: 1px 1px 2px #515151; filter: dropshadow(color=#515151, offx=1, offy=1); } span.cursive { font-family: 'Marck Script', cursive; font-size: 60px; font-weight: normal; text-shadow: 1px 1px 2px #515151; filter: dropshadow(color=#515151, offx=1, offy=1); display: inline-block; } .nav_bg { background: #000; position: absolute; z-index: 940; width: 100%; height: 50px; opacity: 0.5; margin-top: -50px; } .cover_bar { background: #fff; height: 50px; position: relative; z-index: 950; margin-top: -1px; } /* #Services ================================================== */ #services { position: relative; background: #fff; margin-top: -50px; padding-bottom: 70px; } #services h2 { margin-top: 40px; } .serv_bg { background: url(../images/intro_bg2.jpg) fixed; width: 130px; height: 130px; position: relative; text-align: center; margin: 60px auto 0 auto; } .serv_icon { margin: -170px auto 60px auto; text-align: center; position: relative; } .serv_icon1 { background: url(../images/serv_icon1_blue.png) no-repeat; width: 241px; height: 241px; margin: 0 auto; } .serv_icon2 { background: url(../images/serv_icon2_blue.png) no-repeat; width: 241px; height: 241px; margin: 0 auto; } .serv_icon3 { background: url(../images/serv_icon3_blue.png) no-repeat; width: 241px; height: 241px; margin: 0 auto; } .more_services h4 { padding-bottom: 8px; margin: 0; } .more_services ul li, .more_services2 ul li { padding: 5px 0 5px 0; margin: 0; border-bottom: 1px dotted #aeaeae; } .more_services ul li:first-child, .more_services2 ul li:first-child { border-top: 1px dotted #aeaeae; } .more_services ul li:hover, .more_services2 ul li:hover { opacity: 0.8; } .more_services p, .more_services2 p { text-transform: uppercase; color: #525252; margin: 0; } .more_services2 { padding-top: 38px; } .text_box { background: #0876a7; padding: 15px; margin-top: 36px; } .text_box p { color: #fff; margin: 0; } /* #Work ================================================== */ #work { position: relative; background: #fff; margin-top: -1px; padding-bottom: 70px; } .gallery { margin-top: 20px; } .gallery img { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-box-shadow; -moz-transition-property: -moz-box-shadow; -o-transition-property: -o-box-shadow; transition-property: box-shadow; } .gallery img:hover { -webkit-box-shadow: 0px 0px 0px 3px #0876a7; box-shadow: 0px 0px 0px 3px #0876a7; } p.proj_name { font-size: 15px; color: #0876a7; margin-bottom: 5px; } p.proj_type { border-top: 1px dotted #aeaeae; border-bottom: 1px dotted #aeaeae; padding: 5px 0 5px 0; color: #575757; } /* #About ================================================== */ #about { position: relative; background: #fff; margin-top: -1px; padding-bottom: 70px; } #about h5 { margin-top: 20px; margin-bottom: 22px; } .social { background: #0876a7; padding: 15px 15px 7px 30px;; color: #fff; width: 70%; margin-top: 20px; margin-left: auto; } .social ul { margin: 0; } .social ul li { margin-bottom: 8px; } .social a { color: #fff; font-size: 15px; margin: 0; text-decoration: none; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; } .social a:visited { color: #fff; } .social a:hover { color: black; } .twitter { background: url(../images/icn_twitter_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .zerply { background: url(../images/icn_zerply_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .facebook { background: url(../images/icn_facebook_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .linkedin { background: url(../images/icn_linkedin_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .pinterest { background: url(../images/icn_pinterest_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .dribbble { background: url(../images/icn_dribbble_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .gplus { background: url(../images/icn_gplus_blue.png) no-repeat; width: 26px; height: 26px; display: inline-block; margin-right: 15px; margin-bottom: -4px; } .skills p { font-size: 12px; text-transform: uppercase; margin-bottom: 10px; } .skill_bg { width: 100%; height: 22px; background: #ebebeb; } .skill1 { width: 65%; height: 22px; background: #0876a7; opacity: 0.6; } .skill2 { width: 75%; height: 22px; background: #0876a7; opacity: 0.7; } .skill3 { width: 85%; height: 22px; background: #0876a7; opacity: 0.8; } .skill4 { width: 95%; height: 22px; background: #0876a7; opacity: 1; } .skill_hover { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .skill_hover:hover { opacity: 0.2; } /* #Contact ================================================== */ #contact { position: relative; background: #0876a7; margin-top: -1px; padding-bottom: 60px; } #contact h2, #contact p { color: #fff; } #contact h2 { border-bottom: 2px solid #fff; } /* contact form */ .done { font-family: 'Droid Sans', sans-serif; color: #3a3939; font-size: 14px; margin-bottom: 15px; padding: 10px; display: none; } .contact_form { margin-top: 20px; } .contact_form p { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #515151; text-transform: uppercase; margin-bottom: 2px; } .contact_form input { background: url(../images/form_bg_blue.png) repeat; width: 98%; height: 18px; margin-bottom: 10px; padding-left: 4px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; } .contact_form textarea { background: url(../images/form_bg_blue.png) repeat; margin-bottom: 10px; padding-left: 5px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 15px; width: 98%; height: 99px; } .contact_form input.submit-button { background: #fff; color: #0876a7; font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: uppercase; font-style: normal; font-size: 12px; width: 60px; margin-top: 5px; padding: 1px; height: 25px; text-align: center; border: 0; } .contact_form input.submit-button:hover { background: #0876a7; color: #fff; } .map { border: 5px solid #07577b; text-align: right; margin-top: 43px; width: 100%; } .contact_info { margin-top: 20px; } .contact_info p { margin-bottom: 4px; line-height: 25px; } .contact_info img { margin-right: 10px; } /* #Copyright ================================================== */ .copyright { margin-top: -8px; background: url(../images/intro_bg2.jpg) repeat fixed; padding: 30px 0 5px 0; text-align: center; color: #fff; position: relative; z-index: 200; } .copyright p { color: #fff; font-size: 12px; } .copyright a, .copyright a:visited { color: #fff; } .copyright a:hover { color: #d5d5d5; } /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { span.title_line { display: none; } .more_services { margin-bottom: 0; padding-bottom: 0; } .more_services2 { padding-top: 0; margin-bottom: 30px; } .more_services2 ul li:first-child { border-top: none; } .text_box { padding: 15px; margin-top: 20px; margin-bottom: 30px; } .gallery { text-align: center; } .social { width: 55%; margin-left: auto; margin-right: auto; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { h1 { font-size: 70px; line-height: 70px; } #intro { position: relative; height: auto; } .topbar, .title, #intro { position: relative; } .title { margin-bottom: 50px; } span.logo { display: none; } nav ul a { padding: 0 4px 0 4px; } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */