Untitled

avatar
unknown
plain_text
2 years ago
3.6 kB
7
Indexable
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
    <style>
      @font-face {
        font-family: 'Fira Sans', sans-serif;
      }

      * {
        font-family: 'Fira Sans', sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      .column {
        float: left;
        width: 45%;
        padding: 5px;
      }

      .column img {
        max-width: 100%;
      }

      .footer {
        float: left;
        width: 33%;
        padding: 10px;
        height: 200px;
        margin-top: 100px;
        margin-bottom: 50px;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .works {
        color: grey;
        margin-bottom: 30px;
      }

      body {
        max-width: 1000px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column">
        <h2 style="opacity: 30%;">Hello</h2>
        <h3 style="opacity: 50%;">We Are</h3>
        <h1>InShock</h1>
        <h4 class="works">MOST RECENT WORKS</h4>
      </div>
      <div class="column">
        <p>We build design teams - we break things down and build it better - we deliver the best of solutions <br> InShock means powerfull simplicity </p>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <img src="https://mfiles.alphacoders.com/992/992661.jpg">
      </div>
      <div class="column">
        <img src="https://mfiles.alphacoders.com/992/992037.jpg">
        <br> Demos, Logos, Reports, Names, Events, Media, Wordpress, Google, Books,Optimisations
      </div>
    </div>
    <div class="row">
      <div class="footer" style="background-color:black; color: white;">
        <h2>Contact Info</h2>
        <p>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
            <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
          </svg> Ha Noi, Viet Nam
        </p>
        <p>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
            <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
          </svg> Nguyen Nhu Quynh
        </p>
        <p>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
          </svg> nnquynh@gmail.com
        </p>
      </div>
      <div class="footer" style="background-color:grey; color: white; text-align: center">
        <h2>Contact Us</h2>
        <p>If you have an idea. <br>What are you waiting for? </p>
      </div>
      <div class="footer">
        <h2 style="text-align: center;">Like Us</h2>
        <img src="https://media.giphy.com/media/krkrHAEodHgzP72rTI/giphy.gif" width="200px">
      </div>
    </div>
  </body>
</html>
Editor is loading...