Advertisement
tungSfer

header

Apr 28th, 2022
243
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.66 KB | None | 1 0
  1. <header class="header">
  2.         <div class="header-logo"><a href="index.html">LMS</a></div>
  3.         <nav class="header-nav">
  4.           <ul class="header-nav-list">
  5.             <li class="header-nav-item"><a href="index.html" class="header-nav-link header-nav-link-active">Trang chủ</a></li>
  6.             <li class="header-nav-item"><a href="time-table.html" class="header-nav-link">Thời khóa biểu</a></li>
  7.             <li class="header-nav-item"><a href="mark-search.html" class="header-nav-link">Tra cứu điểm</a></li>
  8.             <li class="header-nav-item"><a href="mark-statistics.html" class="header-nav-link">Bảng điểm</a></li>
  9.             <li class="header-nav-item"><a href="news.html" class="header-nav-link">Tin tức</a></li>
  10.             <li class="header-nav-item"><a href="about.html" class="header-nav-link">About us</a></li>
  11.           </ul>
  12.         </nav>
  13.       </header>
  14.  
  15. //// css
  16.  
  17. .header {
  18.   display: flex;
  19.   justify-content: space-between;
  20.   align-items: center;
  21.   height: 100px;
  22.   /* padding: 0 100px; */
  23.   background-color: white;
  24.   position: fixed;
  25.   left: 0;
  26.   right: 0;
  27.   top: 0;
  28.   width: 1180px;
  29.   margin: 0 auto;
  30. }
  31.  
  32. .header-logo {
  33.   display: flex;
  34.   justify-content: center;
  35.   align-items: center;
  36.   user-select: none;
  37. }
  38.  
  39. .header-logo a {
  40.   font-size: 60px;
  41. }
  42.  
  43. .header-nav ul {
  44.   display: flex;
  45.   justify-content: center;
  46.   align-items: center;
  47. }
  48.  
  49. .header-nav-link {
  50.   font-size: 14px;
  51.   margin: 0 20px;
  52.   font-weight: 600;
  53. }
  54.  
  55. .header-nav-item:hover .header-nav-link {
  56.   color: #01a2a6;
  57. }
  58.  
  59. .header-nav-link-active {
  60.   color: #01a2a6;
  61. }
  62.  
  63. .conten {
  64.   height: 300vh;
  65.   background-color: #01a2a6;
  66. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement