Added artist page, FIXES #361 (#362)

* added artist page * Update index.html * Remove the duplicates. * update * Update index.html * Update styles.css * Update index.html --------- Co-authored-by: Kendall <kendalldoescoding@gmail.com>
KendallDoesCoding · Sep 29, 2023 · 30a0aa0 · 30a0aa0
1 parent 47d7d32
commit 30a0aa0
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 2 deletions.
diff --git a/artists/index.html b/artists/index.html
@@ -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>
+
diff --git a/artists/styles.css b/artists/styles.css
@@ -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;
+}
diff --git a/images/artists-imgs/1.jpg b/images/artists-imgs/1.jpg
diff --git a/images/artists-imgs/10.jpg b/images/artists-imgs/10.jpg
diff --git a/images/artists-imgs/2.webp b/images/artists-imgs/2.webp
diff --git a/images/artists-imgs/3.webp b/images/artists-imgs/3.webp
diff --git a/images/artists-imgs/4.jpg b/images/artists-imgs/4.jpg
diff --git a/images/artists-imgs/5.jpg b/images/artists-imgs/5.jpg
diff --git a/images/artists-imgs/6.jpg b/images/artists-imgs/6.jpg
diff --git a/images/artists-imgs/7.webp b/images/artists-imgs/7.webp
diff --git a/images/artists-imgs/8.jpg b/images/artists-imgs/8.jpg
diff --git a/images/artists-imgs/9.webp b/images/artists-imgs/9.webp
diff --git a/index.html b/index.html
@@ -426,9 +426,14 @@
       <a href="/you-may-like"
         >You May Also Like</a
       >
-      <a href="/news-articles" target="_blank"
+      <!-- <a href="/news-articles" target="_blank"
         >Articles</a
-      >
+      > -->
+
+      <a href="/artists" target="_blank"
+      >Christmas Artists</a>
+
+
       <a href="/ludsocials" >Ludwig Socials</a>
       <a href="/photo-gallery" >Photo Gallery</a>
       <a href="/rating"