Created
August 1, 2017 05:34
-
-
Save Permpol/7c9ec3c20726c2b746407028639c1c5b to your computer and use it in GitHub Desktop.
Keaton Goosen - Assignment 8
This file contains 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
| <div class="wrapper"> | |
| <section class="top"> | |
| <p>Protect your wealth through every stage of your life. As one of East Africa's largest and most innovative insurers and financial services companies, our decades of experience and our eye on the future will help you navigate today's complex financial landscape.</p><br/> | |
| <p>We're better together</p> | |
| </section> | |
| <section class="product__gallery"> | |
| <div class="grid-3" | |
| <article class="product"> | |
| <svg class="animation Layer_1 svg1" xmlns="http://www.w3.org/2000/svg" viewBox="-76.9 253.5 276.5 276" width="100px" height="100px"> | |
| <style>.yellow0 { | |
| fill: none; | |
| stroke: yellow; | |
| stroke-width: 7; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-miterlimit: 10; | |
| } | |
| .yellow1 { | |
| fill: none; | |
| stroke: yellow; | |
| stroke-width: 7; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-miterlimit: 10; | |
| } | |
| .yellow2{ | |
| stroke: yellow; | |
| fill: yellow; | |
| } | |
| </style> | |
| <path class="yellow2" d="M61.5 529.5c-76.4 0-138.4-62-138.4-138s62-138 138.4-138 138.1 62 138.1 138-62 138-138.1 138zm0-266.7c-71.1 0-129 57.6-129 128.7S-9.9 520.2 61.2 520.2s129-57.6 129-128.7-57.9-128.7-128.7-128.7z"></path> | |
| <path class="yellow0" d="M60.5 466.1c-5.6 0-10.1-4.5-10.1-10.1V326c0-5.6 4.5-10.1 10.1-10.1s10.1 4.5 10.1 10.1v130c0 5.6-4.5 10.1-10.1 10.1z"></path> | |
| <path class="yellow1" d="M37 461.4h47.1v5.6H37z"></path> | |
| <path class="yellow0" d="M-2.6 361.7l-10.4-14v-.1l10.4-14h53v28.1h-53zM6.7 416.6l-10.4-14v-.1l10.4-14h43.7v28.1H6.7zM129.3 355.5l10.4 14v.1l-10.4 14H70.6v-28.1h58.7z"></path> | |
| </svg> | |
| <div class="product__info"> | |
| <h1 class="icon__title">Guide me</h1> | |
| <p class="product__description">Get expert tips to make the complex simple</p> | |
| </div> | |
| </article> | |
| <hr> | |
| </div> | |
| <div class="grid-3" | |
| <article class="product"> | |
| <svg class="animation Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="282.3 158.8 276.5 276.1" width="100px" height="100px"> | |
| <style> | |
| .green0 { | |
| fill: none; | |
| stroke: #3A8F62; | |
| stroke-width: 7; | |
| stroke-miterlimit: 10; | |
| } | |
| .green1 { | |
| fill: none; | |
| stroke: #3A8F62; | |
| stroke-width: 7; | |
| stroke-linecap: round; | |
| stroke-miterlimit: 20; | |
| } | |
| .green2{ | |
| fill: #3A8F62; | |
| stroke: #3A8F62; | |
| } | |
| </style> | |
| <path class="green2" d="M420.7 434.9c-76.4 0-138.4-62-138.4-138.1s62-138 138.4-138 138.1 62 138.1 138-62 138.1-138.1 138.1zm0-266.7c-71.1 0-129 57.6-129 128.7s57.6 128.7 128.7 128.7 129-57.6 129-128.7-57.9-128.7-128.7-128.7z"></path> | |
| <circle cx="420.6" cy="323.1" r="53.9" class="green0"></circle> | |
| <path d="M386.6 279.4v-29c0-18.5 15.1-33.6 33.6-33.6s33.6 15.1 33.6 33.6v29" class="green0"></path> | |
| <path d="M420.6 297c-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c-.1-14.4-11.7-26-26.1-26.1z" class="green1"></path> | |
| </svg> | |
| <div class="product__info"> | |
| <h1 class="icon__title">Protect my wealth</h1> | |
| <p class="product__description">Get expert tips to make the complex simple</p> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="grid-3" | |
| <article class="product"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="animation Layer_1" viewBox="-610.2 590.1 72.5 72.4" width="100px" height="100px"> | |
| <style> | |
| .teal0 { stroke: #47D1C4; stroke-width: 0.5 !important; stroke-miterlimit: 0.5!important; } | |
| .teal1{ | |
| fill:#47D1C4; | |
| stroke: #47D1C4; | |
| } | |
| .teal2{ | |
| fill:#47D1C4; | |
| stroke: #47D1C4; | |
| } | |
| </style> | |
| <path class="teal1" d="M-573.9 661.5c-19.5 0-35.3-15.8-35.3-35.2 0-19.4 15.8-35.2 35.3-35.2s35.2 15.8 35.2 35.2c0 19.4-15.8 35.2-35.2 35.2zm0-68.1c-18.1 0-32.9 14.7-32.9 32.8S-592.1 659-574 659s32.9-14.7 32.9-32.8-14.8-32.8-32.8-32.8z" class="teal0"></path> | |
| <path class="teal2" d="M-587.3 632.4c1.1-1.6 2.1-3.2 3.2-4.9.4-.6.4-1.5-.1-2.1-.5-.7-.8-1.5-.8-2.4 0-1 .3-1.9.9-2.7 1.2-1.5 3.2-2.2 5.1-1.5 1.7.6 2.7 1.9 2.8 3.8.1.7.5 1.4 1.2 1.6.7.2 1.4.5 2.1.7.7.2 1.4.1 1.9-.5.6-.6 1.3-1.1 2.2-1.4.9-.3 1.8-.2 2.6 0 .7.2 1.4-.1 1.8-.6.9-1.1 1.8-2.2 2.6-3.2.5-.6.5-1.3.2-2-1.1-2.1-.8-3.9.8-5.3s4.1-1.5 5.8-.2c1.7 1.3 2.1 3.6 1 5.4-1.1 1.8-2.9 2.5-5.2 1.9-.7-.2-1.4.1-1.8.6l-2.7 3.3c-.5.6-.5 1.4-.2 2 1 1.9.8 3.3-.4 4.8-1.2 1.4-3.2 2-5 1.3-1.7-.6-2.6-1.8-2.7-3.8-.1-.7-.5-1.4-1.2-1.6-1-.3-2-.7-3.1-1-.1 0-.3 0-.4.1-1.7 1.9-2.7 2.5-4.7 2.1-.7-.1-1.4.2-1.8.8-1 1.6-2.1 3.2-3.1 4.8-.4.6-.4 1.4.1 2 .6.7.9 1.6.8 2.6 0 1.1-.4 2-1.2 2.8-1.5 1.6-3.9 1.9-5.7.7s-2.5-3.5-1.5-5.4c.9-1.8 2.6-2.6 4.8-2.3.6.4 1.3.1 1.7-.4zm31.8-17.7c-.2-1.3-1.5-2.1-2.8-1.9-1.3.2-2.2 1.5-2 2.7.2 1.3 1.5 2.2 2.9 1.9 1.2-.1 2.1-1.4 1.9-2.7zm-22.7 7.8c-.2-1.3-1.5-2.1-2.8-1.8-1.3.2-2.2 1.5-2 2.7.2 1.3 1.6 2.1 2.9 1.9 1.2-.3 2.1-1.6 1.9-2.8zm8.1 5.1c.2 1.3 1.5 2.1 2.8 1.9 1.3-.2 2.2-1.5 2-2.8-.2-1.3-1.5-2.1-2.8-1.9-1.3.3-2.2 1.6-2 2.8zm-17.5 9.2c-.2-1.3-1.5-2.1-2.8-1.8-1.3.2-2.2 1.5-2 2.7.2 1.3 1.6 2.1 2.9 1.9 1.3-.3 2.2-1.5 1.9-2.8z" class="teal0"></path> | |
| </svg> | |
| <div class="product__info"> | |
| <h1 class="icon__title">Create my wealth</h1> | |
| <p class="product__description">Get expert tips to make the complex simple</p> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| </div> |
This file contains 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
| /*------------------------------------*\ | |
| #GLOBAL STYLE SETTINGS | |
| \*------------------------------------*/ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| *{ | |
| margin: 0; | |
| border: 0; | |
| padding: 0; | |
| } | |
| body, button, html, input, select, textarea { | |
| font-family: HelveticaL,Arial,sans-serif; | |
| background-color: #002339; | |
| color: #fff; | |
| font-size: 14px; | |
| line-height: 22px; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /*------------------------------------*\ | |
| #MAIN WEB PAGE STYLING | |
| \*------------------------------------*/ | |
| .wrapper{ | |
| width:100%; | |
| } | |
| .top { | |
| width:80%; | |
| margin: 0 auto; | |
| padding-top:30px; | |
| } | |
| .top p { | |
| text-align:center; | |
| } | |
| .product__gallery{ | |
| width: 80%; | |
| margin: 0 auto; | |
| padding-top: 45px; | |
| } | |
| .Layer_1 { | |
| display: block; | |
| margin: 0 auto; | |
| width: 100%; | |
| -webkit-transition-duration: 2s; | |
| color: blue; | |
| } | |
| .grid-3 { | |
| width: 32%; | |
| float: left; | |
| display: inline-block; | |
| } | |
| .product { | |
| width: 100%; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .product__icon { | |
| display: block; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .product__info{ | |
| margin-top: 30px; | |
| -webkit-transition-duration: 2s; | |
| } | |
| .icon__title { | |
| text-align: center; | |
| width: 80%; | |
| margin: 0 auto; | |
| font-size:26px; | |
| } | |
| .product__description{ | |
| text-align: center; | |
| width: 60%; | |
| margin: 0 auto; | |
| padding-top: 10px; | |
| } | |
| /*------------------------------------*\ | |
| #ANIMATION CLASS | |
| \*------------------------------------*/ | |
| .animation:hover { | |
| -webkit-transform: scale(1.15); | |
| transform: scale(1.15); | |
| -webkit-transition-duration: 2s; | |
| z-index: 99; | |
| } | |
| .animation:hover .product__info { | |
| margin-top:10px; | |
| } | |
| /*------------------------------------*\ | |
| #RESPONSIVE STYLING | |
| \*------------------------------------*/ | |
| @media screen and (max-width: 700px) { | |
| .product__gallery, .grid-3 { | |
| width: 100%; | |
| } | |
| .grid-3{ | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: .5px solid #c1c1c1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment