Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lesson7 #6

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open

Lesson7 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
2c9302f
start catalog
alexcoach030 Jan 20, 2021
bcc23f7
fixed troubles from 1st hw
alexcoach030 Jan 20, 2021
63df35e
made catalog, lets hover,ckbox,semantic tags
alexcoach030 Jan 20, 2021
5c8efae
added imgs
alexcoach030 Jan 21, 2021
d8c7452
fixed svg, done catalog hover
alexcoach030 Jan 23, 2021
a86dbf5
all done
alexcoach030 Jan 23, 2021
b855452
done product lets do video and bootstrap
alexcoach030 Jan 24, 2021
7fbddb3
added video to product page
alexcoach030 Jan 25, 2021
5b37dfa
fixed buttons
alexcoach030 Jan 26, 2021
a76df95
done
alexcoach030 Jan 31, 2021
3c9a986
done and fixed filter and scrol, made imports with bem
alexcoach030 Jan 31, 2021
0289048
done reg page and menu
alexcoach030 Feb 4, 2021
a7f0b54
done lesson without canvas
alexcoach030 Feb 4, 2021
41e3ec6
done l6 responsive index validator and crossbrowser
alexcoach030 Feb 8, 2021
547e43a
done responsibility
alexcoach030 Feb 11, 2021
6ae9909
done picture and responsive bgi
alexcoach030 Feb 12, 2021
7b7ad7b
fixed feedback bgi
alexcoach030 Feb 13, 2021
e07b38e
fixes
alexcoach030 Feb 13, 2021
39dc71f
fixed addbtn
alexcoach030 Feb 13, 2021
63ceb63
fixed addcart btn for safari
alexcoach030 Feb 13, 2021
867d0d2
fixed safari new
alexcoach030 Feb 13, 2021
caec2bf
done all boxes for addcart and pixel perfect for index desktop
alexcoach030 Feb 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 182 additions & 0 deletions cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping cart</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="wrap header-wrap">
<div class="logo">
<a href="#"><img class="header-logo" src="img/logo.svg" alt="logo"></a>
<a href="#"><img class="header-search" src="img/search.svg" alt="search"></a>
</div>
<div class="account">
<a class="header-menu-dropdown" href="#"><img class="header-menu" src="img/menu.svg" alt="menu"></a>
<div class="dropdown-background">
<div class="dropdown-content">
<section class="dropdown-content-tag">
<p>MENU</p>
<button class="bem-button bem-closing__menubtn"><svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4158 6.00409L11.7158 1.71409C11.9041 1.52579 12.0099 1.27039 12.0099 1.00409C12.0099 0.73779 11.9041 0.482395 11.7158 0.294092C11.5275 0.105788 11.2721 0 11.0058 0C10.7395 0 10.4841 0.105788 10.2958 0.294092L6.0058 4.59409L1.7158 0.294092C1.52749 0.105788 1.2721 -1.9841e-09 1.0058 0C0.739497 1.9841e-09 0.484102 0.105788 0.295798 0.294092C0.107495 0.482395 0.0017066 0.73779 0.0017066 1.00409C0.0017066 1.27039 0.107495 1.52579 0.295798 1.71409L4.5958 6.00409L0.295798 10.2941C0.20207 10.3871 0.127676 10.4977 0.0769072 10.6195C0.0261385 10.7414 0 10.8721 0 11.0041C0 11.1361 0.0261385 11.2668 0.0769072 11.3887C0.127676 11.5105 0.20207 11.6211 0.295798 11.7141C0.388761 11.8078 0.499362 11.8822 0.621222 11.933C0.743081 11.9838 0.873786 12.0099 1.0058 12.0099C1.13781 12.0099 1.26852 11.9838 1.39038 11.933C1.51223 11.8822 1.62284 11.8078 1.7158 11.7141L6.0058 7.41409L10.2958 11.7141C10.3888 11.8078 10.4994 11.8822 10.6212 11.933C10.7431 11.9838 10.8738 12.0099 11.0058 12.0099C11.1378 12.0099 11.2685 11.9838 11.3904 11.933C11.5122 11.8822 11.6228 11.8078 11.7158 11.7141C11.8095 11.6211 11.8839 11.5105 11.9347 11.3887C11.9855 11.2668 12.0116 11.1361 12.0116 11.0041C12.0116 10.8721 11.9855 10.7414 11.9347 10.6195C11.8839 10.4977 11.8095 10.3871 11.7158 10.2941L7.4158 6.00409Z"/>
</svg></button>
</section>
<section class="dropdown-content-links"><p>MAN</p>
<a href="">Accessories</a><br>
<a href="">Bags</a><br>
<a href="">Denim</a><br>
<a href="">T-Shirts</a><br>
</section>
<section class="dropdown-content-links"><p>WOMAN</p>
<a href="">Accessories</a><br>
<a href="">Jackets & Coats</a><br>
<a href="">Polos</a><br>
<a href="">T-Shirts</a><br>
<a href="">Shirts</a><br>
</section>
<section class="dropdown-content-links"><p>KIDS</p>
<a href="">Accessories</a><br>
<a href="">Jackets & Coats</a><br>
<a href="">Polos</a><br>
<a href="">T-Shirts</a><br>
<a href="">Shirts</a><br>
<a href="">Bags</a><br>
</section>
</div>
</div>
<a href="#"><img class="header-acc" src="img/acc.svg" alt="account"></a>
<a href="#"><img class="header-basket" src="img/basket.svg" alt="basket"></a>
<a class="basket-score" href="#">5</a>
</div>
</div>
</header>
<main>
<header class="bem-main-header bem-space">
<section class="wrap bem-main-header__wrap">
<section class="bem-main-header__tag">
<h1>SHOPPING CART</h1>
</section>
</section>
</header>

<section class="bem-content">
<section class="bem-content_wrap wrap bem-space130">
<section class="bem-content__main-cart">
<section class="bem-content__cart-product bem-content__cart-product-space">
<section class="bem-cart-image">
<picture>
<source type="image/webp" srcset="img/cart-1.webp 1x, img/cart-1_2x.webp 2x">
<img src="img/cart-1.jpg" srcset="img/cart-1_2x.jpg 2x" alt="product.img">
</picture>
</section>
<section class="bem-cart-content">
<h2 class="bem-cart-content__name">MANGO PEOPLE T-SHIRT</h2>
<p class="bem-cart-content__property">Price: <span class="bem-cart-content__property_price">$300</span></p>
<p class="bem-cart-content__property">Color: Red</p>
<p class="bem-cart-content__property">Size: Xl</p>
<p class="bem-cart-content__property">Quantity: <label><input type="number" min="1" value="2" class="bem-cart-content__quantity"></label></p>
<button class="bem-button bem-closing__cart "><svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2453 9L17.5302 2.71516C17.8285 2.41741 17.9962 2.01336 17.9966 1.59191C17.997 1.17045 17.8299 0.76611 17.5322 0.467833C17.2344 0.169555 16.8304 0.00177586 16.4089 0.00140366C15.9875 0.00103146 15.5831 0.168097 15.2848 0.465848L9 6.75069L2.71516 0.465848C2.41688 0.167571 2.01233 0 1.5905 0C1.16868 0 0.764125 0.167571 0.465848 0.465848C0.167571 0.764125 0 1.16868 0 1.5905C0 2.01233 0.167571 2.41688 0.465848 2.71516L6.75069 9L0.465848 15.2848C0.167571 15.5831 0 15.9877 0 16.4095C0 16.8313 0.167571 17.2359 0.465848 17.5342C0.764125 17.8324 1.16868 18 1.5905 18C2.01233 18 2.41688 17.8324 2.71516 17.5342L9 11.2493L15.2848 17.5342C15.5831 17.8324 15.9877 18 16.4095 18C16.8313 18 17.2359 17.8324 17.5342 17.5342C17.8324 17.2359 18 16.8313 18 16.4095C18 15.9877 17.8324 15.5831 17.5342 15.2848L11.2453 9Z"/>
</svg></button>
</section>
</section>
<section class="bem-content__cart-product bem-space75">
<section class="bem-cart-image">
<picture>
<source type="image/webp" srcset="img/cart-2.webp 1x, img/cart-2_2x.webp 2x">
<img src="img/cart-2.jpg" srcset="img/cart-2_2x.jpg 2x" alt="product.img">
</picture>
</section>
<section class="bem-cart-content">
<h2 class="bem-cart-content__name">MANGO PEOPLE T-SHIRT</h2>
<p class="bem-cart-content__property">Price: <span class="bem-cart-content__property_price">$300</span></p>
<p class="bem-cart-content__property">Color: Red</p>
<p class="bem-cart-content__property">Size: Xl</p>
<p class="bem-cart-content__property">Quantity: <label><input type="number" min="1" value="2" class="bem-cart-content__quantity"></label></p>
<button class="bem-button bem-closing__cart "><svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2453 9L17.5302 2.71516C17.8285 2.41741 17.9962 2.01336 17.9966 1.59191C17.997 1.17045 17.8299 0.76611 17.5322 0.467833C17.2344 0.169555 16.8304 0.00177586 16.4089 0.00140366C15.9875 0.00103146 15.5831 0.168097 15.2848 0.465848L9 6.75069L2.71516 0.465848C2.41688 0.167571 2.01233 0 1.5905 0C1.16868 0 0.764125 0.167571 0.465848 0.465848C0.167571 0.764125 0 1.16868 0 1.5905C0 2.01233 0.167571 2.41688 0.465848 2.71516L6.75069 9L0.465848 15.2848C0.167571 15.5831 0 15.9877 0 16.4095C0 16.8313 0.167571 17.2359 0.465848 17.5342C0.764125 17.8324 1.16868 18 1.5905 18C2.01233 18 2.41688 17.8324 2.71516 17.5342L9 11.2493L15.2848 17.5342C15.5831 17.8324 15.9877 18 16.4095 18C16.8313 18 17.2359 17.8324 17.5342 17.5342C17.8324 17.2359 18 16.8313 18 16.4095C18 15.9877 17.8324 15.5831 17.5342 15.2848L11.2453 9Z"/>
</svg></button>
</section>
</section>
<section class="bem-content__cart-usabilities">
<button class="bem-button bem-cart-usabilities__button">CLEAR SHOPPING CART</button>
<button class="bem-button bem-cart-usabilities__button">CONTINUE SHOPPING</button>
</section>
</section>
<section class="bem-content__cart-others">
<section class="bem-shipping-form">
<form>
<p class="bem-shipping-form__label bem-space20">SHIPPING ADRESS</p>
<label><input class="bem-shipping-form__input bem-space20" type="text" placeholder="Bangladesh"></label>
<label><input class="bem-shipping-form__input bem-space20" type="text" placeholder="State"></label>
<label><input class="bem-shipping-form__input bem-space20" type="text" placeholder="Postcode / Zip"></label>
<input class="bem-button bem-shipping__button" type="button" value="GET A QUOTE">
</form>
</section>
<section class="bem-total-price">
<p class="bem-total-price__sub">SUB TOTAL <span class="bem-total-price__sum">$900</span></p>
<p class="bem-total-price__grand">GRAND TOTAL <span class="bem-total-price__sum_important">$900</span></p>
<section class="bem-total-price__line"></section>
<button class="bem-button bem-total-price__button">PROCEED TO CHECKOUT</button>
</section>
</section>
</section>
</section>
<footer class="bem-main-footer">
<section class="feedback">
<div class="feedback-background">
<div class="wrap feedback-wrap">
<div class="recension">
<img src="img/Intersect%20(1).svg" alt="feedback_persone">
<p>“Vestibulum quis porttitor dui! Quisque viverra nunc mi, a pulvinar purus condimentum“</p>
</div>
<div class="subscribe">
<h2>SUBSCRIBE</h2>
<p>FOR OUR NEWLETTER AND PROMOTION</p>
<form>
<label for="subscribe-form">
<input id="subscribe-form" type="email" placeholder="Enter Your Email">
</label>
<label>
<input class="subscribe-btn" type="submit" name="submit-button" value="Subscribe">
</label>
</form>
</div>
</div>
</div>
</section>
</footer>
</main>
<footer class="footer">
<div class="wrap footer-wrap">
<div class="brand">
<p>&copy; 2021 <span>Brand All Rights Reserved.</span></p>
</div>
<div class="socials">
<a class="social facebook" href="" target="_blank"><svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.08836 8.28L8.50686 5.61602H5.89022V3.88729C5.89022 3.15847 6.25574 2.44806 7.42765 2.44806H8.61722V0.179975C8.61722 0.179975 7.53772 0 6.50561 0C4.35073 0 2.9422 1.27593 2.9422 3.5857V5.61602H0.546875V8.28H2.9422V14.72H5.89022V8.28H8.08836Z"/>
</svg></a>
<a class="social instagram" href="" target="_blank"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.13897 3.68159C6.02383 3.68159 4.31774 5.38491 4.31774 7.49663C4.31774 9.60835 6.02383 11.3117 8.13897 11.3117C10.2541 11.3117 11.9602 9.60835 11.9602 7.49663C11.9602 5.38491 10.2541 3.68159 8.13897 3.68159ZM8.13897 9.9769C6.77211 9.9769 5.65467 8.8646 5.65467 7.49663C5.65467 6.12866 6.76878 5.01636 8.13897 5.01636C9.50915 5.01636 10.6233 6.12866 10.6233 7.49663C10.6233 8.8646 9.50583 9.9769 8.13897 9.9769V9.9769ZM13.0078 3.52554C13.0078 4.02026 12.6087 4.41538 12.1165 4.41538C11.621 4.41538 11.2252 4.01694 11.2252 3.52554C11.2252 3.03413 11.6243 2.63569 12.1165 2.63569C12.6087 2.63569 13.0078 3.03413 13.0078 3.52554ZM15.5386 4.42866C15.4821 3.23667 15.2094 2.18081 14.3347 1.31089C13.4634 0.440967 12.4058 0.168701 11.2119 0.108936C9.9814 0.039209 6.29321 0.039209 5.0627 0.108936C3.8721 0.165381 2.81453 0.437646 1.93987 1.30757C1.06522 2.17749 0.795836 3.23335 0.735973 4.42534C0.666134 5.65386 0.666134 9.33608 0.735973 10.5646C0.79251 11.7566 1.06522 12.8124 1.93987 13.6824C2.81453 14.5523 3.86878 14.8246 5.0627 14.8843C6.29321 14.9541 9.9814 14.9541 11.2119 14.8843C12.4058 14.8279 13.4634 14.5556 14.3347 13.6824C15.2061 12.8124 15.4788 11.7566 15.5386 10.5646C15.6085 9.33608 15.6085 5.65718 15.5386 4.42866V4.42866ZM13.949 11.8828C13.6895 12.5335 13.1874 13.0349 12.5322 13.2972C11.5511 13.6857 9.22314 13.596 8.13897 13.596C7.05479 13.596 4.72348 13.6824 3.74573 13.2972C3.09389 13.0382 2.59171 12.5369 2.32898 11.8828C1.93987 10.9033 2.02967 8.57905 2.02967 7.49663C2.02967 6.41421 1.9432 4.08667 2.32898 3.1105C2.58838 2.45972 3.09056 1.95835 3.74573 1.69604C4.7268 1.30757 7.05479 1.39722 8.13897 1.39722C9.22314 1.39722 11.5545 1.31089 12.5322 1.69604C13.184 1.95503 13.6862 2.4564 13.949 3.1105C14.3381 4.08999 14.2483 6.41421 14.2483 7.49663C14.2483 8.57905 14.3381 10.9066 13.949 11.8828Z"/>
</svg></a>
<a class="social linkedin" href="" target="_blank"><svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.74032 0.203125C3.55564 0.203125 0.408203 2.34063 0.408203 5.8C0.408203 8 1.63738 9.25 2.38233 9.25C2.68963 9.25 2.86655 8.3875 2.86655 8.14375C2.86655 7.85313 2.13091 7.23438 2.13091 6.025C2.13091 3.5125 4.03055 1.73125 6.4889 1.73125C8.60271 1.73125 10.1671 2.94062 10.1671 5.1625C10.1671 6.82187 9.50597 9.93437 7.36422 9.93437C6.59133 9.93437 5.93018 9.37187 5.93018 8.56563C5.93018 7.38438 6.74963 6.24062 6.74963 5.02187C6.74963 2.95312 3.835 3.32812 3.835 5.82812C3.835 6.35313 3.90018 6.93437 4.13298 7.4125C3.70463 9.26875 2.82931 12.0344 2.82931 13.9469C2.82931 14.5375 2.91311 15.1188 2.96899 15.7094C3.07452 15.8281 3.02175 15.8156 3.18316 15.7563C4.74757 13.6 4.69169 13.1781 5.3994 10.3562C5.78119 11.0875 6.76826 11.4812 7.55046 11.4812C10.8469 11.4812 12.3275 8.24688 12.3275 5.33125C12.3275 2.22813 9.66427 0.203125 6.74032 0.203125Z"/>
</svg></a>
<a class="social twitter" href="" target="_blank"><svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.417 3.74052C14.427 3.88264 14.427 4.0248 14.427 4.16692C14.427 8.50192 11.1498 13.4969 5.15986 13.4969C3.31448 13.4969 1.60022 12.9588 0.158203 12.0248C0.420396 12.0552 0.67247 12.0654 0.944752 12.0654C2.46741 12.0654 3.8691 11.5476 4.98843 10.6644C3.5565 10.6339 2.3565 9.68977 1.94305 8.39027C2.14475 8.4207 2.34642 8.44102 2.5582 8.44102C2.85063 8.44102 3.14308 8.40039 3.41533 8.32936C1.92291 8.02477 0.803551 6.70498 0.803551 5.11108V5.07048C1.23715 5.31414 1.74139 5.46642 2.2758 5.4867C1.39849 4.89786 0.823727 3.8928 0.823727 2.75573C0.823727 2.14661 0.985041 1.58823 1.26741 1.10092C2.87077 3.09077 5.28086 4.39023 7.98334 4.53239C7.93293 4.28873 7.90266 4.03495 7.90266 3.78114C7.90266 1.97402 9.35477 0.501953 11.1598 0.501953C12.0976 0.501953 12.9446 0.897891 13.5396 1.53748C14.2757 1.39536 14.9816 1.12123 15.6068 0.745609C15.3648 1.50705 14.8505 2.14664 14.1749 2.5527C14.8304 2.48167 15.4657 2.29889 16.0505 2.04511C15.6069 2.69483 15.0522 3.27348 14.417 3.74052Z"/>
</svg></a>
</div>
</div>
</footer>




<script src="js/main.js"></script>

</body>
</html>
Loading