diff --git a/about.html b/about.html index f4a338b..da57a8d 100644 --- a/about.html +++ b/about.html @@ -8,10 +8,145 @@ Tech2etc Ecommerce Tutorial + + + + +
+

#KnowUs

+

Lorem ipsum dolor sit amet,consectetur

+
+ +
+ +
+

Who We Are?

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus ipsum facere modi sapiente amet! Rem esse eum nobis. Adipisci perferendis aut perspiciatis repudiandae at quibusdam fuga recusandae temporibus ipsum reiciendis mollitia alias totam nemo nam expedita architecto maxime, vero voluptas rerum praesentium. Veritatis porro, ipsa reiciendis, quis, tenetur veniam neque iste sequi cum at a enim consectetur recusandae placeat repudiandae minima deleniti voluptates cumque tempora tempore saepe vero sed nulla!

+ + Create stunning images with as much or little control as you like thanks to a choice of Basic and and Creative modes. + +

+ + Creat stunning images with as much or as little control as you like thanks to a choice of Basic and Creative modes +
+
+ +
+

Download Our App

+
+ + +
+
+ +
+
+ +
Free Shipping
+
+
+ +
Online Order
+
+
+ +
Save Money
+
+
+ +
Promotions
+
+
+ +
Happy Sell
+
+
+ +
24/7 Support
+
+
+ +
+
+

Sign Up for Newsletters

+

Get E-mail updates about our latest shop and special offers.

+
+
+ + +
+
+ + + diff --git a/blog.html b/blog.html index f4a338b..c077d7b 100644 --- a/blog.html +++ b/blog.html @@ -8,10 +8,166 @@ Tech2etc Ecommerce Tutorial + + + + +
+

#readmore

+

Read all case studies about our products!

+ +
+ +
+
+
+ +
+
+

the Cotton-Jersey Zip-Up Hoodie

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yrwolf chartreuse hextagon irony, rodard...

+ CONTINUE READING +
+

08/01

+
+ +
+
+ +
+
+

How to style a quiff

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yrwolf chartreuse hextagon irony, rodard...

+ CONTINUE READING +
+

06/01

+
+ +
+
+ +
+
+

Must-Have Skater Girl Items

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yrwolf chartreuse hextagon irony, rodard...

+ CONTINUE READING +
+

04/01

+
+ +
+
+ +
+
+

Runway-Inspired Trends

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yrwolf chartreuse hextagon irony, godard...

+ CONTINUE READING +
+

03/01

+
+ +
+
+ +
+
+

AW20 Menswer Trends

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yrwolf chartreuse hextagon irony, godard...

+ CONTINUE READING +
+

01/01

+
+ +
+ + + +
+ 1 + 2 + +
+ +
+
+

Sign Up for Newsletters

+

Get E-mail updates about our latest shop and special offers.

+
+
+ + +
+
+ + + diff --git a/cart.html b/cart.html index eb5659c..865fc0b 100644 --- a/cart.html +++ b/cart.html @@ -5,18 +5,163 @@ - Document - + Tech2etc Ecommerce Tutorial + + + + +
+

#let's_talk

+

LEAVE A MESSAGE, WE Love to hear from you!

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RemoveImageProductPriceQuantitySubtotal
Cartoon Astronaut T-shirts$118.19$118.19
Cartoon Astronaut T-shirts$118.19$118.19
Cartoon Astronaut T-shirts$118.19$118.19
+
+ +
+
+

Apply Coupon

+
+ + +
+ +
+

Cart Totals

+ + + + + + + + + + + + + +
Cart Subtotal$ 335
ShippingFree
Total$ 335
+ +
+
+
+ + + + \ No newline at end of file diff --git a/contact.html b/contact.html index eb5659c..0dd20e4 100644 --- a/contact.html +++ b/contact.html @@ -5,18 +5,173 @@ - Document - + Tech2etc Ecommerce Tutorial + + + + +
+

#let's_talk

+

LEAVE A MESSAGE, WE Love to hear from you!

+
+ +
+
+ GET IN TOUCH +

Visit one of our agency locations or contact us today

+

Head office

+
+
  • + +

    56 Glassford Street Glasgow G1 1UL Hisar

    +
    • +
    + +
    +
  • + +

    56 Glassford Street Glasgow G1 1UL Hisar

    +
    • +
    + +
    +
  • + +

    56 Glassford Street Glasgow G1 1UL Hisar

    +
    • +
    + +
    +
  • + +

    56 Glassford Street Glasgow G1 1UL Hisar

    +
    • +
    +
    + +
    + +
    + +
    + +
    +
    + LEAVE A MESSAGE +

    We love to hear from you

    + + + + + +
    + +
    +
    + +

    John DoeSenior Marketing Manager
    Phone: +91 9478129314
    Email: contact@example.com

    +
    + +
    + +

    Willian SmithSenior Marketing Manager
    Phone: +91 9478129314
    Email: contact@example.com

    +
    + +
    + +

    Emma StoneSenior Marketing Manager
    Phone: +91 9478129314
    Email: contact@example.com

    +
    + +
    +
    + +
    +
    +

    Sign Up for Newsletters

    +

    Get E-mail updates about our latest shop and special offers.

    +
    +
    + + +
    +
    + + + + \ No newline at end of file diff --git a/index.html b/index.html index 7c355ef..7960850 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,466 @@ + + + + + Tech2etc Ecommerce Tutorial + + + + - - - - - Tech2etc Ecommerce Tutorial - + + - - +
    +

    Tread-in-offer

    +

    Super value deals

    +

    On all product

    +

    Save more with coupons & up to 70% off!

    + +
    - +
    +
    + +
    Free Shipping
    +
    +
    + +
    Online Order
    +
    +
    + +
    Save Money
    +
    +
    + +
    Promotions
    +
    +
    + +
    Happy Sell
    +
    +
    + +
    24/7 Support
    +
    +
    +
    +

    featured Products

    +

    Summer Collection New Morden Design

    +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    - - +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    - \ No newline at end of file +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    +
    +
    + + + +
    +

    New Arrivals

    +

    Summer Collection New Morden Design

    +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    +
    +
    + +
    + + +
    + +
    + + + + + +
    + +
    +
    +

    Sign Up for Newsletters

    +

    + Get E-mail updates about our latest shop and + special offers. +

    +
    +
    + + +
    +
    + + + + + + diff --git a/shop.html b/shop.html index f4a338b..7d1bf41 100644 --- a/shop.html +++ b/shop.html @@ -8,10 +8,381 @@ Tech2etc Ecommerce Tutorial + + + + +
    +

    #Stayhome

    +

    Save more with coupons & up to 70% off!

    + +
    + +
    + +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    +
    + +
    + 1 + 2 + +
    + +
    +
    +

    Sign Up for Newsletters

    +

    Get E-mail updates about our latest shop and special offers.

    +
    +
    + + +
    +
    + + + diff --git a/sproduct.html b/sproduct.html index 6a7b3a8..7e7560d 100644 --- a/sproduct.html +++ b/sproduct.html @@ -8,14 +8,222 @@ Tech2etc Ecommerce Tutorial + + + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    Home / T-Shirt
    +

    Men's Fashion T Shirt

    +

    $139.00

    + + + +

    Product Details

    + The Gilden Ultra Cotton T-Shirt is Made from a substantial 6.0 oz. per sq. yd. fabric constructed from 100% cotton, this classic fit preshrunk jersey knit provides unmatched comfort with each wear. Featuring a taped neck and shoulder, and a seamless double-needle collar, and available in a range of color, it offers it all in the ultimate head-turing package. +
    + +
    + +
    +

    Feature Products

    +

    Summer Collection New Morden Design

    +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    +
    + +
    +
    +

    Sign Up for Newsletters

    +

    Get E-mail updates about our latest shop and special offers.

    +
    +
    + + +
    +
    + + + + diff --git a/style.css b/style.css index 356bf0a..3f8f7c1 100644 --- a/style.css +++ b/style.css @@ -48,6 +48,960 @@ p { margin: 40px 0; } +button.normal{ + font-size: 14px; + font-weight: 600; + padding: 15px 30px; + color:#000; + background-color: #fff; + border-radius: 4px; + cursor:pointer; + border:none; + outline:none; + transition: 0.2s; +} + +button.white{ + font-size: 13px; + font-weight: 600; + padding: 11px 18px; + color:#fff; + background-color:transparent; + cursor:pointer; + border:1px solid #fff; + outline:none; + transition: 0.2s; +} + + body { width: 100%; } + + +/* Header start */ + +#header{ + display:flex; + align-items:center; + justify-content:space-between; + padding: 20px 80px; + background: #E3E6F3; + 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.3 ease; + +} + +#navbar li a:hover, +#navbar li a.active{ + color:#088178; +} + +#navbar li a.active::after, +#navbar li a:hover::after{ + content: ""; + width:30%; + height:2px; + background: #088178; + position:absolute; + bottom: -4px; + left:20px; +} + + +/* Home Page */ + +#hero{ + background-image: url("img/hero4.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: #088178; +} +#hero button{ + background-image: url(img/button.png); + background-color: transparent; + color: #088178; + border: 0; + padding: 14px 80px 14px 65px; + background-repeat: no-repeat; + cursor:pointer; + font-weight: 700; + font-size: 15px; +} + +#feature{ + display: flex; + align-items: center; + justify-content:space-between; + flex-wrap: wrap; + +} + +#feature .fe-box{ + width:180px; + 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(10,62,221,0.1); + +} + +#feature .fe-box img{ + width:100%; + margin-bottom: 10px; +} + +#feature .fe-box h6{ + display: inline-block; + padding: 9px 8px 6px 8px; + line-height: 1; + border-radius: 4px; + color: #088178; + background-color: #fddde4; +} + +#feature .fe-box:nth-child(2) h6{ + background-color: #cdebbc; +} + +#feature .fe-box:nth-child(3) h6{ + background-color: #d1e8f2; +} + +#feature .fe-box:nth-child(4) h6{ + background-color: #f6bdf6; +} + +#feature .fe-box:nth-child(5) h6{ + background-color: #f6dbf6; +} + +#feature .fe-box:nth-child(6) h6{ + background-color: #fff2e5; +} + +#product1{ + text-align: center; +} + +#product1 .pro-container{ + display: flex; + justify-content: space-between; + padding-top: 20px; + flex-wrap: wrap; + +} + +#product1 .pro{ + width: 23%; + min-width: 250px; + padding: 10px 12px; + border: 1px solid #cce7d0; + border-radius: 25px; + cursor: pointer; + box-shadow: 20px 20px 30px rgba(0,0,0,0.02); + margin: 15px 0; + transition: 0.2s ease; + position: relative; + +} + +#product1 .pro:hover{ + box-shadow: 20px 20px 30px rgba(0,0,0,0.06); +} + +#product1 .pro img{ + width: 100%; + border-radius: 20px; +} + +#product1 .pro .des{ + text-align: start; + padding: 10px 0; +} + +#product1 .pro .des span{ + color: #606060; + font-size: 12px; +} + +#product .pro .dex h5 { + padding-top: 7px; + color: #1a1a1a; + font-size: 14px; +} + +#product1 .pro .des i{ + font-size: 12px; + color: rgb(234,181,25); + +} + +#product .pro .des h4{ + padding-top: 7px; + font-size: 15px; + font-weight: 700; + color: #088178; +} +#product1 .pro .cart{ + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 50px; + background-color: #e8f6ea; + font-weight: 500; + color:#088178; + border: 1px solid #cce7d0; + position: absolute; + bottom: 20px; + right: 10px; + +} + +#banner{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-image: url("img/banner/b2.jpg"); + width: 100%; + height: 40vh; + background-size: cover; + background-position: center; + +} + +#banner h4{ + color:#fff; + font-size: 16px; + +} + +#banner h2{ + color:#fff; + font-size: 30px; + padding:10px 0 ; +} + +#banner h2 span{ + color:#ef3636; +} + +#banner button:hover{ + background: #088178; + color:#fff; +} + +#sm-banner{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + +} + +#sm-banner .banner-box{ + display:flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: center; + background-image: url("img/banner/b17.jpg"); + min-width: 580px; + height: 50vh; + background-size: cover; + background-position: center; + padding: 30px; +} + +#sm-banner .banner-box2{ + background-image: url("img/banner/b10.jpg"); +} + +#sm-banner h4{ + color:#fff; + font-size: 20px; + font-weight: 300; +} +#sm-banner h2{ + color:#fff; + font-size: 28px; + font-weight: 800; +} +#sm-banner span{ + color:#fff; + font-size: 14px; + font-weight: 500; + padding-bottom: 15px; +} + +#sm-banner .banner-box:hover button{ + background: #088178; + border: 1px solid #088178; + +} + +#banner3{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 80px; +} + +#banner3 .banner-box{ + display:flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: center; + background-image: url("img/banner/b7.jpg"); + min-width: 30%; + height: 30vh; + background-size: cover; + background-position: center; + padding: 20px; + margin-bottom: 20px; +} + +#banner3 .banner-box2{ + background-image: url("img/banner/b4.jpg"); +} + +#banner3 .banner-box3{ + background-image: url("img/banner/b18.jpg"); +} + + +#banner3 h2{ + color:#fff; + font-weight:900; + font-size: 22px; +} + +#banner3 h3{ + color:#ec544e; + font-weight: 800; + font-size: 15px; +} + +#newsletter{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + background-image:url("img/banner/b14.png"); + background-repeat: no-repeat; + background-position: 20% 30%; + background-color: #041e42; +} + +#newsletter h4{ + font-size: 22px; + font-weight: 700; + color:#fff; +} + +#newsletter p{ + font-size: 14px; + font-weight: 600; + color:#818ea0; +} +#newsletter p span{ + color:#ffbd27; +} + +#newsletter .form{ + display: flex; + width: 40%; +} + +#newsletter input{ + height:3.125rem; + padding:0 1.25em; + font-size: 14px; + width:100%; + border: 1px solid transparent; + border-radius: 4px; + outline: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + + +} +#newsletter button{ + background-color: #088178; + color:#fff; + white-space: nowrap; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +footer{ + display:flex; + flex-wrap: wrap; + justify-content: space-between; +} +footer .col{ + display:flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; +} + +footer .logo{ + margin-bottom: 30px; + padding-bottom: 20px; +} + +footer h4{ + font-size: 14px; + padding-bottom: 20px; + +} +footer p{ + font-size:13px; + margin:0 0 8px 0; +} + +footer a{ + font-size: 13px; + text-decoration: none; + color:#222; + margin-bottom:10px; +} +footer .follow{ + margin-top:20px; +} +footer .follow i{ + color:#465b52; + padding-right: 4px; + cursor:pointer; + +} +footer .install .row img{ + border: 1px solid #088178; + border-radius: 6px; +} + +footer .install img{ + margin:10px 0 15px 0; +} + +footer .follow i:hover, +footer a:hover{ + color:#088178; +} + +footer .copyright{ + width:100%; + text-align: center; +} + +/*shop page */ + +#page-header{ + background-image: url("img/banner/b1.jpg"); + width:100%; + height:40vh; + background-size: cover; + display:flex; + justify-content: center; + text-align: center; + flex-direction: column; + padding: 14px; + + +} +#page-header h2, +#page-header p{ + color: #fff; +} + +#pagination{ + text-align: center; + +} +#pagination a{ + text-decoration: none; + background-color: #088178; + padding: 15px 20px; + border-radius: 4px; + color: #fff; + font-weight:600; + +} +#pagination a i{ + font-size: 16px; + font-weight: 600; +} + +/*Single Product */ + +#prodetails{ + display:flex; + margin-top: 20px; +} + +#prodetails .single-pro-image{ + width:40%; + margin-right: 50px; +} +.small-img-group{ + display: flex; + justify-content: space-between; +} +.small-img-col{ + flex-basis:24%; + cursor:pointer; + +} +#prodetails .single-pro-details{ + width:50%; + padding-top: 30px; + +} +#prodetails .single-pro-details h4{ + padding:40px 0 20px 0; +} +#prodetails .single-pro-details h2{ + font-size: 26px;; +} +#prodetails .single-pro-details{ + display:block; + padding:5px 10px; + margin-bottom: 10px; + +} +#prodetails .single-pro-details input{ + width:50px; + height:47px; + padding-left: 10px; + font-size: 16px; + margin-right: 10px; +} + +#prodetails .single-pro-details input:focus{ + outline: none; +} + +#prodetails .single-pro-details button{ + background: #088178; + color:#fff; +} +#prodetails .single-pro-details span{ + line-height: 25px; +} + +/* Blog Page */ + +#page-header.blog-header{ + background-image: url("img/banner/b19.jpg"); +} +#blog{ + padding: 150px 150px 0 150px; +} +#blog .blog-box{ + display:flex; + align-items: center; + width:100%; + position: relative; + padding-bottom: 90px; +} + +#blog .blog-img{ + width: 50%; + margin-right: 40px; +} + +#blog img{ + width:100%; + height:300px; + object-fit: cover; +} + +#blog .blog-details{ + width: 50%; + +} +#blog .blog-details a{ + text-decoration: none; + font-size:11px; + color:#000; + font-weight: 700; + position:relative; + transition: 0.3s; + +} + +#blog .blog-details a::after{ + content:""; + width:50px; + height:1px; + background-color: #000; + position: absolute; + top: 4px; + right:-60px; +} + +#blog .blog-details a:hover{ + color:#088178; +} + +#blog .blog-details a:hover::after{ + background-color: #088178; +} + +#blog .blog-box h1{ + position:absolute; + top:-40px; + left:0; + font-size: 70px; + font-weight: 700; + color:#c9cbce; + z-index: -9; + +} + +/*About Page */ + +#page-header.about-header{ + background-image: url("img/about/banner.png"); + +} +#about-head{ + display:flex; + align-items: center; +} +#about-head img{ + width:50%; + height:auto; +} + +#about-head div{ + padding-left: 40px; + +} +#about-app{ + text-align:center; +} +#about-app .video{ + width:70%; + height:100%; + margin-top: 30px auto 0 auto; +} +#about-app .video video{ + width:100%; + height:100%; + border-radius: 20px; +} + +/*Contact Page */ + +#contact-details{ + display: flex; + align-items: center; + justify-content: space-between; +} +#contact-details .details{ + width:40%; +} +#contact-details .details span, +#form-details form span{ + font-size: 12px; +} +#contact-details .details h2, +#form-details form h2{ + font-size: 26px; + line-height: 35px; + padding: 20px 0; +} +#contact-details .details h3{ + font-size: 26px; + padding-bottom: 15px; +} +#contact-details .details li{ + list-style: none; + display: flex; + padding:10px 0; + +} +#contact-details .details li{ + margin:0; + font-size: 14px; +} +#contact-details .map{ + width:55%; + height:400px; +} +#contact-details .map iframe{ + width:100%; + height:100%; +} +#form-details{ + display:flex; + justify-content: space-between; + margin: 30px; + padding:80px; + border:1px solid #e1e1e1; +} +#form-details form{ + width: 65%; + display: flex; + flex-direction:column; + align-items: flex-start; +} + +#form-details form input, +#form-details form textarea{ + width:100%; + padding: 12px 15px; + outline: none; + margin-bottom: 20px; + border:1px solid #e1e1e1 +} +#form-details form button{ + background-color: #088178; + color:#fff; +} + +#form-details .people div{ + padding-bottom: 25px; + display:flex; + align-items: flex-start; + +} +#form-details .people div img{ + width:65px; + height:65px; + object-fit:cover; + margin-right: 15px; + +} +#form-details .people div p{ + margin:0; + font-size: 13px; + line-height: 25px; + +} +#form-details .people div p span{ + display:block; + font-size: 16px; + font-weight: 600; + color:#000; +} +/* cart Page */ + +#cart table{ + width:100%; + border-collapse: collapse; + table-layout: fixed; + white-space: nowrap; + +} +#cart table img{ + width:70px; +} +#cart table td:nth-child(1){ + width:100px; + text-align: center; + +} +#cart table td:nth-child(2){ + width: 150px; + text-align: center; +} +#cart table td:nth-child(3){ + width: 250px; + text-align: center; +} +#cart table td:nth-child(4), +#cart table td:nth-child(5), +#cart table td:nth-child(6){ + width: 150px; + text-align: center; +} +#cart table td:nth-child(5) input{ + width:70px; + padding: 10px 5px 10px 15px; +} +#cart table thead{ + border:1px solid #e2e9e1; + border-left:none; + border-right: none; +} +#cart table thead td{ + font-weight: 700; + text-transform: uppercase; + font-size: 13px; + padding: 18px 0; +} +#cart table tbody td{ + padding-top: 15px; +} +#cart table tbody td{ + font-size: 13px; +} + +/* Error Show */ +#cart-add { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +#coupon{ + width:50%; + margin-bottom: 30px; + +} +#coupon h3, +#subtotal h3{ + padding-bottom: 15px; +} +#coupon input{ + padding:10px 20px; + outline:none; + width:60%; + margin-right: 10px; + border: 1px solid #e2e9e1; + +} +#coupon button, +#subtotal button{ + background-color: #088178; + color:#fff; + padding: 12px 20px; +} +#subtotal{ + width:50%; + margin-bottom: 30px; + border:1px solid #e2e9e1; + padding:30px ; + +} +#subtotal table{ + border-collapse: collapse; + width: 100%; + margin-bottom: 20px; +} + +#subtotal tabel td{ + width:50%; + border:1px solid #e2e9e1; + padding: 10px; + font-size: 13px; +} + + + + + +/* start Media Query */ + +@media (max-width:799px){ + #navbar{ + display:flex; + flex-direction: column; + align-items:flex-start; + justify-content: flex-start; + position:fixed; + top: 0; + right: 0px; + height:100vh; + width:300px; + background-color: #E3E6F3; + box-shadow: 0 40px 60px rgba(0,0,0,0.1); + padding: 80px 0 0 10px; + + } + + /* single Product */ + #prodetails{ + display:flex; + flex-direction: column; + } + #prodetails .single-pro-image{ + width:100%; + margin-right: 50px; + } + #prodetails .single-pro-details{ + width:100%; + padding-top:30px; + } + + /* Blog page */ + #blog{ + padding: 100px 20px 0 20px; + } + #blog .blog-box{ + display:flex; + flex-direction: column; + align-items: flex-start; + } + #blog .blog-img{ + width:100%; + margin-right: 0px; + margin-bottom: 30px; + } + #blog .blog-details{ + width:100%; + } + + /*About Page */ + #about-head{ + flex-direction: column; + } + #about-head img{ + width:100%; + margin-bottom: 20px; + } + #about-head div{ + padding-left: 0px; + } + #about-app .vedio{ + width: 100px; + } +} diff --git a/web.html b/web.html new file mode 100644 index 0000000..6d17211 --- /dev/null +++ b/web.html @@ -0,0 +1,459 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + +
    +

    Tread-in-offer

    +

    Super value deals

    +

    On all product

    +

    Save more with coupons & up to 70% off!

    + +
    + +
    +
    + +
    Free Shipping
    +
    +
    + +
    Online Order
    +
    +
    + +
    Save Money
    +
    +
    + +
    Promotions
    +
    +
    + +
    Happy Sell
    +
    +
    + +
    24/7 Support
    +
    +
    + +
    +

    featured Products

    +

    Summer Collection New Morden Design

    +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    +
    + + + +
    +

    New Arrivals

    +

    Summer Collection New Morden Design

    +
    +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    + +
    + adidas +
    Cartoon Astronaut T-Shirts
    +
    + + + + + +
    +

    $78

    +
    + +
    + +
    +
    + +
    + + +
    + +
    + + + + + + +
    + +
    +
    +

    Sign Up for Newsletters

    +

    Get E-mail updates about our latest shop and special offers.

    +
    +
    + + +
    +
    + + + + + + + + \ No newline at end of file