W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS House Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="w3-grid"
style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">

<div class="w3-container">
    <h1 class="w3-xxlarge w3-text-light-grey">Hello</h1>
    <h1 class="w3-xxlarge w3-text-grey">We are</h1>
    <h1 class="w3-jumbo">InShock</h1>
  </div>

<div class="w3-container w3-xlarge w3-text-grey">
    <p>We build design teams - we break things down and build it better - we deliver the best of solutions.</p>
    <p>InShock means powerful simplicity.</p>
  </div>

</div>

<div class="w3-panel w3-text-grey">
  <h4>MOST RECENT WORK:</h4>
</div>

<p class="w3-xlarge w3-text-grey">
    Demos, Logos, Reports, Names, Events, Media,
    WordPress, Google, Books, Optimisations
    </p>
  </div>

</div>

<footer class="w3-grid w3-section"
style="grid-template-columns:repeat(auto-fit,minmax(250px,1fr))">

<h2>Contact Info</h2>

<p>
      <i class="fa fa-map-marker" style="width:30px"></i>
      Chicago, US
    </p>

<p>
      <i class="fa fa-phone" style="width:30px"></i>
      Phone: +00 151515
    </p>

<p>
      <i class="fa fa-envelope" style="width:30px"></i>
      Email: mail@mail.com
    </p>

</div>

<h2>Contact Us</h2>

<p>If you have an idea.</p>
    <p>What are you waiting for?</p>

</div>

</div>

</footer>

<div class="w3-container w3-text-grey">
  <p>
  Powered by
  <a href="https://www.w3schools.com/w3css/default.asp"
  target="_blank">w3.css</a>
  </p>
</div>

</body>
</html>