Created
February 15, 2018 13:30
-
-
Save tigerclaw-az/004fcfcd74a01604014d609c31ab9946 to your computer and use it in GitHub Desktop.
Truly Vibrant Telephony mockup
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> | |
| <head> | |
| <meta name="viewport" content="width=device-width" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Vibrant Example</title> | |
| <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" type="text/css"> | |
| <style> | |
| html { | |
| font-size: 16px; | |
| } | |
| body { | |
| background: #000000; | |
| font-family: "adelle-sans", sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| h1 { | |
| font-size: 4em; | |
| margin-top: 2rem; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .main { | |
| height: 700px; | |
| position: relative; | |
| width: 100%; | |
| } | |
| .text-container { | |
| background-color: #ffffff; | |
| border-radius: 0 60% 60% 0; | |
| border-right-style: solid; | |
| max-width: 35%; | |
| pointer-events: none; | |
| position: absolute; | |
| z-index: 10; | |
| } | |
| .text-container .content { | |
| max-width: 70%; | |
| padding: 2.5rem 2rem; | |
| } | |
| .text-container .content .icon { | |
| background-color: rgba(20, 20, 20, .9); | |
| border-radius: 50%; | |
| color: #ffffff; | |
| padding: .5rem; | |
| } | |
| .text-container .search { | |
| background-color: #e9e9ea; | |
| /*background-image: url(images/icon-search.png);*/ | |
| /*background-repeat: no-repeat;*/ | |
| /*background-position: 10px center;*/ | |
| /*background-size: 13px 12px;*/ | |
| border-radius: 30px; | |
| box-sizing: inherit; | |
| color: #3e3e40; | |
| display: block; | |
| margin-top: 32px; | |
| padding-left: 20px; | |
| padding-right: 0; | |
| width: 50%; | |
| } | |
| .tabs { | |
| left: 18%; | |
| position: absolute; | |
| top: 0; | |
| width: 75%; | |
| z-index: 1; | |
| --tab-width: 15; | |
| } | |
| .tabs ul li { | |
| color: #ffffff; | |
| text-align: right; | |
| } | |
| .tabs ul .tab-pull a { | |
| color: inherit; | |
| display: block; | |
| height: 100%; | |
| line-height: 1.25; | |
| padding: 1.65rem 1rem; | |
| position: relative; | |
| text-decoration: none; | |
| -webkit-transition: width .5s ease; | |
| -moz-transition: width .5s ease; | |
| -ms-transition: width .5s ease; | |
| -o-transition: width .5s ease; | |
| transition: width .5s ease; | |
| } | |
| .tabs ul .tab-pull a .label { | |
| display: inline-block; | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| margin-right: 1.3rem; | |
| opacity: 0; | |
| -webkit-transition: opacity .75s ease; | |
| -moz-transition: opacity .75s ease; | |
| -ms-transition: opacity .75s ease; | |
| -o-transition: opacity .75s ease; | |
| transition: opacity .75s ease; | |
| transition-delay: .5s; | |
| vertical-align: unset; | |
| } | |
| .tabs ul .tab-pull a:hover { | |
| width: 100% !important; | |
| } | |
| .tabs ul .tab-pull a:hover .label { | |
| opacity: 1 !important; | |
| } | |
| .tabs ul .tab-pull a .icon { | |
| font-size: 1.5rem; | |
| } | |
| .tabs ul .tab-pull:nth-child(1) a { | |
| background-color: rgba(225, 181, 43, .9); | |
| width: calc(var(--tab-width) * .9%); | |
| } | |
| .tabs ul .tab-pull:nth-child(2) a { | |
| background: rgba(204, 123, 30, .9); | |
| width: calc(var(--tab-width) * 1.25%); | |
| } | |
| .tabs ul .tab-pull:nth-child(3) a { | |
| background: rgba(188, 0, 51, .9); | |
| width: calc(var(--tab-width) * 1.5%); | |
| } | |
| .tabs ul .tab-pull:nth-child(4) a { | |
| background: rgba(151, 0, 86, .9); | |
| width: calc(var(--tab-width) * 1.6%); | |
| } | |
| .tabs ul .tab-pull:nth-child(5) a { | |
| background: rgba(108, 57, 133, .9); | |
| width: calc(var(--tab-width) * 1.65%); | |
| } | |
| .tabs ul .tab-pull:nth-child(6) a { | |
| background: rgba(71, 100, 166, .9); | |
| width: calc(var(--tab-width) * 1.65%); | |
| } | |
| .tabs ul .tab-pull:nth-child(7) a { | |
| background: rgba(91, 160, 117, .9); | |
| width: calc(var(--tab-width) * 1.5%); | |
| } | |
| .tabs ul .tab-pull:nth-child(8) a { | |
| background: rgba(143, 182, 90, .9); | |
| width: calc(var(--tab-width) * 1.35%); | |
| } | |
| .tabs ul .tab-pull:nth-child(9) a { | |
| background: rgba(102, 204, 117, .9); | |
| width: calc(var(--tab-width) * 1%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main"> | |
| <section class="text-container"> | |
| <div class="content"> | |
| <div class="social-container"> | |
| <i class="icon fab fa-fw fa-facebook-f"></i> | |
| <i class="icon fab fa-fw fa-linkedin-in border-right"></i> | |
| <i class="icon fab fa-fw fa-twitter"></i> | |
| </div> | |
| <h1>Truly<br>Vibrant<br>Telephony.</h1> | |
| <div class="brand"> | |
| <img src="http://via.placeholder.com/50x50"/><span>COLOURED<br><strong>LINES</strong></span> | |
| </div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos minima delectus eaque illum, quam fugiat numquam libero consequuntur tempore debitis ex aliquid ratione voluptas molestias vel, enim quas reprehenderit neque?</p> | |
| <input type="text" placeholder="Search this site" class="search" /> | |
| <p>Last Modified: mm/dd/yyyy</p> | |
| </div> | |
| </section> | |
| <nav class="tabs"> | |
| <ul> | |
| <li class="tab-pull"><a href="#"><span class="label">WHO</span><i class="icon fas fa-users"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">WHAT</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">WHY</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">PRODUCTS</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">TESTIMONIALS</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">SHOPPING</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">CONTACT</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">BLOG</span><i class="icon fas fa-cog"></i></a></li> | |
| <li class="tab-pull"><a href="#"><span class="label">FAQ</span><i class="icon fas fa-cog"></i></a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment