itzabhitri
diff --git a/‎93. The Art/index.html‎
Lines changed: 154 additions & 0 deletions b/‎93. The Art/index.html‎
Lines changed: 154 additions & 0 deletions
diff --git a/‎93. The Art/style.css‎
Lines changed: 186 additions & 0 deletions b/‎93. The Art/style.css‎
Lines changed: 186 additions & 0 deletions
@@ -0,0 +1,154 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>theArt</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!-- Navbar -->
+    <nav>
+      <ul>
+        <li><a href="">HuXn</a></li>
+      </ul>
+
+      <div class="burger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </nav>
+    <!-- End Navbar -->
+
+    <header>
+      <h1 class="main-headings">
+       
E758
 WHAT <br />
+        IS CALLED ART?
+      </h1>
+      <p class="primary-headings">
+        Art, also called (to distinguish it from other art forms) visual art, a
+        <span class="bg-gray"> visual object or experience </span> consciously
+        created through an expression of skill or imagination.
+      </p>
+    </header>
+
+    <main>
+      <img
+        src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=745&q=80"
+        class="img"
+      />
+      <img
+        src="https://images.unsplash.com/flagged/photo-1572392640988-ba48d1a74457?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
+        class="img"
+      />
+      <img
+        src="https://images.unsplash.com/photo-1588571590924-433cc2020a12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
+        class="img"
+      />
+      <img
+        src="https://images.unsplash.com/photo-1495462911434-be47104d70fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
+        class="img"
+      />
+      <img
+        src="https://images.unsplash.com/photo-1579783901586-d88db74b4fe4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=748&q=80"
+        class="img"
+      />
+      <img
+        src="https://images.unsplash.com/photo-1579783901837-c78c2310be05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=804&q=80"
+        class="img"
+      />
+    </main>
+
+    <section class="section-three">
+      <h1 class="main-headings">7 TYPES OF ART</h1>
+      <p class="primary-headings">
+        The seven different art forms are
+        <span class="bg-gray">
+          Painting, Sculpture, Literature, Architecture, Theater, Film, and
+          Music
+        </span>
+        . However, back in the day, the seven different art forms were called
+        the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic,
+        Geometry, Astronomy, and Music.
+      </p>
+
+      <div class="list">
+        <div class="item">
+          <h1>PAINTING</h1>
+          <img
+            src="https://images.unsplash.com/photo-1579965342575-16428a7c8881?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=762&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>SCULPTURE</h1>
+          <img
+            src="https://images.unsplash.com/photo-1637666505754-7416ebd70cbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>LITERATURE</h1>
+          <img
+            src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>ARCHITECTURE</h1>
+          <img
+            src="https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2020&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>CINEMA</h1>
+          <img
+            src="https://images.unsplash.com/photo-1604975701397-6365ccbd028a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>MUSIC</h1>
+          <img
+            src="https://images.unsplash.com/photo-1598547535077-26d10ae80496?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=781&q=80"
+          />
+        </div>
+        <div class="item">
+          <h1>THEATER</h1>
+          <img
+            src="https://images.unsplash.com/photo-1578920568769-3c1b145bc9ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
+          />
+        </div>
+      </div>
+    </section>
+
+    <footer>
+      <div class="logo-container">
+        <h1>Logo</h1>
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s.
+        </p>
+      </div>
+
+      <div class="about-company">
+        <div class="container">
+          <h1>About</h1>
+          <p>News & Blog</p>
+          <p>Features</p>
+          <p>About Us</p>
+        </div>
+        <div class="container">
+          <h1>Company</h1>
+          <p>How We Work?</p>
+          <p>Capital</p>
+          <p>Security</p>
+        </div>
+        <div class="container">
+          <h1>Support</h1>
+          <p>FAQs</p>
+          <p>Support</p>
+          <p>Contact Us</p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
@@ -0,0 +1,186 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Fonts */
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap");
+
+/* Basic */
+body {
+  background-color: #ebeae9;
+}
+
+html {
+  font-family: "Open Sans", sans-serif;
+}
+
+nav {
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
+  padding: 20px;
+  margin-bottom: 5rem;
+}
+
+nav ul {
+  margin-left: 5rem;
+  list-style: none;
+}
+
+li a {
+  text-decoration: none;
+  color: #000;
+}
+
+nav .burger {
+  margin-right: 5rem;
+  cursor: pointer;
+}
+
+nav .burger span {
+  height: 4px;
+  border: 2px solid black;
+  margin: 4px;
+  background: #000;
+}
+
+header {
+  margin: 6rem;
+}
+
+.main-headings {
+  width: 50%;
+  font-size: 3rem;
+}
+
+.primary-headings {
+  width: 50%;
+  margin-top: 3rem;
+  font-size: 1.5rem;
+  line-height: 30px;
+}
+
+.bg-gray {
+  background: rgb(53, 53, 53);
+  color: #fff;
+  padding: 2px 10px;
+  font-weight: bold;
+}
+/* Header End */
+
+/* Main Start */
+main {
+  margin: 0 4rem;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 40px;
+}
+
+main .img {
+  width: 50%;
+}
+
+/* SECTION THREE START */
+.section-three {
+  margin-left: 5rem;
+}
+
+.section-three .primary-headings {
+  margin-bottom: 10rem;
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.section-three .item h1 {
+  font-size: 2rem;
+  color: rgb(53, 53, 53);
+  margin-left: 1rem;
+}
+
+.section-three img {
+  width: 400px;
+  height: 500px;
+  margin: 50px;
+}
+/* SECTION THREE END */
+
+/* FOOTER START */
+footer {
+  background: var(--primary-color);
+  margin-top: 10rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  height: 100vh;
+  color: #fff;
+}
+
+footer .logo-container h1 {
+  font-size: 4rem;
+  font-family: var(--main-font);
+  margin-bottom: 20px;
+}
+
+footer .logo-container p {
+  max-width: 400px;
+  font-family: sans-serif;
+  line-height: 25px;
+}
+
+footer .about-company {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+footer .about-company .container {
+  margin-right: 40px;
+  margin-top: 20px;
+}
+
+.about-company .container h1 {
+  margin-bottom: 50px;
+}
+
+.about-company .container p {
+  font-family: sans-serif;
+  margin-bottom: 20px;
+}
+
+footer {
+  height: 100vh;
+  background: rgb(43, 43, 43);
+}
+
+@media screen and (max-width: 740px) {
+  header .main-headings {
+    width: 100%;
+  }
+  header .primary-headings {
+    width: 100%;
+    font-size: 1.5rem;
+  }
+
+  .section-three .main-headings {
+    width: 100%;
+  }
+  .section-three .primary-headings {
+    width: 100%;
+    font-size: 1.5rem;
+  }
+
+  .section-three img {
+    margin: 0;
+  }
+}