Last active
August 29, 2015 13:57
-
-
Save Boztown/9377361 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Neota Tech | Home</title> | |
| <link rel="icon" type="image/png" href="/assets/images/favicon.png"> | |
| <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7834852/678784/css/fonts.css" /> | |
| <link rel="stylesheet" href="css/screen.css" media="screen"> | |
| </head> | |
| <body> | |
| <header> | |
| <img src="images/logo-big.png" alt="Neota Tech" id="logo" /> | |
| <div id="introduction"> | |
| <p><span>Neota Tech is</span> a team of people with different skill sets and interests, something that sets us apart in the software world. Today, it’s not enough to develop ingenious programs – although that is important. Businesses also demand programs that consider operational efficiency and ease of use for their clients and employees.</p> | |
| <p><span>We exist because</span> people should be used for creativity and innovation, and computers should do the rest. Neota Tech enables computers to handle our predictable tasks by building technology solutions.</p> | |
| </div> | |
| </header> | |
| <section id="team"> | |
| <div id="jordan-hitpoint" class="hitpoint"></div> | |
| <div id="jordan" class="team-member"> | |
| <div class="faded"> | |
| <span class="member-name">Jordan Craig</span> | |
| </div> | |
| </div> | |
| <div id="richard-hitpoint" class="hitpoint"></div> | |
| <div id="richard" class="team-member"> | |
| <div class="faded"> | |
| <span class="member-name">Richard Roseboom</span> | |
| </div> | |
| </div> | |
| <div id="ryan-hitpoint" class="hitpoint"></div> | |
| <div id="ryan" class="team-member"> | |
| <div class="faded"> | |
| <span class="member-name">Ryan Bosinger</span> | |
| </div> | |
| </div> | |
| <div id="tim-hitpoint" class="hitpoint"></div> | |
| <div id="tim" class="team-member"> | |
| <div class="faded"> | |
| <span class="member-name">Tim Hamilton</span> | |
| </div> | |
| </div> | |
| <div id="mike-hitpoint" class="hitpoint"></div> | |
| <div id="mike" class="team-member"> | |
| <div class="faded"> | |
| <span class="member-name">Michael Dandenault</span> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Welcome to Compass. | |
| * In this file you should write your main styles. (or centralize your imports) | |
| * Import this file using the following HTML or equivalent: | |
| * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ | |
| @import "compass/reset"; | |
| $highlight-color: #aee0dd; | |
| @mixin breakpoint($point) { | |
| @if $point == widest { | |
| @media (max-width: 1338px) { @content; } | |
| } | |
| @else if $point == second_widest { | |
| @media (max-width: 1270px) { @content; } | |
| } | |
| @else if $point == third_widest { | |
| @media (max-width: 1150px) { @content; } | |
| } | |
| @else if $point == mobile { | |
| @media (max-width: 1000px) { @content; } | |
| } | |
| @else if $point == mobile_small { | |
| @media (max-width: 720px) { @content; } | |
| } | |
| } | |
| html { height: 100%; } | |
| body { | |
| font-family: 'Gotham SSm A', 'Gotham SSm B'; background: black; color: white; height: 100%; overflow-x: hidden; min-height: 850px; position: relative; | |
| } | |
| header { text-align: center; padding: 40px 0; | |
| @include breakpoint(mobile) { | |
| padding-bottom: 0; | |
| } | |
| } | |
| header #logo { | |
| width: 240px; | |
| @include breakpoint(mobile) { | |
| width: 350px; | |
| margin: 30px 0 20px 0; | |
| } | |
| } | |
| header #introduction { | |
| width: 686px; margin: 50px auto; font-size: 15px; line-height: 32px; font-weight: 200; | |
| @include breakpoint(second_widest) { width: auto; padding: 0 8%; } | |
| @include breakpoint(mobile) { | |
| font-size: 24px; | |
| line-height: 48px; | |
| } | |
| } | |
| header #introduction p { margin-bottom: 34px; } | |
| header #introduction span { color: $highlight-color; } | |
| #team | |
| { | |
| width: 100%; position: absolute; margin: 0 auto; bottom: 0; height: 440px; overflow: hidden; | |
| @include breakpoint(widest) { | |
| width: 100%; | |
| } | |
| @include breakpoint(mobile) { | |
| position: relative; | |
| height: auto; | |
| text-align: center; | |
| } | |
| .team-member { | |
| width: 440px; height: 480px; background-repeat: no-repeat; position: absolute; transition: left 0.3s ease; transition: right 0.3s ease; transition: top 0.3s ease; | |
| @include breakpoint(mobile) { | |
| position: relative; | |
| top: auto !important; | |
| left: auto !important; | |
| right: auto !important; | |
| display: block; | |
| margin: 36px auto; | |
| border-radius: 50%; | |
| width: 380px !important; | |
| height: 380px !important; | |
| border: 10px solid white; | |
| background-position: 60%; | |
| } | |
| } | |
| .faded { | |
| width: 100%; height: 100%; opacity: 0; position: relative; text-align: center; transition: opacity 0.3s ease; background-repeat: no-repeat; | |
| @include breakpoint(mobile) { | |
| border-radius: 50%; | |
| width: 380px !important; | |
| height: 380px !important; | |
| background-position: 60%; | |
| top: 0; | |
| left: 0; | |
| position: absolute; | |
| } | |
| } | |
| .hitpoint { | |
| position: absolute; width: 440px; height: 420px; | |
| @include breakpoint(mobile) { | |
| display: none; | |
| } | |
| } | |
| .hitpoint:hover + .team-member .faded { opacity: 1; } | |
| .member-name { margin-top: 300px; display: inline-block; } | |
| .wrap { height: 100px; width: 200px; border: 1px solid red; position: absolute; left: 140px; overflow: visible; } | |
| #jordan-hitpoint { z-index: 21; left: 7%; } | |
| #jordan { background-image: url(/images/team/jordan.png); z-index: 20; | |
| @include breakpoint(second_widest) { left: -40px; } | |
| @include breakpoint(third_widest) { left: -80px; } | |
| .faded { background-image: url(/images/team/jordan-faded.png); } | |
| } | |
| #richard-hitpoint { z-index: 21; left: 24%; } | |
| #richard { background-image: url(/images/team/richard.png); z-index: 10; left: 18%; top: 24px; | |
| @include breakpoint(second_widest) { left: 14%; | |
| .member-name { margin-top: 200px; } | |
| } | |
| @include breakpoint(third_widest) { left: 11%; } | |
| .faded { background-image: url(/images/team/richard-faded.png); } | |
| } | |
| #ryan-hitpoint { z-index: 21; left: 43%; } | |
| #ryan { background-image: url(/images/team/ryan.png); z-index: 20; left: 0; right: 0; margin: 0 auto; top: 24px; width: 515px; | |
| .faded { background-image: url(/images/team/ryan-faded.png); } | |
| } | |
| #tim-hitpoint { z-index: 21; left: 62%; } | |
| #tim { background-image: url(/images/team/tim.png); z-index: 10; right: 17%; top: 38px; | |
| @include breakpoint(second_widest) { right: 14%; | |
| .member-name { margin-top: 200px; } | |
| } | |
| @include breakpoint(third_widest) { right: 10%; } | |
| .faded { background-image: url(/images/team/tim-faded.png); } | |
| } | |
| #mike-hitpoint { z-index: 21; left: 80%; } | |
| #mike { background-image: url(/images/team/mike.png); z-index: 20; right: 0%; top: 34px; width: 420px; | |
| @include breakpoint(second_widest) { right: -40px; } | |
| @include breakpoint(third_widest) { right: -80px; } | |
| .faded { background-image: url(/images/team/mike-faded.png); } | |
| } | |
| } | |
| @media (max-width: 1000px) { | |
| #team .team-member:hover .faded { opacity: 1; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment