Advertisement
Guest User

Untitled

a guest
Aug 24th, 2022
11
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.38 KB | None | 0 0
  1. html,
  2. body {
  3. font-size: 16px;
  4. background: black;
  5. color: pink;
  6. font-family: 'Abel', sans-serif;
  7. margin: 0;
  8. }
  9.  
  10. /* Variables */
  11. :root {
  12. --dark-pink: rgba(242, 16, 133, 0.8);
  13. }
  14.  
  15.  
  16. .container {
  17. margin: auto;
  18. }
  19.  
  20. .main {
  21. height: 60rem;
  22. background: url('https://www.nme.com/wp-content/uploads/2022/08/BLACKPINK-pink-venom-single-music-video-album-Born-pink.jpg');
  23. background-size: cover;
  24. background-position: center;
  25. }
  26.  
  27. .main img {
  28. display: block;
  29. margin: auto;
  30. }
  31.  
  32. nav {
  33. background-color: pink;
  34. color: black;
  35. min-height: 10%;
  36. padding: 1rem 0 1rem 0;
  37. }
  38.  
  39. ul {
  40. list-style: none;
  41. margin: 0;
  42. text-align: center;
  43. }
  44.  
  45. li {
  46. display: inline-block;
  47. padding: 0 2rem 0 2rem;
  48. font-weight: bold;
  49. }
  50.  
  51. a {
  52. color: var(--dark-pink);
  53. text-decoration: none;
  54. }
  55.  
  56. nav h2 {
  57. font-family: 'Libre Baskerville', serif;
  58. border: 2px solid black;
  59. padding: 0.5rem;
  60. }
  61.  
  62. .description {
  63. padding: 2rem;
  64. }
  65.  
  66. .description h2 {
  67. font-family: 'Libre Baskerville', serif;
  68. text-align: center;
  69. }
  70.  
  71. .description p {
  72. min-width: 200px;
  73. max-width: 600px;
  74. margin: auto;
  75. }
  76.  
  77. .members {
  78. background-color: pink;
  79. color: var(--dark-pink);
  80. padding: 2rem;
  81. }
  82.  
  83. .members h2 {
  84. text-align: center;
  85. font-family: 'Libre Baskerville';
  86. color: black;
  87. }
  88.  
  89. .members h3 {
  90. text-align: center;
  91. }
  92.  
  93. .member-container {
  94. flex: 25%;
  95. padding: 0.5rem;
  96. justify-content: center;
  97. }
  98.  
  99. .member-container img {
  100. width: 20rem;
  101. }
  102.  
  103. .gallery {
  104. display: flex;
  105. }
  106.  
  107. .discography {
  108. background-color: black;
  109. width: 100%;
  110. margin: 2rem;
  111. padding: 4rem;
  112. }
  113.  
  114. .discography h2 {
  115. font-family: 'Libre Baskerville', serif;
  116. }
  117.  
  118. .discography img {
  119. display: inline-flex;
  120. height: 300px;
  121. width: auto;
  122. justify-content: center
  123. }
  124.  
  125. .youtube-button {
  126. background-color: pink;
  127. color: black;
  128. width: 30%;
  129. padding: 1rem;
  130. margin: auto;
  131. margin-bottom: 4rem;
  132. }
  133.  
  134. .youtube-button h3 {
  135. font-size: 2rem;
  136. text-align: center;
  137. }
  138.  
  139. footer {
  140. background-color: pink;
  141. color: var(--dark-pink);
  142. height: 5rem;
  143. text-align: center;
  144. padding-top: 2rem;
  145. }
  146.  
  147. /* Responsiveness */
  148. @media only screen and (max-width: 1000px) {
  149. .member-container img {
  150. width: 100%;
  151. }
  152. }
  153.  
  154. @media only screen and (max-width: 470px) {
  155. .gallery {
  156. margin: 2%;
  157. }
  158. .member-container img {
  159. width: 100%;
  160. }
  161. }
  162.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement