|
|
| Line 1: |
Line 1: |
| − | | + | <!DOCTYPE html> |
| − | <!-- Declare that you are going to use html code instead of wiki code --> | + | <html lang="en"> |
| − | /* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
| + | <head> |
| − |
| + | <meta charset="utf-8"> |
| − | /* ==========================================================================
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| − | HTML5 display definitions
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − | ========================================================================== */ | + | <title>Halcyon Days - An Exclusive Freebie for Codrops by Peter Finlan.</title> |
| − |
| + | <link href="css/bootstrap.min.css" rel="stylesheet"><!-- Rquiered --> |
| − | /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
| + | <link href="css/flexslider.css" rel="stylesheet" > <!-- Rquiered --> |
| − |
| + | <link href="css/styles.css" rel="stylesheet"> <!-- Rquiered --> |
| − | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
| + | <link href="css/animate.css" rel="stylesheet"> <!-- Rquiered --> |
| − | /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
| + | <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> |
| − | audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
| + | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
| − | /* * Prevents modern browsers from displaying `audio` without controls.
| + | <!--[if lt IE 9]> |
| − | * Remove excess height in iOS 5 devices. */
| + | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> |
| − | audio:not([controls]) { display: none; height: 0; }
| + | <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> |
| − | /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. | + | <![endif]--> |
| − | * Known issue:no IE 6 support. */
| + | </head> |
| − | [hidden] { display: none; }
| + | <body id="top"> |
| − | /* ==========================================================================
| + | <div id="logos"> |
| − | Base
| + | <img src="img/" ><br> |
| − | ========================================================================== */ | + | <img src="img/" ><br> |
| − | /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
| + | <img src="img/" > |
| − | * `em` units.
| + | </div> |
| − | * 2. Prevents iOS text size adjust after orientation change, without disabling
| + | <div id="float-menu"> |
| − | * user zoom. */
| + | <ul> |
| − | | + | <li>Home</li> |
| − | html { font-size: 100%; /* 1 */
| + | <li>Team</li> |
| − | -webkit-text-size-adjust: 100%; /* 2 */
| + | <li>Project</li> |
| − | -ms-text-size-adjust: 100%; /* 2 */ } | + | <li>BG</li> |
| − | html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
| + | <li>H. Practices</li> |
| − | /* * Addresses `font-family` inconsistency between `textarea` and other form
| + | <li>Collaborations</li> |
| − | * elements. */
| + | </ul> |
| − | html, button, input, select, textarea { font-family: 'Varela Round', sans-serif; }
| + | </div> |
| − | /* * Addresses margins handled incorrectly in IE 6/7. */
| + | <header id="home"> |
| − | body { margin: 0; font-family: 'Varela Round', sans-serif; }
| + | |
| − | /* ==========================================================================
| + | <section class="hero" id="hero"> |
| − | Links
| + | <div class="container"> |
| − | ========================================================================== */
| + | <div class="row"> |
| − | /* * Addresses `outline` inconsistency between Chrome and other browsers. */
| + | <div class=" "> |
| − |
| + | <a id="nav-toggle" href="#"></a> |
| − | a:focus { outline: thin dotted; }
| + | </div> |
| − | /* * Improves readability when focused and also mouse hovered in all browsers. */
| + | </div> |
| − | a:active, a:hover { outline: 0; }
| + | <div class="row"> |
| − | /* ========================================================================== | + | <div class="col-md-8 col-md-offset-2 text-center inner"> |
| − | Typography
| + | LOGO |
| − | ========================================================================== */
| + | </div> |
| − | /* * Addresses font sizes and margins set differently in IE 6/7.
| + | </div> |
| − | * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
| + | <div class="row"> |
| − |
| + | |
| − | h1 { font-size: 2em; margin: 0.67em 0; color: #353535; }
| + | |
| − | h2 { font-size: 1.5em; margin: 0.83em 0; }
| + | |
| − | h3 { font-size: 1.17em; margin: 1em 0; }
| + | |
| − | h4 { font-size: 1em; margin: 1.33em 0; }
| + | </div> |
| − | h5 { font-size: 0.83em; margin: 1.67em 0; }
| + | </div> |
| − | h6 { font-size: 0.75em; margin: 2.33em 0; }
| + | </section> |
| − | /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
| + | </header> |
| − | abbr[title] { border-bottom: 1px dotted; }
| + | |
| − | /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ | + | <section class="text-center "> |
| − | b, strong { font-weight: bold; }
| + | <div class="col-md-8 half-height col-md-offset-2"> |
| − | blockquote { margin: 1em 40px; }
| + | <div id="servicesSlider"> |
| − | /* * Addresses styling not present in Safari 5 and Chrome. */
| + | <ul class="slides"> |
| − | dfn { font-style: italic; }
| + | <!-- DUPLICATE --> |
| − | /* * Addresses styling not present in IE 6/7/8/9. */ | + | <li> |
| − | mark { background: #ff0; color: #000; }
| + | <div class="col-md-6 "> |
| − | /* * Addresses margins set differently in IE 6/7. */
| + | <img src="http://placehold.it/250x250"> |
| − | p, pre { margin: 1em 0; }
| + | </div> |
| − | /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ | + | <div class="col-md-6 "> |
| − | code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
| + | <h1 class="arrow">Responsive Design Specialists</h1> |
| − | /* * Improves readability of pre-formatted text in all browsers. */ | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies nulla non metus pulvinar imperdiet. Praesent non adipiscing libero. </p> |
| − | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
| + | <p> |
| − | /* * Addresses CSS quotes not supported in IE 6/7. */
| + | Mauris ultrices odio vitae nulla ultrices iaculis. Nulla rhoncus odio eu lectus faucibus facilisis. Maecenas ornare augue vitae sollicitudin accumsan. </p> |
| − | q { quotes: none; }
| + | |
| − | /* * Addresses `quotes` property not supported in Safari 4. */
| + | </div> |
| − | q:before, q:after { content: ''; content: none; }
| + | </li> |
| − | small { font-size: 75%; }
| + | <!-- DUPLICATE --> |
| − | /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
| + | <li> |
| − | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
| + | <div class="col-md-6 "> |
| − | sup { top: -0.5em; }
| + | <img src="http://placehold.it/250x250"> |
| − | sub { bottom: -0.25em; }
| + | </div> |
| − | /* ========================================================================== | + | <div class="col-md-6 "> |
| − | Lists
| + | <h1 class="arrow">Responsive Design Specialists</h1> |
| − | ========================================================================== */ | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies nulla non metus pulvinar imperdiet. Praesent non adipiscing libero. </p> |
| − | /* * Addresses margins set differently in IE 6/7. */ | + | <p> |
| − |
| + | Mauris ultrices odio vitae nulla ultrices iaculis. Nulla rhoncus odio eu lectus faucibus facilisis. Maecenas ornare augue vitae sollicitudin accumsan. </p> |
| − | dl, menu, ol, ul { margin: 1em 0; }
| + | |
| − | dd { margin: 0 0 0 40px; }
| + | </div> |
| − | /* * Addresses paddings set differently in IE 6/7. */
| + | </li> |
| − | menu, ol, ul { padding: 0 0 0 40px; }
| + | |
| − | /* * Corrects list images handled incorrectly in IE 7. */ | + | |
| − | nav ul, nav ol { list-style: none; list-style-image: none; }
| + | </ul> |
| − | /* ========================================================================== | + | </div> |
| − | Embedded content
| + | </div> |
| − | ========================================================================== */
| + | </section> |
| − | /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. | + | <section class="intro text-center" id="intro"> |
| − | * 2. Improves image quality when scaled in IE 7. */
| + | <div class="container"> |
| − |
| + | <div class="row"> |
| − | img { border: 0; /* 1 */
| + | <div class="col-md-10 col-md-offset-1 wp1"> |
| − | -ms-interpolation-mode: bicubic; /* 2 */ }
| + | <div class="col-md-4 block-menu bottom-dotted"> |
| − | /* * Corrects overflow displayed oddly in IE 9. */ | + | <div class=" col-md-6"> |
| − | svg:not(:root) { overflow: hidden; }
| + | <img src="http://placehold.it/115x75"> |
| − | /* ==========================================================================
| + | </div> |
| − | Figures
| + | <div class=" col-md-6"> |
| − | ========================================================================== */ | + | <h3>Team</h3> |
| − | /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
| + | </div> |
| − |
| + | |
| − | figure { margin: 0; }
| + | |
| − | /* ==========================================================================
| + | </div> |
| − | Forms
| + | <div class="col-md-4 block-menu left-dotted bottom-dotted"> |
| − | ========================================================================== */ | + | <div class=" col-md-6"> |
| − | /* * Corrects margin displayed oddly in IE 6/7. */ | + | <img src="http://placehold.it/115x75"> |
| − |
| + | </div> |
| − | form { margin: 0; }
| + | <div class=" col-md-6"> |
| − | /* * Define consistent border, margin, and padding. */ | + | <h3>Proyect</h3> |
| − | fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
| + | </div> |
| − | /* * 1. Corrects color not being inherited in IE 6/7/8/9.
| + | </div> |
| − | * 2. Corrects text not wrapping in Firefox 3.
| + | <div class="col-md-4 block-menu left-dotted bottom-dotted"> |
| − | * 3. Corrects alignment displayed oddly in IE 6/7. */
| + | <div class=" col-md-6"> |
| − | legend { border: 0; /* 1 */
| + | <img src="http://placehold.it/115x75"> |
| − | padding: 0; white-space: normal; /* 2 */
| + | </div> |
| − | *margin-left: -7px; /* 3 */ }
| + | <div class=" col-md-6"> |
| − | /* * 1. Corrects font size not being inherited in all browsers.
| + | <h3>Background</h3> |
| − | * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome.
| + | </div> |
| − | * 3. Improves appearance and consistency in all browsers. */
| + | </div> |
| − | button, input, select, textarea { font-size: 100%; /* 1 */
| + | <div class="col-md-4 block-menu"> |
| − | margin: 0; /* 2 */
| + | <div class=" col-md-6"> |
| − | vertical-align: baseline; /* 3 */
| + | <img src="http://placehold.it/115x75"> |
| − | *vertical-align: middle; /* 3 */ }
| + | </div> |
| − | /* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in | + | <div class=" col-md-6"> |
| − | * the UA stylesheet. */
| + | <h3>Schedule</h3> |
| − | button, input { line-height: normal; }
| + | </div> |
| − | /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
| + | </div> |
| − | * and `video` controls.
| + | <div class="col-md-4 block-menu left-dotted"> |
| − | * 2. Corrects inability to style clickable `input` types in iOS.
| + | <div class=" col-md-6"> |
| − | * 3. Improves usability and consistency of cursor style between image-type
| + | <img src="http://placehold.it/115x75"> |
| − | * `input` and others.
| + | </div> |
| − | * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
| + | <div class=" col-md-6"> |
| − | * Known issue:inner spacing remains in IE 6. */
| + | <h3>Human<br> Practices</h3> |
| − | button, html input[type="button"], /* 1 */
| + | </div> |
| − | input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
| + | </div> |
| − | cursor: pointer; /* 3 */
| + | <div class="col-md-4 block-menu left-dotted"> |
| − | *overflow: visible; /* 4 */ }
| + | <div class=" col-md-6"> |
| − | /* * Re-set default cursor for disabled elements. */
| + | <img src="http://placehold.it/115x75"> |
| − | button[disabled], input[disabled] { cursor: default; }
| + | </div> |
| − | /* * 1. Addresses box sizing set to content-box in IE 8/9. | + | <div class=" col-md-6"> |
| − | * 2. Removes excess padding in IE 8/9.
| + | <h3>Colaborations</h3> |
| − | * 3. Removes excess padding in IE 7.
| + | </div> |
| − | * Known issue:excess padding remains in IE 6. */
| + | </div> |
| − | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
| + | |
| − | padding: 0; /* 2 */
| + | </div> |
| − | *height: 13px; /* 3 */
| + | </div> |
| − | *width: 13px; /* 3 */ }
| + | </div> |
| − | /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. | + | |
| − | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
| + | </section> |
| − | * (include `-moz` to future-proof). */
| + | <section class="text-center"> |
| − | input[type="search"] { -webkit-appearance: textfield; /* 1 */
| + | <div class="container"> |
| − | -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
| + | <h1 class="arrow">Project Description</h1> |
| − | box-sizing: content-box; }
| + | <div class="row"> |
| − | /* * Removes inner padding and search cancel button in Safari 5 and Chrome | + | <div class="col-md-5"> |
| − | * on OS X. */
| + | <img src="http://placehold.it/350x200"> |
| − | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
| + | </div> |
| − | /* * Removes inner padding and border in Firefox 3+. */ | + | <div class="col-md-7"> |
| − | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
| + | <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p> |
| − | /* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
| + | </div> |
| − | * 2. Improves readability and alignment in all browsers. */
| + | |
| − | textarea { overflow: auto; /* 1 */
| + | <div class="col-md-7"> |
| − | vertical-align: top; /* 2 */ }
| + | <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p> |
| − | /* ========================================================================== | + | </div> |
| − | Tables
| + | <div class="col-md-5"> |
| − | ========================================================================== */
| + | <img src="http://placehold.it/350x200"> |
| − | /* * Remove most spacing between table cells. */ | + | </div> |
| − | table { border-collapse: collapse; border-spacing: 0; }
| + | </div> |
| − | /* ========================================================================== | + | </div> |
| − | Global Styles
| + | </section> |
| − | ========================================================================== */ | + | <footer class="text-center"> |
| − | a { color: #353535; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
| + | <div class="col-md-8 col-md-offset-2"> |
| − | a:hover, a:focus { color: #3dc9b3; text-decoration: none; }
| + | <div class="col-md-4"> |
| − | p { color: #8c9398; word-spacing: 1px; line-height: 25px; font-size: 14px; }
| + | <p>Address</p> |
| − | h2 { font-size: 15px; color: #353535; text-transform: uppercase; font-weight: bold; }
| + | <p>Level 6, 23 Pitt St, Sydney</p> |
| − | h2::after { content: " "; border: solid 2px #3dc9b3; display: block; width: 35px; margin: 25px auto; }
| + | </div> |
| − | .section-padding { padding: 90px 0 100px } | + | <div class="col-md-4"> |
| − | .dark-bg { background: #f3f5f8; }
| + | <p>Address</p> |
| − | .light-bg { background-color: #fff; }
| + | <p>Level 6, 23 Pitt St, Sydney</p> |
| − | .dark-box { background: #f3f5f8; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; }
| + | </div> |
| − | .light-box { background-color: #fff; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 20px 0; }
| + | <div class="col-md-4"> |
| − | .light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #3dc9b3; -moz-box-shadow: 0px 3px 0px 0px #3dc9b3; box-shadow: 0px 3px 0px 0px #3dc9b3; }
| + | <p>Address</p> |
| − | .box-hover { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
| + | <p>Level 6, 23 Pitt St, Sydney</p> |
| − | .box-hover:hover, .box-hover:focus { transform: translate(0, -15px); -webkit-transform: translate(0, -15px); -ms-transform: translate(0, -15px); }
| + | </div> |
| − | .wrapper { height: 650px; }
| + | </div> |
| − | .nopadding { padding: 0; } | + | |
| − | | + | |
| − | /* ========================================================================== | + | </footer> |
| − | Navigation
| + | <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> |
| − | ========================================================================== */ | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
| − | nav { background-color: #242830; margin-top: -1px; }
| + | <!-- Include all compiled plugins (below), or include individual files as needed --> |
| − | nav ul { list-style: none; padding: 0; }
| + | <script src="js/waypoints.min.js"></script> |
| − | nav ul li { color: rgba(255, 255, 255, 0.6); display: block; border-bottom: 1px dotted rgba(255, 255, 255, 0.2); transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
| + | <script src="js/bootstrap.min.js"></script> |
| − | nav ul li:last-child { border: none; }
| + | <script src="js/scripts.js"></script> |
| − | nav ul li a { color: rgba(255, 255, 255, 0.6); display: block; padding: 20px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
| + | <script src="js/jquery.flexslider.js"></script> |
| − | nav ul li a:hover, nav ul li a:focus { text-decoration: none; color: rgba(255, 255, 255, 1); }
| + | <script src="js/modernizr.js"></script> |
| − | #nav-toggle { position: absolute; right: 15px; top: 0; }
| + | </body> |
| − | #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
| + | </html> |
| − | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; height: 5px; width: 35px; background: #353535; position: absolute; display: block; content: ''; }
| + | |
| − | #nav-toggle span:before { top: -10px; }
| + | |
| − | #nav-toggle span:after { bottom: -10px; }
| + | |
| − | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
| + | |
| − | #nav-toggle.active span { background-color: transparent; }
| + | |
| − | #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
| + | |
| − | #nav-toggle.active span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }
| + | |
| − | #nav-toggle.active span:after { transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); top: 10px; }
| + | |
| − | .navicon { position: relative; height: 26px; }
| + | |
| − | .indicator { position: absolute; right: 0 !important; }
| + | |
| − | .pull { display: none; }
| + | |
| − | /* ========================================================================== | + | |
| − | Hero
| + | |
| − | ========================================================================== */
| + | |
| − | .hero { background: url('../img/hero-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 75px 0 75px 0; height: auto; }
| + | |
| − | .hero h1 { font-size: 40px; letter-spacing: 12px }
| + | |
| − | .hero h1 span { color: #a1a9b0; display: inline-block; }
| + | |
| − | .hero p { letter-spacing: 1px; }
| + | |
| − | .learn-more-btn { background: rgba(61, 201, 179, 1); padding: 20px 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #309383; -moz-box-shadow: 0px 3px 0px 0px #309383; box-shadow: 0px 3px 0px 0px #309383; margin: 0 0 0; font-weight: bold; }
| + | |
| − | .learn-more-btn:hover, .learn-more-btn:focus { background: rgba(61, 201, 179, 0.6); color: #fff; }
| + | |
| − | /* ==========================================================================
| + | |
| − | Intro
| + | |
| − | ========================================================================== */
| + | |
| − | .intro { background: #f3f5f8; height: 100% }
| + | |
| − | .intro p { margin: 0 0; }
| + | |
| − | h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }
| + | |
| − | /* ========================================================================== | + | |
| − | Features
| + | |
| − | ========================================================================== */ | + | |
| − | .features-wrapper, .team-wrapper { margin: 0 0; }
| + | |
| − | .shadow { text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px; }
| + | |
| − | .icon { height: 175px; width: 175px; line-height: 175px; max-width: 100%; background: #3dc9b3; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto ; }
| + | |
| − | /* ========================================================================== | + | |
| − | iPhone Section
| + | |
| − | ========================================================================== */ | + | |
| − | .iphone { width: 50%; background: #f3f5f8; float: left; height: 100%; box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); z-index: 1; }
| + | |
| − | .fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; }
| + | |
| − | .responsive-services { position: relative; }
| + | |
| − | /* ========================================================================== | + | |
| − | Swag
| + | |
| − | ========================================================================== */
| + | |
| − | .swag { background: url('../img/plants-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 50px 0; }
| + | |
| − | .swag h1 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; }
| + | |
| − | .swag h1 span { display: block; font-size: 25px; margin-top: 20px; }
| + | |
| − | .down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.8); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; }
| + | |
| − | .down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }
| + | |
| − | /* ==========================================================================
| + | |
| − | Portfolio
| + | |
| − | ========================================================================== */ | + | |
| − | .effects { padding-left: 15px; }
| + | |
| − | .effects .img { position: relative; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; }
| + | |
| − | .effects .img:nth-child(n) { margin-right: 5px; }
| + | |
| − | .effects .img:first-child { margin-left: -15px; } | + | |
| − | .effects .img:last-child { margin-right: 0; } | + | |
| − | .effects .img img { display: block; margin: 0; padding: 0; height: auto; } | + | |
| − | .overlay { display: block; position: absolute; z-index: 20; background: rgba(100, 194, 158, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } | + | |
| − | a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
| + | |
| − | a.close-overlay.hidden { display: none; }
| + | |
| − | a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; }
| + | |
| − | .overlay-effect .img i { font-size: 30px; } | + | |
| − | .overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; } | + | |
| − | .overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
| + | |
| − | .overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
| + | |
| − | .img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
| + | |
| − | .img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
| + | |
| − | .designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; } | + | |
| − | /* ========================================================================== | + | |
| − | Subscribe
| + | |
| − | ========================================================================== */
| + | |
| − | .subscribe { background: url('../img/keyboard-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; }
| + | |
| − | .subscribe h1 { color: #fff; margin-bottom: 40px; }
| + | |
| − | .subscribe h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
| + | |
| − | .subscribe input[type=text] { background-color: rgba(255, 255, 255, 0.1); border: solid 1px #fff; padding: 20px; width: 30%; color: #fff; }
| + | |
| − | .subscribe input[type=submit] { background: rgba(61, 201, 179, 0.5); border: solid 1px rgba(61, 201, 179, 0.5); padding: 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
| + | |
| − | .subscribe input[type=submit]:hover { background: rgba(61, 201, 179, 1); border: solid 1px rgba(61, 201, 179, 1); color: #fff; }
| + | |
| − | /* ========================================================================== | + | |
| − | CTA
| + | |
| − | ========================================================================== */ | + | |
| − | .ignite-cta { background-color: #242830; padding: 70px 0; }
| + | |
| − | .ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
| + | |
| − | .ignite-btn:hover, .ignite-btn:focus { color: #3dc9b3; border: solid 1px #3dc9b3; }
| + | |
| − | /* ========================================================================== | + | |
| − | Team
| + | |
| − | ========================================================================== */ | + | |
| − | .team img { margin-bottom: 40px; }
| + | |
| − | ul.social-buttons { list-style: none; margin: 0; padding: 0; }
| + | |
| − | ul.social-buttons li { display: inline-block; margin-right: 10px; }
| + | |
| − | ul.social-buttons li:last-child { margin-right: 0; }
| + | |
| − | .social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #242830; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; }
| + | |
| − | .social-btn:hover, .social-btn:focus { background: #3dc9b3; color: #fff; }
| + | |
| − | .social { margin-top: 25px }
| + | |
| − | /* ========================================================================== | + | |
| − | Contact
| + | |
| − | ========================================================================== */
| + | |
| − | .up-btn { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.5); display: block; margin: 0 auto; color: #fff; font-size: 18px; line-height: 46px; text-align: center; position: absolute; top: -26px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
| + | |
| − | .up-btn:hover, up-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); } | + | |
| − | .contact-details { margin: 70px 0; } | + | |
| − | .contact-details h2 { font-size: 20px; } | + | |
| − | .contact-details h2 span { display: block; color: #3dc9b3; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 15px; }
| + | |
| − | .contact-wrap { position: relative; }
| + | |
| − | /* ==========================================================================
| + | |
| − | Footer
| + | |
| − | ========================================================================== */
| + | |
| − | footer a { color: #a1a9b0; }
| + | |
| − | footer { background-color: #242830; padding: 0px 0 30px; height: 100px }
| + | |
| − | ul.legals { list-style: none; color: #fff; line-height: 25px; }
| + | |
| − | ul.legals li { display: inline-block; }
| + | |
| − | ul.legals li::after { content: " |"; }
| + | |
| − | ul.legals li:last-child::after { content: ""; }
| + | |
| − | .legals { text-align: left; } | + | |
| − | .credit { text-align: right; } | + | |
| − | /* ========================================================================== | + | |
| − | FlexSlider Custom CSS
| + | |
| − | ========================================================================== */ | + | |
| − | #servicesSlider { margin-top: 70px; }
| + | |
| − | ul.slides li { margin-bottom: 20px; }
| + | |
| − | /* ========================================================================== | + | |
| − | Waypoints
| + | |
| − | ========================================================================== */ | + | |
| − | .wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; } | + | |
| − | .bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; } | + | |
| − | .delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
| + | |
| − | .delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
| + | |
| − | .wp3 { background: url('../img/iphone-bg.png') no-repeat center center; background-position: 200px 10px; height: 100%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ADDED BY ME */ | + | |
| − | #logos{
| + | |
| − | position: absolute; | + | |
| − | }
| + | |
| − | #float-menu{
| + | |
| − | width: 200px;
| + | |
| − | position: fixed;
| + | |
| − | right: 0px;
| + | |
| − | top: 30%;
| + | |
| − |
| + | |
| − | color: white
| + | |
| − | }
| + | |
| − | #float-menu li{
| + | |
| − | font-weight: bold;
| + | |
| − | list-style-type: none;
| + | |
| − | padding: 1em 1em;
| + | |
| − | text-align: right;
| + | |
| − | background-color: beige;
| + | |
| − | }
| + | |
| − | | + | |
| − | .half-height{
| + | |
| − | height: 50%;
| + | |
| − | | + | |
| − | }
| + | |
| − | .bottom-dotted{
| + | |
| − | border-bottom: black 1px dotted;
| + | |
| − | }
| + | |
| − | .left-dotted{
| + | |
| − | border-left: black 1px dotted;
| + | |
| − | }
| + | |
| − | .grid{
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .block-menu{
| + | |
| − | padding: 2em;
| + | |
| − | | + | |
| − | }
| + | |
| − | .block-menu h3{
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |