Added artist page, FIXES #361 #362
There are no files selected for viewing
|
There was a problem hiding this comment. How will mobile users find info on the artists (They can't hover over right?) There was a problem hiding this comment. Duplicate of artists on last line: There was a problem hiding this comment. The hover sometimes isn't smooth. Please have a look. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Artists - A Very Mogul Christmas!</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <link rel="stylesheet" href="/styles.css"> | ||
| <link href="favicon.ico" rel="icon" type="image/x-icon"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <a href="../index.html"> | ||
| <svg width="40" height="40" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <!-- Your SVG code for the arrow here --> | ||
| </svg> | ||
| </a> | ||
| <h1>Celebrated Musicians of the Holiday Season</h1> | ||
| </header> | ||
| <div class="grid-container"> | ||
| <!-- Artist Card 1 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/1.jpg" alt="Bing Crosby"> | ||
| <div class="artist-name">Bing Crosby</div> | ||
| <div class="artist-description"> | ||
| Known as the "King of Christmas," Bing Crosby is an iconic crooner who recorded the classic song "White Christmas," which remains a holiday favorite. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 2 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/2.webp" alt="Mariah Carey"> | ||
| <div class="artist-name">Mariah Carey</div> | ||
| <div class="artist-description"> | ||
| Mariah Carey's hit song "All I Want for Christmas Is You" has become a modern-day classic and is one of the most streamed songs during the holiday season. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 3 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/3.webp" alt="Michael Bublé"> | ||
| <div class="artist-name">Michael Bublé</div> | ||
| <div class="artist-description"> | ||
| Michael Bublé is a contemporary crooner who has released several successful Christmas albums, including "Christmas" and "Noël." | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 4 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/4.jpg" alt="Johnny Mathis"> | ||
| <div class="artist-name">Johnny Mathis</div> | ||
| <div class="artist-description"> | ||
| Johnny Mathis is a legendary crooner who has recorded many holiday classics, including "It's Beginning to Look a Lot Like Christmas" and "Sleigh Ride." | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 5 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/5.jpg" alt="Nat King Cole"> | ||
| <div class="artist-name">Nat King Cole</div> | ||
| <div class="artist-description"> | ||
| Nat King Cole's warm and smooth voice is perfect for Christmas music, and his version of "The Christmas Song (Chestnuts Roasting on an Open Fire)" is a holiday staple. | ||
| </div> | ||
| </div> | ||
| <!-- Artist Card 6 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/6.jpg" alt="Trans-Siberian Orchestra"> | ||
| <div class="artist-name">Trans-Siberian Orchestra</div> | ||
| <div class="artist-description"> | ||
| The Trans-Siberian Orchestra is a progressive rock band known for their elaborate Christmas-themed concerts and their hit song "Christmas Eve/Sarajevo 12/24." | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 7 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/7.webp" alt="Pentatonix"> | ||
| <div class="artist-name">Pentatonix</div> | ||
| <div class="artist-description"> | ||
| Pentatonix is a popular a cappella group that has released several Christmas albums and is known for their unique arrangements of classic holiday songs. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 8 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/8.jpg" alt="Frank Sinatra"> | ||
| <div class="artist-name">Frank Sinatra</div> | ||
| <div class="artist-description"> | ||
| Frank Sinatra's jazzy renditions of holiday classics like "Have Yourself a Merry Little Christmas" and "Jingle Bells" have become timeless holiday favorites. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 9 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/9.webp" alt="Elvis Presley"> | ||
| <div class="artist-name">Elvis Presley</div> | ||
| <div class="artist-description"> | ||
| Elvis Presley's rockabilly sound brought a new energy to holiday music with hits like "Blue Christmas" and "Santa Claus Is Back in Town." | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Artist Card 10 --> | ||
| <div class="artist-card"> | ||
| <img src="../images/artists-imgs/10.jpg" alt="Andy Williams"> | ||
| <div class="artist-name">Andy Williams</div> | ||
| <div class="artist-description"> | ||
| Andy Williams recorded many holiday classics, including "It's the Most Wonderful Time of the Year" and "The Christmas Song," and his annual Christmas television specials became a holiday tradition. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script type="text/javascript" src="../you-may-like/darkmode.js"></script> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap"); | ||
| @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,100;1,300&display=swap"); | ||
|
|
||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| header { | ||
| background-color: #496C42; | ||
| color: white; | ||
| padding: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| header a { | ||
| text-decoration: none; | ||
| color: white; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .grid-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | ||
| gap: 20px; | ||
| padding: 20px; | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .artist-card { | ||
| background-color: white; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | ||
| text-align: center; | ||
| transition: transform 0.3s; | ||
| } | ||
|
|
||
| .artist-card:hover { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .artist-card img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .artist-name { | ||
| margin-top: 10px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .artist-description { | ||
| font-size: 14px; | ||
| color: #666; | ||
| } | ||
|
|
||
| #grid-container { | ||
| max-width: 90vw; | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| /* Adjust the number of columns as needed */ | ||
| gap: 20px; | ||
| /* Adjust the gap between cards */ | ||
| } | ||
|
|
||
| .column { | ||
| flex: 1; | ||
| max-width: 30%; | ||
| } | ||
|
|
||
| .card { | ||
| position: relative; | ||
| cursor: pointer; | ||
| transition: transform 0.3s; | ||
| overflow: hidden; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .card:hover { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .card img { | ||
| width: 100%; | ||
| height: auto; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .card::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: rgba(0, 0, 0, 0.7); | ||
| opacity: 0; | ||
| transition: opacity 0.3s; | ||
| } | ||
|
|
||
| .card:hover::before { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .card-text { | ||
| position: absolute; | ||
| bottom: 20px; | ||
| left: 20px; | ||
| right: 20px; | ||
| color: white; | ||
| font-size: 18px; | ||
| font-family: "Handlee", sans-serif; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| h2 { | ||
| color: #A81817; | ||
| font-family: "Nunito", sans-serif; | ||
| margin-top: 5%; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: orange; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not mobile responsive:
