Horje Website
CSS Responsive Web Design – Screen 5050 Template – CSS Code

CSS Responsive Web Design – Screen 5050 Template

CSS Responsive Web Design - Screen 50/50 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. <body class="w3-content" style="max-width:1300px">
  8. <!-- First Grid: Logo & About -->
  9. <div class="w3-row">
  10. <div class="w3-half w3-black w3-container w3-center" style="height:700px">
  11. <div class="w3-padding-64">
  12. <h1>My Logo</h1>
  13. </div>
  14. <div class="w3-padding-64">
  15. <a href="#" class="w3-button w3-black w3-block w3-hover-blue-grey w3-padding-16">Home</a>
  16. <a href="#work" class="w3-button w3-black w3-block w3-hover-teal w3-padding-16">My Work</a>
  17. <a href="#work" class="w3-button w3-black w3-block w3-hover-dark-grey w3-padding-16">Resume</a>
  18. <a href="#contact" class="w3-button w3-black w3-block w3-hover-brown w3-padding-16">Contact</a>
  19. </div>
  20. </div>
  21. <div class="w3-half w3-blue-grey w3-container" style="height:700px">
  22. <div class="w3-padding-64 w3-center">
  23. <h1>About Me</h1>
  24. <img src="https://www.w3schools.com//w3images/avatar3.png" class="w3-margin w3-circle" alt="Person" style="width:50%">
  25. <div class="w3-left-align w3-padding-large">
  26. <p>Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  27. <p>Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. <!-- Second Grid: Work & Resume -->
  33. <div class="w3-row">
  34. <div class="w3-half w3-light-grey w3-center" style="min-height:800px" id="work">
  35. <div class="w3-padding-64">
  36. <h2>My Work</h2>
  37. <p>Some of my latest projects.</p>
  38. </div>
  39. <div class="w3-row">
  40. <div class="w3-half">
  41. <img src="https://www.w3schools.com//w3images/coffee.jpg" style="width:100%">
  42. </div>
  43. <div class="w3-half">
  44. <img src="https://www.w3schools.com//w3images/workbench.jpg" style="width:100%">
  45. </div>
  46. </div>
  47. <div class="w3-row w3-hide-small">
  48. <div class="w3-half">
  49. <img src="https://www.w3schools.com//w3images/workbench.jpg" style="width:100%">
  50. </div>
  51. <div class="w3-half">
  52. <img src="https://www.w3schools.com//w3images/coffee.jpg" style="width:100%">
  53. </div>
  54. </div>
  55. <div class="w3-row w3-hide-small">
  56. <div class="w3-half">
  57. <img src="https://www.w3schools.com//w3images/sound.jpg" style="width:100%">
  58. </div>
  59. <div class="w3-half">
  60. <img src="https://www.w3schools.com//w3images/workbench.jpg" style="width:100%">
  61. </div>
  62. </div><br>
  63. <p>Just call me awesome.</p>
  64. </div>
  65. <div class="w3-half w3-indigo w3-container" style="min-height:800px">
  66. <div class="w3-padding-64 w3-center">
  67. <h2>Resume</h2>
  68. <p>A draft from my CV</p>
  69. <div class="w3-container w3-responsive">
  70. <table class="w3-table">
  71. <tr>
  72. <th>Year</th>
  73. <th>Title</th>
  74. <th>Where</th>
  75. </tr>
  76. <tr class="w3-white">
  77. <td>2012-2016</td>
  78. <td>The rest is history..</td>
  79. <td>Lorem ipsum</td>
  80. </tr>
  81. <tr>
  82. <td>2009-2012</td>
  83. <td>Started my own company</td>
  84. <td>My Garage</td>
  85. </tr>
  86. <tr class="w3-white">
  87. <td>2008-2009</td>
  88. <td>Started working for Lorem</td>
  89. <td>London, UK</td>
  90. </tr>
  91. <tr>
  92. <td>2005-2008</td>
  93. <td>Degree in Bachelor of Design</td>
  94. <td>Harvard, USA</td>
  95. </tr>
  96. <tr class="w3-white">
  97. <td>2002-2005</td>
  98. <td>Degree in Bachelor of Business</td>
  99. <td>RMIT University, Melbourne, Australia</td>
  100. </tr>
  101. <tr class="w3-hide-medium">
  102. <td>2002-2005</td>
  103. <td>Degree in Bachelor of Business</td>
  104. <td>RMIT University, Melbourne, Australia</td>
  105. </tr>
  106. </table>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <!-- Third Grid: Swing By & Contact -->
  112. <div class="w3-row" id="contact">
  113. <div class="w3-half w3-dark-grey w3-container w3-center" style="height:700px">
  114. <div class="w3-padding-64">
  115. <h1>Swing By</h1>
  116. </div>
  117. <div class="w3-padding-64">
  118. <p>..for a cup of coffee, or whatever.</p>
  119. <p>Chicago, US</p>
  120. <p>+00 1515151515</p>
  121. <p>[email protected]</p>
  122. </div>
  123. </div>
  124. <div class="w3-half w3-teal w3-container" style="height:700px">
  125. <div class="w3-padding-64 w3-padding-large">
  126. <h1>Contact</h1>
  127. <p class="w3-opacity">GET IN TOUCH</p>
  128. <form class="w3-container w3-card w3-padding-32 w3-white" action="/action_page.php" target="_blank">
  129. <div class="w3-section">
  130. <label>Name</label>
  131. <input class="w3-input" style="width:100%;" type="text" required name="Name">
  132. </div>
  133. <div class="w3-section">
  134. <label>Email</label>
  135. <input class="w3-input" style="width:100%;" type="text" required name="Email">
  136. </div>
  137. <div class="w3-section">
  138. <label>Message</label>
  139. <input class="w3-input" style="width:100%;" type="text" required name="Message">
  140. </div>
  141. <button type="submit" class="w3-button w3-teal w3-right">Send</button>
  142. </form>
  143. </div>
  144. </div>
  145. </div>
  146. <!-- Footer -->
  147. <footer class="w3-container w3-black w3-padding-16">
  148. <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  149. </footer>
  150. </body>
  151. </html>



Try Your Self ->



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

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 - 2022