Advertisement
DSARRAZY

Responsivons !

Mar 4th, 2020
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.32 KB | None | 0 0
  1. **HTML**
  2.  
  3. !DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Find the precious!</title>
  9. <link rel="stylesheet" href="style.css">
  10. </head>
  11. <body>
  12. <nav>
  13. <ul>
  14. <li>FindThePrecious.com</li>
  15. <li>Fellows</li>
  16. <li>Contact us</li>
  17. </ul>
  18. </nav>
  19. <section>
  20. <div class="carousel"></div>
  21. </section>
  22. <section id="fellows">
  23. <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  24. </section>
  25. <section id="article">
  26. <article></article>
  27. <article></article>
  28. <article></article>
  29. </section>
  30. <form>
  31. <h2>Contact us</h2>
  32. <input type="email" placeholder="@">
  33. <input type="text" placeholder="&#8962;">
  34. <input type="text" placeholder="I have seen one of them">
  35. <textarea placeholder="Your message"></textarea>
  36. </form>
  37. </body>
  38. </html>
  39.  
  40. ------------------------------------------------------------------
  41. **css**
  42.  
  43. *{
  44. color: #575757;
  45. }
  46. nav {
  47. background-color: #333130;
  48. height: 25px;
  49. margin-top: -16px;
  50.  
  51. }
  52. ul{
  53. padding-top: 1px;
  54. }
  55. li {
  56. display: inline;
  57. padding: 15px;
  58. color: white;
  59. }
  60.  
  61. li:hover{
  62. background-color: #DEDEDE;
  63. color: black;
  64.  
  65. }
  66.  
  67. .carousel{
  68. box-sizing: content-box;
  69. width: 100%;
  70. height: 200px;
  71. background-color: #DEDEDE;
  72. }
  73.  
  74. section h2{
  75. text-align: center;
  76. }
  77.  
  78. article{
  79. display: inline-block;
  80. width: 31%;
  81. height: 300px;
  82. margin: 0px 10px 0px 10px;
  83. background-color: #DEDEDE;
  84. }
  85.  
  86. form{
  87. text-align: center;
  88. }
  89.  
  90. form h2{
  91. border-top: 2px solid #575757;
  92. text-align: left;
  93. }
  94.  
  95. input{
  96. position: relative;
  97. left: 50%;
  98. transform: translate(-50%, -50%);
  99. display: block;
  100. margin-bottom: 5px;
  101. width: 90%;
  102. height: 10px;
  103. }
  104.  
  105. textarea{
  106. width: 90%;
  107. height: 100px;
  108. }
  109.  
  110. @media (max-width: 960px){
  111. .carousel{
  112. display: none;
  113. }
  114. #article{
  115. display: none;
  116. }
  117. section h2{
  118. font-size: 200%
  119. }
  120. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement