diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..990f212 --- /dev/null +++ b/Readme.md @@ -0,0 +1 @@ +2LMSHOP diff --git a/img/background.png b/img/background.png new file mode 100644 index 0000000..7963e56 Binary files /dev/null and b/img/background.png differ diff --git a/img/button.png b/img/button.png new file mode 100644 index 0000000..a01ee79 Binary files /dev/null and b/img/button.png differ diff --git a/img/features/f1.png b/img/features/f1.png new file mode 100644 index 0000000..ea62a2a Binary files /dev/null and b/img/features/f1.png differ diff --git a/img/features/f2.png b/img/features/f2.png new file mode 100644 index 0000000..d1fb1d5 Binary files /dev/null and b/img/features/f2.png differ diff --git a/img/features/f3.png b/img/features/f3.png new file mode 100644 index 0000000..982df40 Binary files /dev/null and b/img/features/f3.png differ diff --git a/img/features/f4.png b/img/features/f4.png new file mode 100644 index 0000000..e25698b Binary files /dev/null and b/img/features/f4.png differ diff --git a/img/features/f5.png b/img/features/f5.png new file mode 100644 index 0000000..9f86b14 Binary files /dev/null and b/img/features/f5.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..2823c54 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f235ed --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + + 2LMSHOP + + + + + + +
+

Tade in Offer

+

Super value deals

+

On all products

+

Save more with coupons & up to 70% off!

+ + +
+ +
+
+ +
Free Shipping
+ +
+ +
+ +
Online Order
+ +
+ +
+ +
Save Money
+ +
+ +
+ +
Promotions
+ +
+ +
+ +
24/7 support
+ +
+ +
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ea1937a --- /dev/null +++ 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; + +}