Простая Донат страница

bash

Меценат

bash

Меценат
Не в сети
5 Авг 2019
174
138
  • bash

  • Это супер-пупер простая донат страница, вы можете её легко переделать под свои критерии.
    Параша? - Да. Зачем? - Чтобы было. :roflanebalo:
    HTML:
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>donate page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="dnt.css">
      </head>
      <body>
      <div class="pricing-table">
        <div class="col">
    
          <div class="table">
            <h2>Donate</h2>
    
            <a href="LINK">Press for donate</a>
          </div>
    
        </div>
      </div>
      </body>
    </html>
    CSS:
    body{
      margin: 0;
      padding: 0;
      background: rgb(10,10,10);
      background-size: cover;
      background-attachment: fixed;
    }
    
    .pricing-table{
      max-width: 1200px;
      margin: auto;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
    }
    
    .col{
      flex: 25%;
      padding: 10px;
      max-width: 320px;
      box-sizing: border-box;
    }
    
    .table{
      background: #fff;
      padding: 40px 20px;
      font-family: "montserrat",sans-serif;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 10px #00000070;
    }
    .table h2{
      text-transform: uppercase;
    }
    .table ul{
      margin: 0;
      padding: 0;
    }
    .table ul li{
      padding: 10px 0;
      list-style: none;
    }
    .price{
      font-size: 40px;
      margin-bottom: 20px;
    }
    .price span{
      display: block;
      font-size: 14px;
    }
    .table a{
      text-decoration: none;
      color: #2c3e50;
      border: 2px solid #2c3e50;
      display: block;
      padding: 10px 0;
      margin: 10px 0;
      border-radius: 40px;
      text-transform: uppercase;
      font-size: 14px;
      transition: 0.5s linear;
    }
    .table a:hover{
      background: #2c3e50;
      color: #fff;
    }
    .pop{
      background: #2c3e50;
      color: #fff;
      transform: rotate(45deg);
      padding: 10px 40px;
      position: absolute;
      top: 16px;
      right: -34px;
    }
    
    
    @media screen and (max-width:980px) {
      .col{
        flex: 50%;
      }
    }
    
    @media screen and (max-width:700px) {
      .col{
        flex: 100%;
      }
    }