Add files via upload

AlizayAyesha · May 30, 2024 · 04e099a · 04e099a
commit 04e099a
Show file tree

Hide file tree

Showing 5 changed files with 397 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!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="./styles.css"/>
+    <title>Qoutes SnapShots</title>
+</head>
+<body>
+   <nav>
+    <div class="logo-container">
+        <h1 class="logo"></h1>
+    </div>
+    <ul>
+        <li><a href="">HOME</a></li>
+        <li><a href="">ABOUT</a></li>
+        <li><a href="">GALLERY</a></li>
+        <li><a href="">CONTACT</a></li>
+    </ul>
+   </nav>
+<!--header/Hero-->
+<main>
+    <section class="content-container">
+        <h1>
+            Qoutes 
+        </h1>
+        <p class="info">
+           Share your Qoutes!!!
+        </p>
+        <button class="cta">learn more</button>
+    </section>
+</main>
+<section class="card">
+    <div class="card-content">
+        <h1>"Hell is empty, and all the devils are here."</h1>
+    <a href="#"> MORE </a>
+    <img src="https://img.freepik.com/premium-photo/purple-punk-cyber-human-skull-with-weapon-neural-network-ai-generated_76080-20063.jpg" alt="spooky" class=" first-image">
+    </div>
+</section>
+<section class="card">
+    <div class="card-content">
+        <h1>"Light the spark within you, and let it ignite the flames of your potential." </h1>
+
+    <a href="#"> MORE </a>
+    <img src="https://st5.depositphotos.com/1026649/63661/i/450/depositphotos_636612106-stock-photo-fantasy-forest-night-glowing-flowers.jpg" alt="forest" class="second-image">
+    </div>
+</section>
+<section class="qoute">
+    <h1 class="last">CHECK OUT SOME NEW QUOTES</h1>
+    <div class="qoute">
+      <div class="qoute-img">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfGzXxB4Kx-97L3ejO09stJiIm-twKTUEw0g&s" alt="qoute-img">
+      </div>
+      <div class="qoute-img">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsvDtpCOpTt7I9_yl6v1G_Xju5jQ-bjMeZ2g&s" alt="qoute-img">
+      </div>
+      <div class="qoute-img">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz1ga848LRN65Tg7lU6dojRZEVHX5ejMKlyg&s" alt="qoute-img">
+      </div>
+    </div>
+  </section>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,159 @@
+body {
+  background-color: #000;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+main {
+  background: url(https://wallpapers.com/images/hd/girly-skull-g1ifdl10crf2ogku.jpg);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+main h1 {
+  font-size: 10rem;
+  color: white;
+  font-style: italic;
+  font-weight: 400;
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+main p {
+  max-width: 600px;
+  margin: 10px;
+  color: white;
+  font-size: 4rem;
+  text-align: center;
+}
+main button {
+  border: none;
+  background-color: whitesmoke;
+  padding: 20px 30px;
+  cursor: pointer;
+  display: block;
+  margin: 20px auto 0;
+  text-align: center;
+}
+main button:hover {
+  background-color: blueviolet;
+  transition: background-color 0.3s ease-in-out;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  width: 100%;
+  background: rgb(155, 11, 250);
+}
+
+nav .logo-container {
+  margin-left: 40px;
+}
+
+nav ul {
+  margin-right: 40px;
+  list-style: none;
+  padding: 0;
+}
+
+nav li {
+  display: inline;
+  margin-left: 30px;
+}
+
+nav li a {
+  text-decoration: none;
+  background-color: whitesmoke;
+  padding: 10px 20px;
+  font-weight: 300;
+  color: #000;
+}
+
+nav li a:hover {
+  background-color: blueviolet;
+}
+
+.card {
+  height: 700px;
+  width: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgb(196, 169, 200);
+  padding: 40px;
+  line-height: 24px;
+  margin: 10rem;
+  position: relative;
+}
+.card.card-content {
+  width: 100%;
+  height: 100%;
+  padding: 80px;
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.card.card-content a {
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  text-align: center;
+  position: absolute;
+  top: -50px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.card.card-content .first-image {
+  width: 50%;
+  max-width: 100px;
+  height: auto;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(50, 7, 51, 0.3);
+  margin-top: 20px;
+}
+
+.qoute {
+  margin-top: 6rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.qoute-img {
+  width: 300px;
+  height: 200px;
+  margin: 20px;
+  box-sizing: border-box;
+  transition: transform 0.3s ease-in-out;
+}
+.qoute-img:hover {
+  transform: scale(1.1);
+  border-color: blueviolet;
+}
+.qoute-img img {
+  width: 300px; /* set a fixed width for all images */
+  height: 200px; /* set a fixed height for all images */
+}
+
+.card .card-content h1 {
+  color: blue;
+}
+
+.qoute .last {
+  color: white;
+}
+
+.card.card-content a {
+  color: black;
+}/*# sourceMappingURL=styles.css.map */
diff --git a/styles.css.map b/styles.css.map