Advertisement
Guest User

Untitled

a guest
Mar 25th, 2018
113
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. the html code:
  2.  
  3. <!Doctype html>
  4. <html lang="en">
  5.  
  6. <head>
  7. <title>My Css Website</title><link rel="stylesheet" href="firstwebsite.css">
  8. </head>
  9.  
  10. <body>
  11. <nav>
  12. <ul class="topnav" id="dropdownclick">
  13. <li><a href="#home">Home</a></li>
  14. <li><a href="#news">News</a></li>
  15. <li><a href="#contact">Contact</a></li>
  16. <li><a href="#about">About</a></li>
  17. <li class="topnav-right"><a href="#Signup">Sign up</a></li>
  18. <li class="topnav-right"><a href="#Signin">Sign in</a></li>
  19. <li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownmenu()">&#9776;</a></li>
  20. </ul>
  21. </nav>
  22.  
  23. <div class="container" id="section-1-gradient">
  24. <div class="row">
  25. <div class="col-6">
  26. <div class="leftside-col">
  27. <h1 class="Large">Crazy Radness</h1>
  28. <h1 class="Large">Made for Developers</h1>
  29. </div>
  30. <form>
  31. <div class="leftside-col">
  32. <h2>Username</h2>
  33. <input class="inputbox" name="Username"type="text" placeholder="Username">
  34. <h2>Password</h2>
  35. <input class="inputbox" name="Password"type="text" placeholder="Password">
  36. </div>
  37. </form>
  38. </div>
  39. <div class="col-6">
  40. <div class="rightside-col">
  41. <iframe width="560" height="315" src="https://www.youtube.com/embed/rYeSA1vgIUE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66. <script>
  67. function dropdownmenu() {
  68. var x = document.getElementById("dropdownclick");
  69. if (x.className === "topnav") {
  70. x.className += " responsive";
  71. /* change topnav to topnav.responsive*/
  72. } else {
  73. x.className = "topnav";
  74. }
  75. }
  76. </script>
  77.  
  78. </body>
  79.  
  80. </html>
  81.  
  82. the css code:
  83. /*##### Default #####*/
  84. nav,
  85. header,
  86. footer {
  87. display: block;
  88. }
  89.  
  90. body{
  91. line-height: 1;
  92. margin: 0;
  93. }
  94.  
  95. .container {
  96. width: 100%;
  97. margin: auto;
  98. padding-top: 4%;
  99. padding-bottom: 4%;
  100. }
  101.  
  102. .row {
  103. width: 100%;
  104. display: flex;
  105. flex-wrap: wrap;
  106. align-items: center;
  107. }
  108.  
  109. .row::after {
  110. display: table;
  111. clear: both;
  112. content: "";
  113. }
  114.  
  115. .col-1 {width: 8.33%;}
  116. .col-2 {width: 16.66%;}
  117. .col-3 {width: 25%;}
  118. .col-4 {width: 33.33%;}
  119. .col-5 {width: 41.66%;}
  120. .col-6 {width: 50%;}
  121. .col-7 {width: 58.33%;}
  122. .col-8 {width: 66.66%;}
  123. .col-9 {width: 75%;}
  124. .col-10 {width: 83.33%;}
  125. .col-11 {width: 91.66%;}
  126. .col-12 {width: 100%;}
  127.  
  128.  
  129.  
  130. /*##### Custom Style #####*/
  131.  
  132. #section-1-gradient {
  133. background: #076DFF; /* for browsers that do no support gradients */
  134. background: -webkit-linear-gradient(#076DFF, #65a5ff); /* for safari 5.11 to 6.0 */
  135. background: -o-linear-gradient(#076DFF, #65a5ff); /* for Opera 11.1 to 12.0 */
  136. background: -moz-linear-gradient(#076DFF, #65a5ff); /* for Firefox 3.6 to 15 */
  137. background: linear-gradient(#076DFF, #65a5ff); /* Standard Syntax */
  138. }
  139.  
  140. div.leftside-col {
  141. margin-left: 30%;
  142. }
  143.  
  144. div.rightside-col {
  145. margin-left: 15%;
  146. }
  147.  
  148. h1.Large {
  149. color: #fff;
  150. font-size: 56px;
  151. margin: 0;
  152. line-height: 70px;
  153. }
  154.  
  155. form h2 {
  156. color: white;
  157. }
  158.  
  159. input[type="text"]{
  160. font-size: 20px;
  161. width: 400px;
  162. min-width: 100px;
  163. padding: 5px;
  164. border-radius: 7px;
  165. }
  166.  
  167.  
  168. /*######### Nav Bar #####*/
  169.  
  170. nav {
  171. width: 100%;
  172. margin: 0;
  173. }
  174.  
  175. nav ul {
  176. background-color: #ccc;
  177. overflow: hidden;
  178. margin: 0;
  179. padding: 0;
  180. }
  181.  
  182. ul.topnav li {
  183. list-style: none;
  184. float: left;
  185. }
  186.  
  187. ul.topnav li.topnav-right {
  188. float: right;
  189. }
  190.  
  191. ul.topnav li a {
  192. display: block;
  193. text-decoration: none;
  194. min-height: 16px;
  195. text-align: center;
  196. padding: 14px;
  197. text-transform: uppercase;
  198. color: #666;
  199. }
  200.  
  201. ul.topnav li a:hover {
  202. background-color: #0000ff;
  203. color: white;
  204. }
  205.  
  206. ul.topnav li.dropdownIcon {
  207. display: none;
  208. }
  209.  
  210. /*##### Mobile ####*/
  211. @media screen and (max-width: 600px){
  212. ul.topnav li:not(:nth-child(1)){
  213. display: none;
  214. }
  215. ul.topnav li.dropdownIcon {
  216. display: block;
  217. float: right;
  218. }
  219.  
  220. ul.topnav.responsive li.dropdownIcon {
  221. position: absolute;
  222. top: 0;
  223. right: 0;
  224. }
  225.  
  226. ul.topnav.responsive {
  227. position: relative;
  228. }
  229. ul.topnav.responsive li {
  230. display: inline;
  231. float: none;
  232. }
  233.  
  234. ul.topnav.responsive li a {
  235. display: block;
  236. text-align: left;
  237. }
  238. }
  239.  
  240. .col-6{
  241. width: 100%;
  242. margin: 0;
  243. }
  244.  
  245. div.leftside-col,
  246. div.rightside-col {
  247. margin: 15px;
  248. }
  249.  
  250. input[type="text"] {
  251. width: 300px;
  252. }
Advertisement
RAW Paste Data Copied
Advertisement