Giters

dexlab-io / DexWallet-website

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Verified Token Section

dimarconicola opened this issue · comments

commented

This goes between the whitelabel section and the footer

Here's the zip with html/css
Verified_Token.html.zip

Here's a screenshot
screenshot 2018-11-16 at 13 13 46

Here's the code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <base href="/" target="_blank" />
    <link
      href="https://fonts.googleapis.com/css?family=Quicksand:400"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300"
      rel="stylesheet"
    />
    <style>
      * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      html,
      body {
        margin: 0;
        background-color: #f2f2f2;
      }
      .VerifiedTokenContent {
        width: 92%;
        padding: 4%;
        background-color: #f2f2f2;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .columnText {
        flex-basis: 400px;
        flex-grow: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
      }

      .contentText {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10% 0 0 0;
      }

      .columnPhone {
        flex-basis: 200px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 2% 0 2%;
      }

      img.iphonepic {
        height: auto;
        max-width: 280px;
      }

      img.verifidTokenImg {
        height: auto;
        max-width: 100%;
      }

      .whitelabelTitle {
        font-family: "Quicksand", sans-serif;
        font-size: 2.6rem;
        font-weight: 400;
        color: #000000;
        margin: 0;
      }

      .whitelabelSub {
        font-family: "Open Sans", sans-serif;
        font-size: 1.3rem;
        font-weight: 300;
        color: #000000;
      }

      button.getintouch {
        padding: 10px 22px 12px 22px;
        height: 42px;
        border-radius: 6px;
        background-color: #2e3c4f;
        font-size: 14px;
        color: #ffffff;
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        border: none;
        cursor: pointer;
      }
      button.getintouch:hover {
        background-color: rgb(59, 84, 121);
      }

      @media (max-width: 840px) {
        img.iphonepic {
          height: auto;
          max-width: 200px;
        }
      }

      @media (max-width: 740px) {
        .contentText {
          align-items: center;
        }
      }
    </style>
  </head>

  <body>
    <span class="verifiedTokenCover"
      ><img
        class="verifidTokenImg"
        src="https://cdn-images-1.medium.com/max/2000/1*0F6b-1lwHYhj-OkM2lFyzQ.jpeg"
        alt="iphone"
        border="0"
    /></span>
    <section class="VerifiedTokenContent">
      <span class="columnPhone"
        ><img class="iphonepic"
        src="https://preview.ibb.co/daTgN0/verifiedmain2.jpg alt="iphone"
        border="0" /></span
      >
      <span class="columnText">
        <span class="contentText">
          <h1 class="whitelabelTitle">
            Get our exclusive badge for Verified Tokens
          </h1>
          <h2 class="whitelabelSub">
            The crypto world sometimes calls for transparency. At Dexlab we are
            working on that as well.
          </h2>
          <button
            class="getintouch"
            onclick="window.location.href='https://medium.com/dexlab-io/dexwallet-introduces-the-verified-token-program-fe2a7311a415'"
          >
            READ MORE
          </button>
        </span>
      </span>
    </section>
  </body>
</html>