EnigmaVSSUT · mbharati7 · Apr 2, 2025 · Apr 2, 2025 · Apr 2, 2025 · Apr 2, 2025
diff --git a/Domain/Web Development/Task/Bharati/assets/css/style.css b/Domain/Web Development/Task/Bharati/assets/css/style.css
@@ -0,0 +1,153 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f9f9f9;
+}
+
+header {
+  background-color: #4a90e2;
+  color: #fff;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header .logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+header nav a {
+  color: #fff;
+  text-decoration: none;
+  margin: 0 1rem;
+  font-size: 1rem;
+}
+
+header nav a:hover {
+  text-decoration: underline;
+}
+
+.hero {
+  background: linear-gradient(to right, #4a90e2, #50c9c3);
+  color: #fff;
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.hero .search-bar {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.hero .search-bar input {
+  padding: 0.5rem;
+  font-size: 1rem;
+  width: 300px;
+  border: none;
+  border-radius: 5px;
+}
+
+.hero .search-bar button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.hero .search-bar button:hover {
+  background-color: #555;
+}
+
+section h2 {
+  text-align: center;
+  margin: 2rem 0;
+  font-size: 2rem;
+  color: #4a90e2;
+}
+
+.book-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.book-item {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.book-item:hover {
+  transform: translateY(-5px);
+}
+
+.book-item img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+.book-item h3 {
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  color: #333;
+}
+
+.book-item p {
+  font-size: 0.9rem;
+  color: #666;
+  padding: 0 1rem 1rem;
+}
+
+#about {
+  background-color: #f0f0f0;
+  padding: 2rem;
+  text-align: center;
+  color: #333;
+}
+
+footer {
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 1rem;
+}
+
+footer a {
+  color: #4a90e2;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
diff --git a/Domain/Web Development/Task/Bharati/assets/images/1984_first_edition_cover.jpg b/Domain/Web Development/Task/Bharati/assets/images/1984_first_edition_cover.jpg
diff --git a/...ask/Bharati/assets/images/800px-To_Kill_a_Mockingbird_(first_edition_cover).jpg b/...ask/Bharati/assets/images/800px-To_Kill_a_Mockingbird_(first_edition_cover).jpg
diff --git a/...eb Development/Task/Bharati/assets/images/81CvDTTlxDL._AC_UF1000,1000_QL80_.jpg b/...eb Development/Task/Bharati/assets/images/81CvDTTlxDL._AC_UF1000,1000_QL80_.jpg
diff --git a/Domain/Web Development/Task/Bharati/assets/images/Educated_(Tara_Westover).png b/Domain/Web Development/Task/Bharati/assets/images/Educated_(Tara_Westover).png
diff --git a/Domain/Web Development/Task/Bharati/assets/images/Goodnightmoon.jpg b/Domain/Web Development/Task/Bharati/assets/images/Goodnightmoon.jpg
diff --git a/Domain/Web Development/Task/Bharati/assets/images/HungryCaterpillar.jpeg b/Domain/Web Development/Task/Bharati/assets/images/HungryCaterpillar.jpeg
diff --git a/.../Web Development/Task/Bharati/assets/images/SapiensABriefHistoryofHumankind.jpg b/.../Web Development/Task/Bharati/assets/images/SapiensABriefHistoryofHumankind.jpg
diff --git a/...evelopment/Task/Bharati/assets/images/The_Great_Gatsby_Cover_1925_Retouched.jpg b/...evelopment/Task/Bharati/assets/images/The_Great_Gatsby_Cover_1925_Retouched.jpg
diff --git a/...velopment/Task/Bharati/assets/images/Where_The_Wild_Things_Are_(book)_cover.jpg b/...velopment/Task/Bharati/assets/images/Where_The_Wild_Things_Are_(book)_cover.jpg
diff --git a/Domain/Web Development/Task/Bharati/index.html b/Domain/Web Development/Task/Bharati/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Book Selling Website</title>
+    <link rel="stylesheet" href="assets/css/style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="logo"><strong>Book Hub</strong></div>
+      <nav>
+        <a href="#fiction">Fiction</a>
+        <a href="#non-fiction">Non-Fiction</a>
+        <a href="#children">Children</a>
+        <a href="#about">About Us</a>
+        <a href="#contact">Contact</a>
+      </nav>
+    </header>
+
+    <section class="hero">
+      <h1>Welcome to BookHub</h1>
+      <p>Your one-stop destination for all book lovers!</p>
+      <div class="search-bar">
+        <input type="text" placeholder="Search for books..." />
+        <button>Search</button>
+      </div>
+    </section>
+
+    <section id="fiction">
+      <h2>Fiction Books</h2>
+      <div class="book-list">
+        <div class="book-item">
+          <img
+            src="assets/images/The_Great_Gatsby_Cover_1925_Retouched.jpg"
+            alt="Fiction Book 1"
+          />
+          <h3>The Great Gatsby</h3>
+          <p>A classic novel of the Jazz Age.</p>
+        </div>
+        <div class="book-item">
+          <img
+            src="assets/images/1984_first_edition_cover.jpg"
+            alt="Fiction Book 2"
+          />
+          <h3>1984</h3>
+          <p>A dystopian novel set in a totalitarian society.</p>
+        </div>
+        <div class="book-item">
+          <img
+            src="assets/images/800px-To_Kill_a_Mockingbird_(first_edition_cover).jpg"
+            alt="Fiction Book 3"
+          />
+          <h3>To Kill a Mockingbird</h3>
+          <p>A novel about the serious issues of race and injustice.</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="non-fiction">
+      <h2>Non-Fiction Books</h2>
+      <div class="book-list">
+        <div class="book-item">
+          <img
+            src="assets/images/SapiensABriefHistoryofHumankind.jpg"
+            alt="Non-Fiction Book 1"
+          />
+          <h3>Sapiens: A Brief History of Humankind</h3>
+          <p>An exploration of the history and impact of Homo sapiens.</p>
+        </div>
+        <div class="book-item">
+          <img
+            src="assets/images/Educated_(Tara_Westover).png"
+            alt="Non-Fiction Book 2"
+          />
+          <h3>Educated</h3>
+          <p>A memoir about a woman's quest for knowledge.</p>
+        </div>
+        <div class="book-item">
+          <img
+            src="assets/images/81CvDTTlxDL._AC_UF1000,1000_QL80_.jpg"
+            alt="Non-Fiction Book 3"
+          />
+          <h3>The Immortal Life of Henrietta Lacks</h3>
+          <p>The story of a woman whose cells changed medical research.</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="children">
+      <h2>Children's Books</h2>
+      <div class="book-list">
+        <div class="book-item">
+          <img
+            src="assets/images/Where_The_Wild_Things_Are_(book)_cover.jpg"
+            alt="Children's Book 1"
+          />
+          <h3>Where the Wild Things Are</h3>
+          <p>A story about imagination and adventure.</p>
+        </div>
+        <div class="book-item">
+          <img
+            src="assets/images/HungryCaterpillar.jpeg"
+            alt="Children's Book 2"
+          />
+          <h3>The Very Hungry Caterpillar</h3>
+          <p>A classic tale of a caterpillar's transformation.</p>
+        </div>
+        <div class="book-item">
+          <img src="assets/images/Goodnightmoon.jpg" alt="Children's Book 3" />
+          <h3>Goodnight Moon</h3>
+          <p>A bedtime story that has delighted generations.</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="about">
+      <h2>About Us</h2>
+      <p>
+        BookHub is dedicated to providing a wide selection of books for
+        readers of all ages. We believe in the power of stories to inspire,
+        educate, and entertain.
+      </p>
+    </section>
+
+    <footer id="contact">
+      <p>
+        Contact us at <a href="mailto:info@bookHub.com">info@bookHub.com</a>
+      </p>
+      <p>&copy; 2025 Book Haven. All rights reserved.</p>
+    </footer>
+  </body>
+</html>
diff --git a/Domain/Web Development/Task/Bharati/link.txt b/Domain/Web Development/Task/Bharati/link.txt
@@ -0,0 +1 @@
+ https://mbharati7.github.io/webDevtask/