eugeniy.ho
/
javascript_practice


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
		}

		#main {
			max-width: 70%;
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: sticky;
			top: 0;
			min-height: 60px;
            padding-left: 20px;
            padding-right: 20px;
			background-color: #afafaf;
		}

		.good-images {
			display: flex;
			align-items: center;
			column-gap: 50px;
            margin-top: 50px;
		}

		.good-images__element {
            max-width: 100%;
            max-height: 300px;
		}

		.card__image {
            max-width: 100%;
            max-height: 300px;
		}

        #mainContainer {
            display: flex;
            padding: 20px;
        }

        .cart,
        .order-cart-group,
        .order-cart__elements {
	        display: flex;
	        flex-direction: column;
	        row-gap: 20px;
        }

        .cart__element,
        .order-cart__element {
            padding: 20px;
	        border: 1px solid #ebebeb;
        }

        .cart__figure,
        .order-cart__figure {
	        display: flex;
	        column-gap: 30px;
	        margin: 0;
        }

        .cart__image,
        .order-cart__image {
	        max-width: 100px;
	        max-height: 100px;
        }

        .cart__price {
	        display: block;
            margin-top: 20px;
        }

        .cart__name {
	        font-size: 18px;
	        display: block;
        }

        fieldset {
	        margin: 0;
	        padding: 0;
	        border: 0 none;
        }

        .cart__quantity {
            display: flex;
	        height: 40px;
        }

        .cart__quantity-button {
            background-color: #fff;
            border: 1px solid #ebebeb;
            color: #333;
            font-size: 18px;
            height: inherit;
            transition: background-color 225ms ease;
            width: 40px;
	        cursor: pointer;
        }

        .cart__quantity-button:disabled {
	        background-color: rgba(51, 51, 51, 0.15);
	        cursor: not-allowed;
        }

        .cart__quantity-button--decrease {
            border-radius: 3px 0 0 3px;
            border-right: 0;
        }

        .cart__quantity-button--increase {
            border-left: 0;
            border-radius: 0 3px 3px 0;
        }

        .cart__quantity-amount {
	        box-sizing: border-box;
            appearance: none;
	        display: flex;
	        align-items: center;
	        justify-content: center;
            background-color: #fff;
            border: 1px solid #ebebeb;
            color: #333;
            font-size: 13px;
            border-radius: 0;
            height: inherit;
            padding: 0 5px;
            text-align: center;
            width: 50px;
            transition: border-color 225ms ease;
        }

        .cart__delete-button {
            margin-top: 20px;
	        width: 120px;
	        height: 40px;
	        cursor: pointer;
        }

        .cart-button {
	        font-size: 18px;
	        width: 200px;
	        height: 60px;
	        cursor: pointer;
        }

        #aside {
            width: 30%;
        }
        #aside > a{
            display: block;
        }
	</style>
</head>
<body>
<header class="header">
	<div id='cartIcon'></div>
	<div id='authSection'></div>
</header>
	<div id='mainContainer'>
		<aside id='aside'>
			Категории
		</aside>
		<main id='main'>
			Контент
		</main>
	</div>
	<script src="index.js"></script>
</body>
</html>