daily pastebin goal
14%
SHARE
TWEET

Untitled

a guest Mar 25th, 2018 89 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. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top