add project 1

GameOfCode64 · GameOfCode64 · commit 9e82d25c183c · 2024-06-20T13:30:37.000+05:30
diff --git a/project-1/bg-video.mp4 b/project-1/bg-video.mp4
diff --git a/project-1/index.html b/project-1/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Background video</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <section class="hero">
+      <video autoplay loop muted class="bg-video">
+        <source src="./bg-video.mp4" />
+      </video>
+
+      <section class="contact">
+        <h1>Explore the depth of sea !</h1>
+        <a href="">Explore Now</a>
+      </section>
+    </section>
+  </body>
+</html>
diff --git a/project-1/style.css b/project-1/style.css
@@ -0,0 +1,69 @@
+* {
+  margin: 0%;
+  padding: 0%;
+  font-family: sans-serif;
+}
+
+.hero {
+  width: 100%;
+  height: 100dvh;
+  background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
+  position: relative;
+  padding: 0% 5%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+  width: 100%;
+}
+.contact {
+  text-align: center;
+}
+.contact h1 {
+  font-size: 80px;
+  font: 600;
+  color: #fff;
+  margin-bottom: 25px;
+  transition: 0.7s;
+}
+.contact h1:hover {
+  color: transparent;
+  -webkit-text-stroke: 2px white;
+}
+
+.contact a {
+  text-decoration: none;
+  padding: 14px 25px;
+  background: #fff;
+  margin-top: 14px;
+  color: #000;
+  font-weight: 700;
+  font-size: 22px;
+  transition: 0.7s;
+}
+
+.contact a:hover {
+  background: transparent;
+  border: 1px solid white;
+  color: white;
+}
+
+@media (min-aspect-ratio: 16/9) {
+  .bg-video {
+    width: 100%;
+    height: auto;
+  }
+}
+@media (max-aspect-ratio: 16/9) {
+  .bg-video {
+    width: auto;
+    height: 100%;
+  }
+}
