NumberLong("894983009386390")

In this example below you will see how to do a NumberLong("894983009386390") with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Arguro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arguro ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>894983009386390</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Area de pagamento</h1>

<div class="page">
  
  <div class="container">
    
    <a href="#">
      <div class="box box1">
        <i class="material-icons">payment</i>
        <p>confirmar</p>
      </div>
    </a>

    <a href="#">
      <div class="box box2">
        <i class="material-icons">cancel</i>
        <p>Cancelar </p>
      </div>
    </a>

    <a href="#">
      <div class="box box3">
        <i class="material-icons">phone</i>
        <p>Contato</p>
      </div>
    </a>

  </div>

</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Arguro/numberlong894983009386390-qRYzXb */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
body {
  background: #e2e1e0;
  padding: 0 30px 0 30px;
}

* {
  margin: 0;
}

h1 {
  background: linear-gradient(to bottom right, #4FC3F7, #0277BD);
  border-radius: 10px 10px 0 0;
  color: white;
  font-family: "roboto", sans-serif;
  font-size: 35px;
  font-weight: 300;
  margin: 30px 30px 0 30px;
  padding: 20px;
  text-align: center;
}

.page {
  align-content: flex-end;
  background: white;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: flex;
  justify-content: center;
  margin: 0 30px 0 30px;
  padding: 20px;
}

.container {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 652px;
}

a {
  color: inherit;
  text-decoration: none;
}

.box {
  align-items: center;
  background: #03A9F4;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  color: white;
  display: flex;
  font: 30px "roboto", sans-serif;
  font-weight: 100;
  justify-content: center;
  margin: 10px;
  padding: 15px;
  transition: all 400ms ease-in-out;
}

.box p {
  padding-left: 5px;
}

.box1:hover {
  background: #00E676;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.box1:active {
  background: #69F0AE;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 50ms;
}

.box2:hover {
  background: #F44336;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.box2:active {
  background: #E57373;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 50ms;
}

.box3:hover {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.box3:active {
  background: #4FC3F7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 50ms;
}

@media (min-width: 755px) {
  .page, h1 {
    max-width: 660px;
  }

  .page {
    margin: 0 auto;
  }

  h1 {
    margin: 30px auto 0 auto;
  }
}
@media (max-width: 752px) {
  .page, h1 {
    max-width: 519px;
  }

  .page {
    margin: 0 auto;
  }

  h1 {
    margin: 30px auto 0 auto;
  }

  .box3 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }

  .box3 p {
    display: none;
  }
}
@media (max-width: 619px) {
  .box2 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }

  .box2 p {
    display: none;
  }
}
@media (max-width: 470px) {
  .box1 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }

  .box1 p {
    display: none;
  }

  .page {
    padding: 20px 2px;
  }

  h1 {
    font-size: 2em;
  }
}
@media (max-width: 330px) {
  body {
    padding: 0;
  }

  .page, h1 {
    margin: 0;
    border-radius: 0;
  }

  h1 {
    padding-top: 50px;
  }
}
@media (max-width: 240px) {
  h1 {
    display: none;
  }
}

Comments