API tools faq
paste
Priyanshu_Gupta

Html Naavbar

Priyanshu_Gupta
Sep 30th, 2020
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Flexbox IN-DEPTH</title>
  5.     <link rel="stylesheet" href="style.css" />
  6.     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  7.   </head>
  8. <style>
  9. @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,700;0,900;1,100;1,900&display=swap');
  10.  
  11. *{
  12.     margin:0;
  13.     padding: 0;
  14.     box-sizing: border-box;
  15.     font-family: 'Lato', sans-serif;
  16. }
  17.  
  18. h1{
  19.     text-align: center;
  20.     text-transform: uppercase;
  21.     background: crimson;
  22.     color: wheat;
  23.     padding:20px;
  24. }
  25. /*
  26. .container{
  27.     background: #999;
  28.     padding: 40px;
  29.     display: flex;
  30.     flex-direction:row;
  31.     justify-content: space-between;
  32.     align-items: center;
  33. }
  34. .item{
  35.     margin:20px;
  36.     padding: 20px;
  37.     background: crimson;
  38.     color: wheat;
  39. }
  40. .i1{
  41.     align-self: flex-end;
  42.     order: 1;
  43.     flex-grow: 1;
  44. }
  45. .i3{
  46.     height: 250px;
  47.     font-size: 35px;
  48. }
  49. .i4{
  50.     align-self: flex-start;
  51.     order: 0;
  52. }
  53. .i5{
  54.     align-self: flex-end;
  55.     order: -1 ;
  56.   flex-basis: 200px ;
  57.  
  58. } */
  59.  
  60.  
  61.  
  62. /* .container{
  63.     background: coral;
  64.    
  65.     padding: 40px;
  66.     display: flex;
  67.     flex-direction:row;
  68.     justify-content: center;
  69.     align-items: center;
  70.     flex-wrap: wrap;
  71.     align-content: flex-end;
  72.  
  73. }
  74. .item{
  75.     background: cornsilk;
  76.     padding: 20px;
  77.     margin:20px;
  78.     color: #333;
  79. } */
  80. /* .i1{
  81.     height: 100px;
  82. } */
  83. /* .i1{
  84.   font-size: 30px;
  85.   order:1;
  86.   flex-basis: 350px;
  87.   flex-shrink: 0;
  88. }
  89. .i5{
  90.    align-self: center;
  91.    order:-1;
  92.    flex-grow: 1;
  93. }
  94. .i3{
  95.     flex-grow: 2;
  96.     flex-shrink: 0 ;
  97.    
  98. } */
  99. .navbar-main{
  100.     /* background: rgba(255, 255, 255,0.5); */
  101.     background-color: rgba(0,0,0,0.0);
  102.     box-shadow: 2px 5px 10px rgb(0, 0, 0,0.5);
  103.     display: flex;
  104.     justify-content: space-between;
  105.     align-items: center;
  106.     padding:15px 50px;
  107. }
  108. .logo{
  109.     font-size: 30px;
  110.     color: #1d3557;
  111. }
  112. .logo-text{
  113.     font-size: 30px;
  114.     margin-left: 10px;
  115. }
  116. .logo-side{
  117.    
  118. }
  119. .li-containers{
  120.     display: flex;
  121.     align-items: center;
  122. }
  123. .item {
  124.     padding: 10px;
  125.     text-transform: uppercase;
  126.     letter-spacing: 0.3px;
  127.     text-decoration: none;
  128.     color:  #457b9d;
  129.    
  130. }
  131. .item:hover{
  132.     cursor: pointer;
  133.     text-decoration: underline;
  134.     color:  #306180;
  135.     /* font-weight: 800; */
  136.     font-size: 15px;
  137.     box-shadow: 3px 5px 10px #457b9d;
  138.     border-radius: 5px;
  139.     padding-left: 10px;
  140. }
  141. .btn{
  142.     background: #457b9d;
  143.     color: #f1faee;
  144.     border-radius: 5px;
  145.     text-transform: uppercase;
  146.     margin-left:10px;
  147.     letter-spacing: 0.3px;
  148.  
  149. }
  150. .btn:hover{
  151.     cursor: pointer;
  152.     text-decoration: underline;
  153.     color:  #f1faee;
  154.     /* font-weight: 800; */
  155.     font-size: 20px;
  156.     box-shadow: 3px 5px 10px #457b9d;
  157.     border-radius: 5px;
  158. }
  159. .btn-outline{
  160.     color:  #457b9d;
  161.     border:1px solid#457b9d;
  162.     border-radius: 5px;
  163.     padding:9px;
  164. }
  165.  
  166. </style>
  167.   <body>
  168.       <!-- <h1>Understanding Flexbox - A modern Approach</h1> -->
  169.  
  170.    <!--We will be studying 2 different approach for making nav bars.-->
  171.  
  172.    <!--Approach 1-->
  173.    <!-- <div class="container">
  174.       <div class="item i1">~~LOGO~~</div>
  175.       <div class="item">Clients</div>
  176.       <div class="item i3">About Us</div>
  177.       <div class="item i4">Contact Us</div>
  178.       <div class="item">Clients</div>
  179.       <div class="item i3">About Us</div>
  180.       <div class="item i4">Contact Us</div>
  181.       <div class="item i5">Login</div> -->
  182.  
  183.    </div>
  184. <!--    
  185.   <div class="card">
  186.       <h1 class="card-head">Jane Doe</h1>
  187.   </div> -->
  188.  
  189.    <!--Approach II-->
  190.     <nav class="navbar-main">
  191.         <div  class="logo-side">
  192.             <i class="fas fa-server logo"></i> <span class="logo-text">iCompany</span>
  193.  
  194.         </div>
  195.         <div class="li-containers">
  196.                 <div ><a href="#" class="item">Home</a> </div>
  197.                 <div ><a href="#" class="item">Products</a> </div>
  198.                 <div ><a href="#" class="item">Services</a> </div>
  199.                 <div ><a href="#" class="item btn-outline">Login</a></div>
  200.  
  201.                 <div ><a href="#" class="item btn">Register</a> </div>
  202.  
  203.         </div>
  204.         <!-- <ul>
  205.            <li><a href="">Home</a></li>
  206.            <li><a>Home</a></li>
  207.            <li><a>Home</a></li>
  208.            <li><a>Home</a></li>
  209.        </ul> -->
  210.        
  211.        
  212.     </nav>
  213.   </body>
  214. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!