Advertisement
SailorFini

CSS Section of Website

Aug 15th, 2018
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.52 KB | None | 0 0
  1. @import url('https://fonts.googleapis.com/css?family=Pacifico');
  2. @import url('https://fonts.googleapis.com/css?family=Oswald');
  3. @import url('https://fonts.googleapis.com/css?family=Nunito');
  4.  
  5. H1 {
  6.     font-family: 'MyWebFont', Pacifico;
  7.   color: #44caff;
  8.   text-align: center;
  9. }
  10. H2 {
  11.     font-family: 'MyWebFont', Oswald;
  12.   color: #ededed;
  13.   text-align: center;
  14. }
  15. H3 {
  16.     font-family: 'MyWebFont', Oswald;
  17.   color: #1c1c1c;
  18.   text-align: center;
  19. }
  20. H4 {
  21.     font-family: 'MyWebFont', Nunito;
  22.   color: #141414;
  23.   text-align: center;
  24. }
  25.  
  26. .tab {
  27.     overflow: hidden;
  28.     border: 5px solid #2d2d2d;
  29.     background-color: #f1f1f1;
  30. }
  31.  
  32. /* Style the buttons that are used to open the tab content */
  33. .tab button {
  34.     background-color: 51f0ff;
  35.     float: left;
  36.     border: none;
  37.     outline: none;
  38.     cursor: pointer;
  39.     padding: 14px 16px;
  40.     transition: 0.3s;
  41.   border-radius: 15px;
  42. }
  43.  
  44. /* Change background color of buttons on hover */
  45. .tab button:hover {
  46.     background-color: #3dbfcc;
  47. }
  48.  
  49. /* Create an active/current tablink class */
  50. .tab button.active {
  51.     background-color: #339ba5;
  52. }
  53.  
  54. /* Style the tab content */
  55. .tabcontent {
  56.     display: none;
  57.     padding: 12px 18px;
  58.     border: 5px solid #2d2d2d;
  59.     border-top: none;
  60. }
  61. body{
  62. background: linear-gradient( #303030, #3dd8ff);
  63.   font-family: "Oswald",
  64.     text-align: center;
  65. }
  66. .tabcontent {
  67.     animation: fadeEffect 1s;
  68. }
  69. /* Go from zero to full opacity */
  70. @keyframes fadeEffect {
  71.     from {opacity: 0;}
  72.     to {opacity: 1;}
  73. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement