Music album web page generator
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

102 line
1.6 KiB

  1. @font-face {
  2. font-family: "work-sans";
  3. src: url('../fonts/work-sans/WorkSans-Regular.otf');
  4. }
  5. :root{
  6. --footer-font-family : 'work-sans';
  7. --pretty-margin: 0.5rem;
  8. --main-color: red;
  9. --secondary-color: rgb(0,42,255);
  10. }
  11. *{
  12. margin: 0;
  13. padding: 0;
  14. }
  15. body{
  16. font-family: var(--footer-font-family);
  17. font-size: 2rem;
  18. letter-spacing: 0.1rem;
  19. }
  20. .point {
  21. margin: 0px var(--pretty-margin);
  22. }
  23. .pipe {
  24. margin: 0px calc(3 * var(--pretty-margin));
  25. }
  26. section{
  27. height: 100vh;
  28. }
  29. section h2 {
  30. font-size: 2rem;
  31. }
  32. section:nth-of-type(odd){
  33. background-color: white;
  34. color: var(--secondary-color);
  35. }
  36. section:nth-of-type(even){
  37. background-color: var(--secondary-color);
  38. color: white;
  39. }
  40. section.cover{
  41. background : url(../images/cover.png) no-repeat center center;
  42. background-color: var(--main-color);
  43. }
  44. section.albums{
  45. background-color: black;
  46. color:white;
  47. display: flex;
  48. flex-direction: column;
  49. justify-content: center;
  50. line-height: 200%;
  51. }
  52. section.albums > * {
  53. padding-left: 10vw;
  54. }
  55. section.albums h2 {
  56. padding-left: 20vw;
  57. font-weight: normal;
  58. }
  59. section.albums ul {
  60. list-style-type: none;
  61. }
  62. section.contact{
  63. display : flex;
  64. flex-direction: column;
  65. justify-content: center;
  66. align-items: center;
  67. position :relative;
  68. background : url(../images/contact.png) no-repeat center center;
  69. background-color: var(--secondary-color);
  70. color:white;
  71. }
  72. footer{
  73. font-size: 0.92rem;
  74. position: absolute;
  75. width: 100%;
  76. bottom: 0;
  77. text-align: center;
  78. }
  79. .hidden{
  80. display: none;
  81. }