style.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @charset "UTF-8";
  2. *{
  3. scroll-behavior: smooth;
  4. }
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. section{
  10. position:relative;
  11. width: 100%;
  12. height: 850px;
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. font-size: 5em;
  17. font-weight: 800;
  18. }
  19. section:nth-child(odd){
  20. background: #CBCCD6;
  21. }
  22. section:nth-child(even){
  23. background: #B4B8C5;
  24. }
  25. .first {
  26. padding: 0.5rem;
  27. display: flex;
  28. flex-direction: column;
  29. }
  30. .first p {
  31. font: small-caps bold 1rem sans-serif;
  32. text-align: center;
  33. }
  34. nav{
  35. position: fixed;
  36. top: 0;
  37. width: 100%;
  38. text-align: center;
  39. background: #84596B;
  40. }
  41. nav a{
  42. position: relative;
  43. color:#000000;
  44. text-decoration: none;
  45. padding: 8px 25px;
  46. font-size: 1.3em;
  47. text-transform: uppercase;
  48. display: inline-block;
  49. }
  50. nav a:hover,
  51. section#n1:hover~nav a[href="#n1"],
  52. section#n2:hover~nav a[href="#n2"],
  53. section#n3:hover~nav a[href="#n3"]
  54. {
  55. background: #8D818C;
  56. color: #FFD670;
  57. }
  58. nav a:active{
  59. background: #D1D1D1;
  60. }