Horje Website
CSS Responsive Web Design – House Design Template – CSS Code

CSS Responsive Web Design – House Design Template

CSS Responsive Web Design - House Design Template - CSS Code


 
  1. <!DOCTYPE html>
  2. <html>
  3. <title>W3.CSS Template</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <body class="w3-content" style="max-width:1200px">
  9. <div class="w3-panel">
  10. <i class="w3-xlarge fa fa-bars"></i>
  11. </div>
  12. <!-- First Grid: Logo & About -->
  13. <div class="w3-row">
  14. <div class="w3-half w3-container">
  15. <h1 class="w3-xxlarge w3-text-light-grey">Hello</h1>
  16. <h1 class="w3-xxlarge w3-text-grey">We are</h1>
  17. <h1 class="w3-jumbo">InShock</h1>
  18. </div>
  19. <div class="w3-half w3-container w3-xlarge w3-text-grey">
  20. <p class="">We build design teams
  21. - we break things down and build it better
  22. - we deliver the best of solutions</p>
  23. <p>InShock means powerfull simplicity</p>
  24. </div>
  25. </div>
  26. <!-- Second Grid: Resent -->
  27. <div class="w3-panel w3-text-grey">
  28. <h4>MOST RECENT WORK:</h4>
  29. </div>
  30. <div class="w3-row">
  31. <div class="w3-half w3-container">
  32. <img src="https://www.w3schools.com//w3images/house1.jpg" style="width:100%">
  33. </div>
  34. <div class="w3-half w3-container">
  35. <img src="https://www.w3schools.com//w3images/house_arch.jpg" style="width:100%">
  36. <p class="w3-xlarge w3-text-grey">
  37. Demos, Logos, Reports, Names, Events, Media, WordPress, Google, Books, Optimisations</p>
  38. </div>
  39. </div>
  40. <!-- Footer -->
  41. <div class="w3-row w3-section">
  42. <div class="w3-third w3-container w3-black w3-large" style="height:250px">
  43. <h2>Contact Info</h2>
  44. <p><i class="fa fa-map-marker" style="width:30px"></i> Chicago, US</p>
  45. <p><i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515</p>
  46. <p><i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]</p>
  47. </div>
  48. <div class="w3-third w3-center w3-large w3-dark-grey w3-text-white" style="height:250px">
  49. <h2>Contact Us</h2>
  50. <p>If you have an idea.</p>
  51. <p>What are you waiting for?</p>
  52. </div>
  53. <div class="w3-third w3-center w3-large w3-grey w3-text-white" style="height:250px">
  54. <h2>Like Us</h2>
  55. <i class="w3-xlarge fa fa-facebook-official"></i><br>
  56. <i class="w3-xlarge fa fa-pinterest-p"></i><br>
  57. <i class="w3-xlarge fa fa-twitter"></i><br>
  58. <i class="w3-xlarge fa fa-flickr"></i><br>
  59. <i class="w3-xlarge fa fa-linkedin"></i>
  60. </div>
  61. </div>
  62. <div class="w3-container w3-text-grey">
  63. <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  64. </div>
  65. </body>
  66. </html>



Try Your Self ->



Published:
 July 18, 2020
Author:
 admin
Category:
 CSS Responsive, CSS Source Code
Views:
 30

This article was posted in CSS Responsive, CSS Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023