Merge branch 'main'

belyne · Nov 27, 2023 · 031f93e · 031f93e
2 parents 4f3301a + aa5719d
commit 031f93e
Show file tree

Hide file tree

Showing 11 changed files with 293 additions and 0 deletions.
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1 @@
+2LMSHOP
diff --git a/img/background.png b/img/background.png
diff --git a/img/button.png b/img/button.png
diff --git a/img/features/f1.png b/img/features/f1.png
diff --git a/img/features/f2.png b/img/features/f2.png
diff --git a/img/features/f3.png b/img/features/f3.png
diff --git a/img/features/f4.png b/img/features/f4.png
diff --git a/img/features/f5.png b/img/features/f5.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<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>2LMSHOP</title>
+    <script src="https://kit.fontawesome.com/274c052308.js"></script>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <section id="header">
+    <a href="#"><img src="img/logo.png" class="logo"></a>
+
+    <div>
+      <ul id="navbar">
+        <li><a class="active" href="home.html">Home</a></li>
+        <li><a href="shop.html">Shop</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="contact.html">Contact</a></li>
+        <li><a href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a></li>
+
+      </ul>
+    </div>
+  </section>
+
+  <section id="hero">
+    <h1>Tade in Offer</h1>
+    <h2>Super value deals</h2>
+    <h4>On all products</h4>
+    <p>Save more with coupons & up to 70% off!</p>
+    <button>Shop Now</button>
+
+  </section>
+
+  <section id="feature" class="section-p1">
+    <div class="fe-box">
+      <img src="img/features/f1.png" alt="">
+      <h6>Free Shipping</h6>
+
+    </div>
+
+    <div class="fe-box">
+      <img src="img/features/f2.png" alt="">
+      <h6>Online Order</h6>
+
+    </div>
+
+    <div class="fe-box">
+      <img src="img/features/f3.png" alt="">
+      <h6>Save Money</h6>
+
+    </div>
+
+    <div class="fe-box">
+      <img src="img/features/f4.png" alt="">
+      <h6>Promotions</h6>
+
+    </div>
+
+    <div class="fe-box">
+      <img src="img/features/f5.png" alt="">
+      <h6>24/7 support</h6>
+
+    </div>
+
+  </section>
+
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,220 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'spartan', sans-serif;
+}
+
+h1 {
+  font-size: 20px;
+  line-height: 64px;
+  color: #000;
+}
+
+h2 {
+  font-size: 50px;
+  line-height: 54px;
+  color:#000;
+}
+
+h4 {
+  font-size: 50px;
+  color: #026548;
+
+}
+
+h6 {
+  font-weight: 700;
+  font-size: 12px;
+}
+
+p {
+  font-size: 25px;
+  color: #000;
+  margin: 15px 0 20px 0;
+
+}
+
+.section-p1 {
+  padding: 40px 0;
+}
+
+body {
+  width: 100%;
+}
+
+.logo {
+  width: 10%;
+  height: 10%;
+}
+
+/* Header start */
+
+#header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #e3e3e3;
+  padding: 20px 80px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
+  z-index: 999;
+  position:sticky;
+  top: 0;
+  left: 0;
+
+}
+
+#navbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+#navbar li {
+  list-style: none;
+  padding: 0 20px;
+  position: relative;
+
+}
+
+#navbar li a {
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  transition: 0.3s;
+}
+
+#navbar li a:hover,
+#navbar li a.active {
+  color: #4665b4;
+
+}
+
+#navbar li  a.active::after,
+#navbar li a:hover::after {
+  content: '';
+  width: 30% ;
+  height: 2px;
+  background: #4665b4;
+  position: absolute;
+  bottom: -4px;
+  left: 20px;
+
+}
+
+/* home Page */
+
+#hero {
+  background-image: url("img/background.png");
+  height: 90vh;
+  width: 100%;
+  background-size: cover;
+  background-position: top 25% right 0;
+  padding: 0 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+#hero h4 {
+  padding-bottom: 15px;
+}
+
+#hero h1 {
+  color: #026548;
+
+}
+
+#hero button {
+  background-image: url("img/button.png");
+  background-color: transparent;
+  color: #026548;
+  border: 0;
+  padding: 14px 80px 14px 65px;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  font-weight: 700;
+  font-size: 15px;
+
+}
+
+#feature {
+  display: flex;
+  align-items:center;
+  justify-content: space-between;
+  flex-wrap:wrap;
+}
+
+.section-p1 .fe-box img {
+  width: 120px;
+  height: 150px;
+  object-fit: cover;
+}
+
+#feature .fe-box {
+  width: 150px;
+  text-align: center;
+  padding: 25px 15px;
+  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
+  border: 1px solid #cce7d0;
+  border-radius: 4px;
+  margin: 15px 0;
+
+}
+
+#feature .fe-box:hover {
+  box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.01);
+}
+
+#feature .fe-box img {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+#feature .fe-box h6 {
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color: #4665b4;
+  background-color: #fddde4;
+
+}
+
+#feature .fe-box:nth-child(2) h6{
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color: #4665b4;
+  background-color: #a1d9eb;
+
+}
+
+#feature .fe-box:nth-child(3) h6{
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color: #4665b4;
+  background-color: #c7f9cc;
+
+}
+
+#feature .fe-box:nth-child(4) h6{
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color: #4665b4;
+  background-color: #fdffb6;
+
+}
+
+#feature .fe-box:nth-child(5) h6{
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color: #4665b4;
+  background-color: #e1e5f2;
+
+}