new

rockandrollcanada · Dec 11, 2023 · ce5224f · ce5224f
commit ce5224f
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 0 deletions.
diff --git a/css/my.css b/css/my.css
@@ -0,0 +1,46 @@
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+header {
+  position: relative;
+  height: 60vh;
+  background: #333;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+header iframe {
+  width: 80%;
+  height: 80%;
+}
+
+section {
+  padding: 20px;
+}
+
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.video-item {
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+}
+
+.video-item iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/my.css">
+  <title>Rock Records</title>
+
+</head>
+<body>
+
+  <!-- Hero Section with YouTube Video -->
+  <header>
+    <!-- Replace 'YOUR_YOUTUBE_VIDEO_ID' with the actual video ID -->
+    <iframe src="https://www.youtube.com/embed/0hLESLXqBLI?si=ergTk-buoEuY16MI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+  </header>
+
+  <!-- Video Grid Section -->
+  <section>
+    <h2>More Videos</h2>
+    <div class="video-grid">
+      <!-- Replace 'VIDEO_ID_1', 'VIDEO_ID_2', etc., with your actual video IDs -->
+      <div class="video-item">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/ibq2J3hDwR0?si=bRP3rAomJwY7Hx3h" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+      </div>
+      <div class="video-item">
+        <iframe
+          src="https://www.youtube.com/embed/S22ZwmDBx6M"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+          allowfullscreen
+        ></iframe>
+      </div>
+      <div class="video-item">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/0hLESLXqBLI?si=GD5UIMoSXPS1bt_B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+      </div>
+      <div class="video-item">
+        <iframe
+          src="https://www.youtube.com/embed/4ryKUOjCgds"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+          allowfullscreen
+        ></iframe>
+      </div>
+      <div class="video-item">
+        <iframe
+          src="https://www.youtube.com/embed/VIDEO_ID_1"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+          allowfullscreen
+        ></iframe>
+      </div>
+      <div class="video-item">
+        <iframe
+          src="https://www.youtube.com/embed/VIDEO_ID_2"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+          allowfullscreen
+        ></iframe>
+      </div>
+      <!-- Add more video items as needed -->
+    </div>
+  </section>
+
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/0hLESLXqBLI?si=ergTk-buoEuY16MI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+
+
+</body>
+</html>