1337WebDev · MohamedKartit · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/README.md → mkartit/README.md b/README.md → mkartit/README.md
diff --git a/mkartit/index.html b/mkartit/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="./style.css" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+ <title>The Matrics World</title>
+</head>
+
+<body>
+ <video autoplay muted loop id="myVideo">
+ <source src="./src/video.mp4" type="video/mp4">
+ </video>
+ <nav class="nav-bar">
+ <!-- <img src="src/logo.gif" alt="The Matrics World"> -->
+ <h1>The Matrics has you...</h1>
+ <div class="nav-menu">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
+ <div class="nav-res">
+ <i class="fa-solid fa-bars burger"></i>
+ <ul class="links-btn">
+ <i id="triangle" class="fa-solid fa-caret-up"></i>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
+ <button type="submit" class="btn">Login</button>
+ </nav>
+ <!-- <hr> -->
+ <section class="description">
+ <h1 class="hero-title">Welcome to The Matrix</h1>
+ <p class="lines">
+ Bingo. It is a pickle. No doubt about it. The bad news is there's no way if you can really know whether I'm
+ here to help you or not, so it's really up to you. You just have to make up you on damned mind to either
+ accept what I'm going to tell you, or reject it.”
+ <span class="author">- The Oracle</span>
+ </p>
+ </section>
+ <section class="character">
+ <div class="card-neo">
+ <img src="./src/neo.jpg" alt="Neo">
+ <h2>Neo</h2>
+ <p>Neo is the protagonist of The Matrix franchise. A computer hacker who learns from mysterious rebels about
+ the true nature of his reality and his role in the war against its controllers.
+ </p>
+ </div>
+ <div class="card-morpheus">
+ <img src="./src/morpheus.jpg" alt="Morpheus">
+ <h2>Morpheus</h2>
+ <p>Morpheus is a computer programmer and a leader of the rebel forces. He is a mentor to Neo, offering him
+ guidance and wisdom as he learns about the Matrix and his role in the war against the machines.
+ </p>
+ </div>
+ <div class="card-trinity">
+ <img src="./src/trinity.jpg" alt="Trinity">
+ <h2>Trinity</h2>
+ <p>Trinity is a skilled hacker and fighter who is a member of the rebel forces. She is a close ally and
+ romantic interest of Neo, and plays a key role in the fight against the machines.
+ </p>
+ </section>
+ <section class="form">
+ <form>
+ <h2>Subscribe to our newsletter</h2>
+ <input type="text" placeholder="Enter your name">
+ <input type="email" placeholder="Enter your email">
+ <input id="message" type="text" placeholder="Message">
+ <button type="submit" class="btn">Subscribe</button>
+ </form>
+ </section>
+ <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/mkartit/main.js b/mkartit/main.js
@@ -0,0 +1,5 @@
+const burger = document.querySelector('.burger');
+burger.addEventListener('click', () => {
+ var links_btn = document.querySelector('.links-btn');
+ links_btn.classList.toggle('show-btn');
+});
diff --git a/mkartit/src/EaO4ew-3682941141.gif b/mkartit/src/EaO4ew-3682941141.gif
diff --git a/mkartit/src/logo.gif b/mkartit/src/logo.gif
diff --git a/mkartit/src/morpheus.jpg b/mkartit/src/morpheus.jpg
diff --git a/mkartit/src/neo.jpg b/mkartit/src/neo.jpg
diff --git a/mkartit/src/trinity.jpg b/mkartit/src/trinity.jpg
diff --git a/mkartit/src/video.mp4 b/mkartit/src/video.mp4
diff --git a/mkartit/style.css b/mkartit/style.css
@@ -0,0 +1,273 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ /* border: white 2px solid; */
+}
+
+body {
+ font-weight: bold;
+ color: white;
+ font-size: 20px;
+
+}
+
+video {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -1;
+}
+
+.nav-bar {
+ background-color: black;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 20px 20px;
+ /* width: 100vw; */
+ position: sticky;
+}
+
+.nav-menu {
+ height: 100%;
+ width: 33.33%;
+}
+
+nav ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ /* gap: 20%; */
+}
+
+nav li {
+ list-style: none;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+}
+
+nav h1 {
+ color: white;
+ text-align: center;
+ text-shadow: 3px 3px 3px rgb(17, 211, 255);
+}
+
+nav img {
+ width: 300px;
+}
+
+nav button {
+ background-color: rgb(17, 211, 255);
+ color: white;
+ font-size: 20px;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.description {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+}
+
+.description h1 {
+ margin-top: 300px;
+ margin-bottom: 50px;
+ font-size: 100px;
+ color: white;
+ text-shadow: 3px 3px 3px rgb(17, 211, 255);
+ text-align: center;
+}
+
+.description p {
+ text-align: center;
+ width: 70%;
+ font-size: 30px;
+}
+
+.description p span {
+ font-size: 1.5em;
+ color: rgb(17, 211, 255);
+ text-shadow: 3px 3px 3px white;
+ display: block;
+
+}
+
+.nav-res {
+ display: none;
+ position: relative;
+}
+
+#triangle {
+ position: absolute;
+ top: -18px;
+ color: white;
+ right: 0;
+ font-size: 30px;
+ color: rgba(255, 255, 255, 0.2);
+}
+
+.links-btn {
+ display: none;
+ width: 150px;
+ list-style: none;
+ padding: 10px;
+ position: absolute;
+ right: 20px;
+ margin-top: 10px;
+ background: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border-radius: 4px;
+ text-align: right;
+}
+
+.links-btn li {
+ margin: 5px 0;
+}
+
+.links-btn li a {
+ font-family: Arial, Helvetica, sans-serif;
+ color: rgb(255, 255, 255);
+}
+
+.show-btn {
+ display: flex;
+ flex-direction: column;
+}
+
+.character {
+ margin-top: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 20px;
+}
+
+.character img {
+ height: 90%;
+ width: 90%;
+ border-radius: 5%;
+}
+
+.character h2 {
+ color: white;
+ text-align: center;
+ text-shadow: 3px 3px 3px rgb(17, 211, 255);
+ font-size: 3em;
+ margin: 10px;
+}
+
+.character p {
+ text-align: center;
+ width: 90%;
+}
+
+.character div {
+ margin: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 30%;
+ /* border: 1px solid white; */
+ background-color: black;
+ border-radius: 5%;
+ opacity: 0.8;
+}
+
+.character div:hover {
+ opacity: 1;
+ /* width: 35%; */
+ transition: 0.5s;
+}
+
+.form {
+ background-color: black;
+ opacity: 0.8;
+}
+
+form h2 {
+ color: white;
+ text-align: center;
+ text-shadow: 3px 3px 3px rgb(17, 211, 255);
+ font-size: 3em;
+ margin: 10px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+}
+
+form input {
+ width: 50%;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
+ border: none;
+}
+
+form button {
+ background-color: rgb(17, 211, 255);
+ color: white;
+ font-size: 20px;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+form #message {
+ height: 10rem;
+ text-align: center;
+
+}
+
+@media (max-width: 900px) {
+
+ .nav-bar {
+ justify-content: flex-end;
+ }
+
+ .nav-menu {
+ display: none;
+ }
+
+ .nav-res {
+ display: block;
+ }
+
+ .burger {
+ color: white;
+ font-size: 50px;
+ cursor: pointer;
+ }
+
+ .nav-bar button {
+ margin: 0 20px;
+ }
+
+ .nav-bar h1 {
+ margin-right: auto;
+ }
+
+ .character div {
+ width: 90%;
+ }
+}