HtmlCode-Touche/article.html at main · AlexanderMihalich/HtmlCode-Touche · GitHub

1
<!DOCTYPE html><html lang="ru"> <head>	<title>Главная</title>	<meta charset="UTF-8">	<meta name="format-detection" content="telephone=no">	<link rel="stylesheet" href="css/style.min.css">	<link rel="shortcut icon" href="favicon.ico">	<!-- <meta name="robots" content="noindex, nofollow"> -->	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->	<meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>	<div class="wrapper" id="arrow">		<header class="header" id="header">	<div class="header__content _container">		<a href="index.html" class="header__column header__column_l">			<div class="header__logo">				<picture><source srcset="img/logo.webp" type="image/webp"><img src="img/logo.png" alt=""></picture>			</div>		</a>		<nav class="header__menu menu">			<div class="menu__icon icon-menu _custom-active">				<span></span>				<span></span>				<span></span>			</div>			<div class="menu__body">				<ul class="menu__list _tabs">					<li>						<a href="#" class="menu__link _menu-active" id="revista">REVISTA</a>						<span class="menu__arrow"></span>						<ul class="menu__sub-list menu__sub-list_small">							<span class="menu__arrow-tienda menu__arrow-tienda-1"></span>							<li><a href="revista.html" class="menu__sub-link">ver todo</a></li>							<li><a href="#" class="menu__sub-link">MAKE UP</a></li>							<li><a href="#" class="menu__sub-link">FASHION</a></li>							<li><a href="#" class="menu__sub-link">CUERPO</a></li>							<li><a href="#" class="menu__sub-link">PELO</a></li>							<li><a href="#" class="menu__sub-link">LIFESTYLE</a></li>						</ul>					</li>					<li class="menu__tienda">						<a href="#" class="menu__link _menu-active" id="tienda">TIENDA</a>						<span class="menu__arrow"></span>						<ul class="menu__sub-list menu__sub-list_big ">							<span class="menu__arrow-tienda menu__arrow-tienda-1"></span>							<li><a href="tienda.html" class="menu__sub-link">MAQUILLAJE</a></li>							<li><a href="#" class="menu__sub-link _tabs-item link" data-tab="#b-1">SKINCARE</a></li>							<li><a href="#" class="menu__sub-link _tabs-item link" data-tab="#b-2">PELO</a></li>							<li><a href="#" class="menu__sub-link _tabs-item link" data-tab="#b-3">CUERPO</a></li>							<li><a href="#" class="menu__sub-link _tabs-item link" data-tab="#b-4">BUNDLES</a></li>							<li><a href="#" class="menu__sub-link _tabs-item link" data-tab="#b-5">PROMOCIONES</a></li>						</ul>						<ul class="menu__list-tienda _tabs-block" id="b-1">							<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>							<li><a href="#" class="menu__link-tienda">ROSTRO</a></li>							<li><a href="#" class="menu__link-tienda">OJOS</a></li>							<li><a href="#" class="menu__link-tienda">cejas</a></li>							<li><a href="#" class="menu__link-tienda">lábios</a></li>							<li><a href="#" class="menu__link-tienda">uñas</a></li>							<li><a href="#" class="menu__link-tienda">paletas</a></li>							<li><a href="#" class="menu__link-tienda">accesorios</a></li>							<li><a href="#" class="menu__link-tienda">bundles</a></li>						</ul>						<ul class="menu__list-tienda _tabs-block _tabs-2" id="b-2">							<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>							<li><a href="#" class="menu__link-tienda">ROSTRO</a></li>							<li><a href="#" class="menu__link-tienda _tabs-item-2 link" data-tab="#b-11">OJOS</a></li>							<li><a href="#" class="menu__link-tienda">cejas</a></li>							<li><a href="#" class="menu__link-tienda _tabs-item-2 link" data-tab="#b-12">paletas</a></li>							<li><a href="#" class="menu__link-tienda">accesorios</a></li>							<li><a href="#" class="menu__link-tienda">bundles</a></li>							<ul class="menu__list-tienda _tabs-block-2" id="b-11">								<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>								<li><a href="#" class="menu__link-tienda">ROSTRO</a></li>								<li><a href="#" class="menu__link-tienda">OJOS</a></li>								<li><a href="#" class="menu__link-tienda">bundles</a></li>							</ul>							<ul class="menu__list-tienda _tabs-block-2" id="b-12">								<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>								<li><a href="#" class="menu__link-tienda">cejas</a></li>								<li><a href="#" class="menu__link-tienda">lábios</a></li>								<li><a href="#" class="menu__link-tienda">uñas</a></li>								<li><a href="#" class="menu__link-tienda">bundles</a></li>							</ul>						</ul>						<ul class="menu__list-tienda _tabs-block" id="b-3">							<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>							<li><a href="#" class="menu__link-tienda">ROSTRO</a></li>							<li><a href="#" class="menu__link-tienda">OJOS</a></li>							<li><a href="#" class="menu__link-tienda">paletas</a></li>							<li><a href="#" class="menu__link-tienda">accesorios</a></li>							<li><a href="#" class="menu__link-tienda">bundles</a></li>						</ul>						<ul class="menu__list-tienda _tabs-block" id="b-4">							<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>							<li><a href="#" class="menu__link-tienda">cejas</a></li>							<li><a href="#" class="menu__link-tienda">lábios</a></li>							<li><a href="#" class="menu__link-tienda">uñas</a></li>							<li><a href="#" class="menu__link-tienda">bundles</a></li>						</ul>						<ul class="menu__list-tienda _tabs-block" id="b-5">							<span class="menu__arrow-tienda menu__arrow-tienda-2"></span>							<li><a href="#" class="menu__link-tienda">ROSTRO</a></li>							<li><a href="#" class="menu__link-tienda">OJOS</a></li>							<li><a href="#" class="menu__link-tienda">cejas</a></li>							<li><a href="#" class="menu__link-tienda">lábios</a></li>							<li><a href="#" class="menu__link-tienda">uñas</a></li>							<li><a href="#" class="menu__link-tienda">paletas</a></li>							<li><a href="#" class="menu__link-tienda">accesorios</a></li>							<li><a href="#" class="menu__link-tienda">bundles</a></li>						</ul>					</li>					<li><a href="tienda-2.html" class="menu__link">PROMOCIONES</a></li>				</ul>			</div>		</nav>		<div class="header__column header__column_r">			<div class="header__custom custom">				<ul class="custom__list">					<li class="custom__link_name">						<a href="#" class="custom__link custom__link_name">							MARIA						</a>					</li>					<li class="custom__link_icon">						<a href="index.html" class="custom__link custom__link_icon">							<picture><source srcset="img/header/icon.webp" type="image/webp"><img src="img/header/icon.png" alt=""></picture>						</a>					</li>					<li class="custom__link_user _custom-active">						<a href="#" class="custom__link custom__link_user">							<picture><source srcset="img/header/user.webp" type="image/webp"><img src="img/header/user.png" alt=""></picture>						</a>						<span class="custom__arrow"></span>						<ul class="custom__sub-list custom__sub-list_name">							<li class="custom__sub-link">MIS ARTículos <br> guardados</li>							<li class="custom__sub-link">MIS FAVORITOS</li>							<li class="custom__sub-link">MIS DATOS</li>							<li class="custom__sub-link">LOG OUT</li>						</ul>					</li>					<li class="custom__link_shop">						<a href="#" class="custom__link custom__link_shop">							<picture><source srcset="img/header/shop.webp" type="image/webp"><img src="img/header/shop.png" alt=""></picture>						</a>						<span class="custom__arrow"></span>						<ul class="custom__sub-list custom__sub-list_shop">							<li class="custom__sub-link"></li>						</ul>					</li>					<li class="custom__link_search _custom-active">						<a href="#" class="custom__link custom__link_search">							<picture><source srcset="img/header/search.webp" type="image/webp"><img src="img/header/search.png" alt=""></picture>						</a>						<span class="custom__arrow"></span>						<ul class="custom__sub-list custom__sub-list_search">							<li class="custom__search">search</li>							<button class="custom__btn">buscar</button>						</ul>					</li>				</ul>			</div>		</div>	</div></header>		<div class="bg"></div>		<main class="page">			<nav class="breadcrumbs breadcrumbs_p _container" id="breadcrumbs">				<ul class="breadcrumbs__list">					<li><a href="#" class="breadcrumbs__link">INICIO</a></li>					<li><a href="#" class="breadcrumbs__link">TIENDA</a></li>					<li><a href="#" class="breadcrumbs__link">CARA</a></li>					<li><span class="breadcrumbs__item">REPAIR SERUM</span></li>				</ul>			</nav>			<section class="main-screen" id="main">				<div class="main-screen__container">					<div class="main-screen__wrapper">						<div class="main-screen__slide">							<div class="main-screen__slider main-screen__slider_height">								<div class="main-screen__ibg _ibg">									<picture><source srcset="img/article/bg-1.webp" type="image/webp"><img src="img/article/bg-1.jpg" alt=""></picture>								</div>								<div class="main-screen__content _container">									<h1 class="main-screen__title">AROMATERAPIA Y OTRAS MANERAS</h1>								</div>								<div class="main-screen__definition">									<time class="main-screen__definition-date" datetime="2021-02-12">12/02</time>									<div class="main-screen__definition-item">										<div class="main-screen__definition-min">2 min</div>										<a href="#" class="main-screen__definition-link">											<picture><source srcset="img/product/bookmark.webp" type="image/webp"><img src="img/product/bookmark.png" alt=""></picture>										</a>									</div>								</div>							</div>						</div>					</div>				</div>			</section>			<section class="descriptin descriptin_ap">				<div class="descriptin__container _container">					<div class="descriptin__text descriptin__text_bold">						<p>							En la actualidad la aromaterapia es una medicina complementaria ampliamente practicada, que utiliza							aceites esenciales de plantas aromáticas, flores, hojas, semillas, cortezas y frutas para ayudar a curar.							Los aceites esenciales se extraen normalmente ediante un proceso de destilación al vapor y suelen usarse						</p>					</div>				</div>				<div class="descriptin__content _container">					<h3 class="descriptin__title title">¿Cómo funciona?</h3>					<div class="descriptin__text">						<p>							La aromaterapia actúa sobre nuestro sentido del olfato y mediante la absorción al torrente sanguíneo.							Aproximadamente el 15 por ciento del aire que inhalamos se dirige al techo de la nariz, donde los							receptores olfatorios transportan los olores directamente a una parte del cerebro llamada sistema límbico.						</p>						<p>							Este área está conectada con el instinto, el humor y la emoción y se cree que la aromaterapia puede							estimular la liberación de sustancias químicas que juegan un papel en la liberación de emociones (piensa							como incluso el simple olor a cera de suelo puede hacerte volver rápidamente a la época de las aulas).						</p>					</div>					<h3 class="descriptin__title title">¿Cuál es la historia de la aromaterapia?</h3>					<div class="descriptin__text">						<p>							Se cree que las antiguas civilizaciones usaban la "aromaterapia" de muchas maneras							y por muchas razones como por ejemplo en el masaje, los baños, como medicina e incluso para embalsamar							cuerpos. Probablemente el concepto se usó originariamente							y al mismo tiempo en China, Egipto, el Oriente Medio y por los Nativos Americanos, siendo después							introducido en Europa por los Romanos.						</p>						<p>							La práctica de la aromaterapia moderna se atribuyó principalmente al químico francés René-Maurice							Gattefossé. Él inició investigación de los poderes curativos de los aceites esenciales en el primer cuarto							de siglo después de observar cómo el aceite de lavanda parecía ayudar en la curación de una quemadura							severa que tenía en una mano.						</p>						<p>							También publicó en 1937 el primer tratado en la materia: "La aromaterapia de Gattefossé", publicación aún							hoy disponible. La palabra aromaterapia proviene del griego, de las palabras "aroma" que significa							fragancia u olor agradable y "therapeia" que significa curación.						</p>					</div>				</div>				<div class="descriptin__img-aps">					<picture><source srcset="img/article/01.webp" type="image/webp"><img src="img/article/01.jpg" alt=""></picture>				</div>				<div class="descriptin__img-bottom">					<div class="descriptin__ibg _ibg">						<picture><source srcset="img/article/05.webp" type="image/webp"><img src="img/article/05.jpg" alt=""></picture>					</div>				</div>			</section>			<section class="rede">				<div class="rede__column rede__column_img">					<div class="rede__ibg _ibg">						<picture><source srcset="img/article/02.webp" type="image/webp"><img src="img/article/02.jpg" alt=""></picture>					</div>				</div>				<div class="rede__column">					<p class="rede__text">						"Se cree que las antiguas civilizaciones <br> usaban la aromaterapia de muchas maneras y por muchas razones						como, por ejemplo, en el masaje, los baños, como medicina e incluso para embalsamar cuerpos".					</p>				</div>			</section>			<section class="descriptin descriptin_p">				<div class="descriptin__content _container">					<h3 class="descriptin__title title">Puede usarse realmente la aromaterapia para curar enfermedades?</h3>					<div class="descriptin__text descriptin__text_open">						<p>							La aromaterapia parece tener su efecto más beneficioso en las dolencias menores, problemas digestivos,							síndrome premenstrual, enfermedades relacionadas con el estrés y algunos problemas de piel. Algunos							aceites esenciales como el aceite del árbol de té se utilizan ampliamente por sus propiedades							antisépticas.						</p>						<p>							Es extremadamente improbable que la aromaterapia cure enfermedades más importantes, por lo que no							recomendamos que se utilice en estos casos en sustitución de la medicina convencional. Sin embargo, puede							usarse para aliviar el estrés psicológico experimentado por las personas que sufren de una patología							grave.						</p>					</div>				</div>			</section>			<section class="bookmarks block">				<h2 class="bookmarks__title title-big">artículos PARECIDOS</h2>				<div class="bookmarks__content _container">					<article class="bookmarks__card card">						<div class="card__image card__image_1 shadowDown">							<picture><source srcset="img/product/01.webp" type="image/webp"><img src="img/product/01.jpg" alt=""></picture>						</div>						<div class="card__items">							<a href="#" class="card__icon">								<picture><source srcset="img/product/bookmark.webp" type="image/webp"><img src="img/product/bookmark.png" alt=""></picture>							</a>							<div class="card__item">								<div class="card__bodys">									<a href="#" class="card__body lineAnim">CUERPO</a>									<div class="card__back">										<div class="card__min">2 min</div>										<a href="#" class="card__iconsm">											<picture><source srcset="img/product/bookmark.webp" type="image/webp"><img src="img/product/bookmark.png" alt=""></picture>										</a>									</div>								</div>								<a href="#" class="card__title card__title_w lineAnim">MAKE UP: Lábios perfectos</a>								<p class="card__text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium									doloremque</p>							</div>						</div>					</article>					<article class="bookmarks__card card">						<div class="card__image shadowDown">							<picture><source srcset="img/product/02.webp" type="image/webp"><img src="img/product/02.jpg" alt=""></picture>						</div>						<div class="card__items">							<a href="#" class="card__icon">								<picture><source srcset="img/product/bookmark.webp" type="image/webp"><img src="img/product/bookmark.png" alt=""></picture>							</a>							<div class="card__item">								<div class="card__bodys">									<a href="#" class="card__body lineAnim">CUERPO</a>									<div class="card__back">										<div class="card__min">2 min</div>										<a href="#" class="card__iconsm">											<picture><source srcset="img/product/bookmark.webp" type="image/webp"><img src="img/product/bookmark.png" alt=""></picture>										</a>									</div>								</div>								<a href="#" class="card__title lineAnim">TENDENCIAS DE MODA EN 2021 (LOREM IPSUM)</a>								<p class="card__text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>							</div>						</div>					</article>				</div>			</section>		</main>		<footer class="footer">	<div class="footer__content _container">		<div class="footer__subscribe">			<h2 class="footer__title">SUSCRÍBETE A NUESTRO NEWS LETTER</h2>			<div class="footer__form form">				<form action="#" id="form" class="form__body" data-message='Данные успешно отправлены'>					<input type="email" class="footer__input _req _email" data-value="example@mail.com"> <br>					<button type="submit" class="footer__btn" id="btn">SUSCRIBIRME</button>				</form>			</div>		</div>		<div class="footer__row">			<div class="footer__content-2">				<div class="footer__column">					<h3 class="footer__subtitle">Términos y privacidad</h3>					<ul class="footer__list">						<li><a href="#" class="footer__link">Política de privacidad</a></li>						<li><a href="#" class="footer__link">Términos y Condiciones</a></li>						<li><a href="#" class="footer__link">Anuncios basados en <br> intereses</a></li>						<li><a href="#" class="footer__link">Accesibilidad</a></li>						<li><a href="#" class="footer__link">cookies</a></li>					</ul>				</div>				<div class="footer__column">					<h3 class="footer__subtitle">Atención al cliente</h3>					<ul class="footer__list">						<li><a href="#" class="footer__link">Devoluciones / Cambios</a></li>						<li><a href="#" class="footer__link">¿Dónde está mi pedido?</a></li>						<li><a href="#" class="footer__link">Preguntas frecuentes</a></li>						<li><a href="#" class="footer__link">Información de envío</a></li>						<li><a href="#" class="footer__link">Pago posterior</a></li>						<li><a href="#" class="footer__link">Más</a></li>					</ul>				</div>				<div class="footer__column">					<h3 class="footer__subtitle">Sobre touché.love</h3>					<ul class="footer__list">						<li><a href="#" class="footer__link">nosotros</a></li>						<li><a href="#" class="footer__link">EMPLEO</a></li>						<li><a href="#" class="footer__link">Información <br> corporativa</a></li>					</ul>				</div>			</div>			<div class="footer__footer">				<div class="footer__icons">					<a href="#" class="footer__icon footer__icon_1">						<picture><source srcset="img/footer/01.webp" type="image/webp"><img src="img/footer/01.png" alt=""></picture>					</a>					<a href="#" class="footer__icon footer__icon_2">						<picture><source srcset="img/footer/02.webp" type="image/webp"><img src="img/footer/02.png" alt=""></picture>					</a>					<a href="#" class="footer__icon footer__icon_3">						<picture><source srcset="img/footer/03.webp" type="image/webp"><img src="img/footer/03.png" alt=""></picture>					</a>				</div>				<p class="footer__ps">touché.love 2021</p>			</div>		</div>	</div></footer>		<a href="#arrow" class="arrow"><picture><source srcset="img/icons/arrow-up.webp" type="image/webp"><img src="img/icons/arrow-up.png" alt=""></picture>	</div>	<div class="popup popup-entry" id="popup-entry">	<div class="popup__content">		<div class="popup__body">			<div class="popup__close"></div>			<div class="popup__form"></div>			<p></p>		</div>	</div></div><div class="popup popup-login" id="popup-login">	<div class="popup__content">		<div class="popup__body">			<div class="popup__close"></div>			<div class="popup__form-login"></div>		</div>	</div></div><!-- <div class="popup popup_video">	<div class="popup__content">		<div class="popup__body">			<div class="popup__close popup__close_video"></div>			<div class="popup__video _video"></div>		</div>	</div></div> -->	<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script><script src="js/vendors.min.js"></script><script src="js/app.min.js"></script></body></html>