Keaton Goosen - Assignment 8

index.html

<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>

keaton-goosen-assignment-8.markdown

Keaton Goosen - Assignment 8

A Pen by Keaton on CodePen.

License.

style.css

/*------------------------------------*\
  #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;
  }
}