online shop on html and css

css/blocks/base.css

@@ -0,0 +1,42 @@
+*, *::before, *::after{
+	box-sizing: border-box;
+}
+
+	/* font-family: 'Noto Sans', sans-serif;
+	   font-family: 'Playfair Display', serif; */
+
+body{
+	font-family: 'Noto Sans', sans-serif;
+	margin: 0;
+}
+
+.container {
+	max-width: 1200px;
+	padding-left: 15px;
+	padding-right: 15px;
+	margin: 0 auto;
+}
+
+.section-button-wrapper{
+	text-align: center;
+}
+
+.section-new{
+	padding-top: 60px;
+	padding-bottom: 70px;
+}
+
+.section-featured{
+	padding-top: 70px;
+	padding-bottom: 70px;
+}
+
+.section-blog{
+	padding-top: 70px;
+	padding-bottom: 45px;
+}
+
+.section-subscribe{
+	padding-top: 45px;
+	padding-bottom: 100px;
+}

css/blocks/buttons.css

@@ -0,0 +1,45 @@
+.button{
+	display: inline-block;
+	padding: 11px 33px 14px;
+	background-color: #F72464;
+	box-shadow: 0px 4px 15px rgba(123, 12, 46, 0.35);
+	border-radius: 4px;
+
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 26px;
+	line-height: 1;
+	text-align: center;
+	text-decoration: none;
+	color: #FFFFFF;
+	transition: box-shadow 0.2s ease-in background-color 0.2s ease-in;
+}
+
+.button:hover{
+	box-shadow: 0px 4px 25px rgba(184, 13, 64, 0.671);
+	background-color: #ff3874;
+}
+
+.button-outline{
+	display: inline-block;
+	padding: 10px 40px 11px;
+	background: #FFFFFF;
+	border: 1px solid #F72464;
+	border-radius: 4px;
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 1;
+	text-align: center;
+	text-transform: uppercase;
+	color: #777777;
+	text-decoration: none;
+	transition: background-color 0.2s ease-in, color 0.2s ease-in ;
+}
+
+.button-outline:hover{
+	background-color: #F72464;
+	color: #fff;
+}

css/blocks/footer.css

@@ -0,0 +1,70 @@
+.footer{
+	padding: 30px 0;
+	background-color: #000000;
+	color: #fff;
+}
+
+.footer a{
+	color: #fff;	
+}
+
+.footer__column{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.footer__nav{
+	margin-bottom: 25px;
+	font-size: 14px;
+	text-transform: uppercase;
+	color: #FFFFFF;
+}
+
+.footer__nav a{
+	text-decoration: none;
+	transition: color 0.2s ease-in;
+}
+
+.footer__nav a:hover{
+	color: #ff3874;
+	
+}
+
+.footer__nav > a + a{
+	margin-left: 30px;
+}
+
+.footer__socials{
+	margin-bottom: 25px;
+	display: flex;
+	align-items: center;
+}
+
+.footer__socials-link{
+	text-decoration: none;
+}
+
+.footer__socials-link + .footer__socials-link{
+	margin-left: 31px;
+}
+
+.footer__socials-icon path{
+	transition: fill 0.2s ease-in;
+}
+
+.footer__socials-icon:hover path{
+	fill: sandybrown;
+{
+
+}
+
+.footer__copyright{
+	font-size: 14px;
+	text-align: center;
+	color: #999999;
+}
+
+.footer__copyright p{
+	margin: 0;
+}

css/blocks/header.css

@@ -0,0 +1,32 @@
+.header__row{
+	display: flex;
+	justify-content: flex-end;
+	position: relative;
+}
+
+.header__content{
+	width: 626px;
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.header__title{
+	margin: 0;
+	font-family: 'Playfair Display', serif;
+	font-weight: normal;
+	font-size: 72px;
+	line-height: 96px;
+	margin-bottom: 20px;
+}
+
+.header__text{
+	font-size: 22px;
+	line-height: 1.5;
+	margin-bottom: 60px;
+}
+
+
+
+

css/blocks/info-section.css

@@ -0,0 +1,35 @@
+.info-section{
+	position: relative;
+	background: url('./../../img/info1.jpg');
+	background-size: cover;
+	background-position: center;
+	padding: 68px 0;
+}
+
+.info-section::before{
+	position: absolute;
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0 0 0 / 0.75);
+}
+
+.info-section__row{
+	position: relative;
+	z-index: 1;
+	display: flex;
+	justify-content: space-between;
+}
+
+.info-section__title{
+	margin: 0;
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 52px;
+	line-height: 1;
+	color: #FFFFFF;
+}
+

css/blocks/nav.css

@@ -0,0 +1,71 @@
+.nav {
+	padding: 40px 0;
+}
+
+.nav__row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.nav__logo, a.nav__logo {
+	text-decoration: none;
+	font-family: Noto Sans;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 28px;
+	line-height: 38px;
+	color: #000000;
+	margin-right: 83px;
+}
+
+a.nav__logo:hover{
+	color: #f72464;
+}
+
+.nav__list {
+	display: flex;	
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.nav__item {
+	margin-right: 30px;
+	font-size: 18px;
+}
+
+.nav__link {
+	text-decoration: none;
+	color: #000;
+}
+
+.nav__link:hover{
+	color: #f72464;
+}
+
+.nav__cart {
+	margin-left: auto;
+}
+
+.nav__cart-link{
+	display: inline-block;
+	padding: 5px;
+	position: relative;
+	top: 5px;
+}
+
+.nav__cart-number{
+	position: absolute;
+	top:0;
+	right: 0;
+	border-radius: 50%;
+	color: #fff;
+	width: 20px;
+	height: 20px;
+	font-weight: bold;
+	font-size: 12px;
+	text-align: center;
+	line-height: 20px;
+	background: #f72464;
+}

css/blocks/post.css

@@ -0,0 +1,71 @@
+.post{
+	max-width: 570px;
+	display: flex;
+	justify-content: space-between;
+	flex-grow: 1;
+}
+
+.posts-wrapper{
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	row-gap: 40px;
+	margin-bottom: 75px;
+}
+
+.post__content{
+	max-width: 370px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.post__title{
+	margin: 0;
+	margin-bottom: 10px;
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 20px;
+	color: #000000;
+
+row-gap: 40px;}
+.post__text{
+	margin: 0;
+	margin-bottom: 10px; 
+	font-style: normal;
+	font-weight: normal;
+	font-size: 14px;
+	line-height: 1.3;
+	color: #777777;
+}
+
+.post__reade-more{
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	color: #000000;
+	text-decoration: none;
+}
+
+.post__reade-more::after{
+	content: '';
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	background-image: url('./../../img/arrow.svg');
+	background-position: center;
+	background-size: auto;
+	background-repeat: no-repeat;
+	vertical-align: middle;
+	transition: margin 0.2s ease-in;
+}
+
+.post__reade-more:hover{
+	text-decoration: underline;
+}
+
+.post__reade-more:hover::after{
+	margin-left: 10px;
+}

css/blocks/product.css

@@ -0,0 +1,54 @@
+.products-wrapper{
+	margin-bottom: 40px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	row-gap: 40px;
+}
+
+.product__link{
+	text-decoration: none;
+	display: inline-block;
+	transition: opasity 0.4s ease-in;
+}
+
+.product__link:hover{
+	opacity: 0.8;
+}
+
+.product{
+	text-align: center;
+	max-width: 270px;
+}
+
+.product__img{
+	display: block;
+	margin-bottom: 12px;
+}
+
+.product__title{
+	margin: 0;
+	margin-bottom: 12px;
+	font-family: 'Playfair Display', serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 20px;
+	line-height: 27px;
+	color: #000000;
+}
+
+.product__price{
+	font-size: 14px;
+	line-height: 19px;	
+	text-transform: uppercase;
+}
+
+.product__price-old{
+	color: #999999;
+	margin-right: 10px;
+}
+
+.product__price-new{
+font-weight: bold;
+color: #F72464;
+}

css/blocks/section-header.css

@@ -0,0 +1,32 @@
+.section-header {
+	margin-bottom: 40px;
+
+}
+
+.section-header__title {
+	font-family: 'Playfair Display', serif;
+	margin: 0;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 42px;
+	line-height: 56px;
+	text-align: center;
+	color: #000000;
+}
+
+.section-header__description {
+	max-width: 630px;
+	margin: 0 auto;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 14px;
+	line-height: 19px;
+	text-align: center;
+	text-transform: uppercase;
+	color: #999999;
+	margin-bottom: 10px;
+}
+
+.section-header__description p{
+	margin-top: 0;
+}

css/blocks/subscribe-form.css

@@ -0,0 +1,47 @@
+.subscribe-form{
+	display: flex;
+	justify-content: center;
+}
+
+.subscribe-form__input{
+	background: #FFFFFF;
+	border: 1px solid #F72464;
+	box-sizing: border-box;
+	border-radius: 4px;
+	height: 42px;
+	width: 230px;
+	font-family: 'Noto Sans', sans-serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 1;
+	color: #000;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin-right: 15px;
+}
+
+.subscribe-form__input::placeholder{
+	color: #999999;
+}
+
+.subscribe-form__button{
+	display: inline-block;
+	border: none;
+	background: #F72464;
+	border-radius: 4px;
+	padding: 13px 30px;
+	font-family: 'Noto Sans', sans-serif;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 1;
+	color: #FFFFFF;
+	cursor: pointer;
+	transition: box-shadow 0.2s ease-in background-color 0.2s ease-in;
+}
+
+.subscribe-form__button:hover{
+	box-shadow: 0px 2px 15px rgba(184, 13, 64, 0.671);
+	background-color: #ff3874;
+}

css/main.css

@@ -0,0 +1,10 @@
+@import './blocks/base.css';
+@import './blocks/nav.css';
+@import './blocks/header.css';
+@import './blocks/buttons.css';
+@import './blocks/section-header.css';
+@import './blocks/product.css';
+@import './blocks/info-section.css';
+@import './blocks/post.css';
+@import './blocks/subscribe-form.css';
+@import './blocks/footer.css';

img/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 18L21 12L15 6" stroke="#F72464" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/cart.svg

@@ -0,0 +1,5 @@
+<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 31C9.10457 31 10 30.1046 10 29C10 27.8954 9.10457 27 8 27C6.89543 27 6 27.8954 6 29C6 30.1046 6.89543 31 8 31Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 31C21.1046 31 22 30.1046 22 29C22 27.8954 21.1046 27 20 27C18.8954 27 18 27.8954 18 29C18 30.1046 18.8954 31 20 31Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.67 14H23L21.32 22.39C21.1313 23.3402 20.2886 24.0186 19.32 24H8.75C7.73948 24.0086 6.88134 23.262 6.75 22.26L5.23 10.74C5.09962 9.7456 4.25291 9.00152 3.25 9H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="30" viewBox="0 0 16 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1124 29.9999V16.3154H14.7057L15.3934 10.9824H10.1124V7.57736C10.1124 6.03335 10.5412 4.98102 12.7555 4.98102L15.5796 4.97972V0.209915C15.0909 0.145158 13.4146 0 11.4644 0C7.39277 0 4.60522 2.48522 4.60522 7.04946V10.9825H0V16.3156H4.60507V30L10.1124 29.9999Z" fill="white"/>
+</svg>