Advertisement
AceSomme

How to create a WebSite (in HTML and CSS) - STEP #2 PART #2

Jul 20th, 2019
137
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.44 KB | None | 0 0
  1. /* Lesson by AceSomme#1234 */
  2.  
  3. /* Welcome to the second part of the second lesson ! */
  4. /* This time, we are going to do CSS */
  5. /* So create a new file and rename your file "styles.css" */
  6. /* Subscribe to my YouTube channel for more tutorials ! https://direct-link.net/32476/mytc */
  7.  
  8. /* \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ */
  9. /* > Go follow the first part : https://direct-link.net/32476/1p2l < */
  10. /* /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ */
  11.  
  12. body{
  13.     font-family: 'Source code pro', Calibri, serif;
  14.     margin: 0px;
  15.     padding: 0px;
  16. }
  17.  
  18. nav{
  19.     width: 100%;
  20.     background-color: #424558;
  21. }
  22.  
  23. nav > ul{
  24.     margin: 0px;
  25.     padding: 0px;
  26. }
  27.  
  28. nav > ul::after{
  29.     content: "";
  30.     display: block;
  31.     clear: both;
  32. }
  33.  
  34. nav li{
  35.     list-style-type: none;
  36. }
  37.  
  38. nav > ul > li{
  39.     float: left;
  40.     position: relative;
  41. }
  42.  
  43. nav a{
  44.     display: inline-block;
  45.     text-decoration: none;
  46.     padding: 20px 30px;
  47.     color: #FFF;
  48. }
  49.  
  50. .menu-index:hover{
  51.     border-top: 5px solid #e44d26;
  52.     background-color: RGBa(228, 77, 38, 0.15);
  53. }
  54.  
  55. .menu-second:hover{
  56.     border-top: 5px solid #0070bb;
  57.     background-color: RGBa(000, 112, 192, 0.15);
  58. }
  59.  
  60. .menu-third:hover{
  61.     border-top: 5px solid #f1dc4f;
  62.     background-color: RGBa(241, 211, 79, 0.15);
  63. }
  64.  
  65. /* Made by AceSomme#1234 : https://www.youtube.com/channel/UC14X3SnN82Bh4_YbQ6nysvQ?view_as=subscriber */
  66.  
  67. .menu-fourth:hover{
  68.     border-top: 5px solid #BBB;
  69.     background-color: RGBa(220, 220, 220, 0.15);
  70. }
  71.  
  72. .menu-five:hover{
  73.     border-top: 5px solid #29a329;
  74.     background-color: rgb(51, 204, 51, 0.15);
  75. }
  76.  
  77. nav li:hover a{
  78.     padding: 15px 30px 20px 30px;
  79. }
  80.  
  81. .submenu{
  82.     display: none;
  83. }
  84.  
  85. nav li:hover .submenu{
  86.     display: inline-block;
  87.     position: absolute;
  88.     top: 100%;
  89.     left: 0px;
  90.     padding: 0px;
  91.     z-index: 1000;
  92. }
  93.  
  94. .submenu li{
  95.     border-bottom: 1px solid #CCC;
  96. }
  97.  
  98. .submenu li a{
  99.     padding: 15px 30px;
  100.     font-size: 13px;
  101.     color: #222538;
  102.     width: 270px;
  103. }
  104.  
  105. .menu-second .submenu{
  106.     background-color: RGBa(000, 112, 192, 0.25);
  107. }
  108.  
  109. .menu-third .submenu{
  110.     background-color: RGBa(241, 211, 79, 0.25)
  111. }
  112.  
  113. .submenu li:hover a{
  114.     color: #eee;
  115.     font-weight: bold;
  116. }
  117.  
  118. .menu-second .submenu li:hover{
  119.     background-color: RGB(000, 112, 192)
  120. }
  121.  
  122. .menu-third .submenu li:hover{
  123.     background-color: RGB(175, 175, 75)
  124. }
  125.  
  126. /* Lesson by AceSomme#1234 */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement