generated from mate-academy/gulp-template
-
Notifications
You must be signed in to change notification settings - Fork 515
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.
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
Eco cosmetic was created #380
Open
Serhii-Khobotov
wants to merge
6
commits into
mate-academy:master
Choose a base branch
from
Serhii-Khobotov:develop
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
66af313
Eco cosmetic was created
Serhii-Khobotov 1a3df37
Demo link added
Serhii-Khobotov 920c170
Transition was added in hover
Serhii-Khobotov f71db7f
Phone-number field footer and icon were fixed
Serhii-Khobotov b0d82dd
Favicon button and demolink were fixed
Serhii-Khobotov d74aa94
Favicon button and demolink were fixed again
Serhii-Khobotov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,338 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<html lang="en" class="page"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Title</title> | ||
<link rel="stylesheet" href="./styles/main.scss"> | ||
<title>Eco cosmetics</title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com"> | ||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | ||
<link rel="stylesheet" href="./styles/style.scss"> | ||
<script | ||
type="text/javascript" | ||
src="scripts/main.js" | ||
defer | ||
></script> | ||
|
||
</head> | ||
<body> | ||
<h1>Hello Mate Academy</h1> | ||
<script type="text/javascript" src="scripts/main.js"></script> | ||
|
||
<body class="page__body"> | ||
|
||
<div class="container"> | ||
<header class="header"> | ||
<div class="header__icons top-bar"> | ||
<a href="#menu" class="header__icon header__icon--menu"></a> | ||
<a href="#" class="header__icon header__icon--logo"></a> | ||
<a href="#" class="header__icon header__icon--cart"></a> | ||
<nav class="header__nav nav-header"> | ||
<a href="#shop" class="nav-header__link"> | ||
Shop | ||
</a> | ||
<a href="#contact" class="nav-header__link"> | ||
Contact | ||
</a> | ||
<a href="#about-brand" class="nav-header__link"> | ||
About | ||
</a> | ||
</nav> | ||
</div> | ||
</header> | ||
|
||
<aside id="menu" class="page__menu menu"> | ||
<div class="top-bar"> | ||
<a href="#" class="menu__icon-close"> | ||
</a> | ||
</div> | ||
<nav class="menu__content"> | ||
<a href="#shop" class="menu__item"> | ||
Shop | ||
</a> | ||
<a href="#contact" class="menu__item"> | ||
Contact | ||
</a> | ||
<a href="#about-brand" class="menu__item"> | ||
About | ||
</a> | ||
</nav> | ||
</aside> | ||
|
||
<main class="main"> | ||
<section class="candles"> | ||
<div class="candles__image"> | ||
</div> | ||
<div class="candles__content"> | ||
<h1 class="candles__title"> | ||
Brand of eco-cosmetics and magic candles | ||
</h1> | ||
<p class="candles__sales"> | ||
20% of sales at a wild bird shelter | ||
</p> | ||
<a href="#" class="candles__button button">shop</a> | ||
</div> | ||
</section> | ||
|
||
<section class="intermediate"> | ||
<div class="intermediate__biologists"> | ||
Biologists say that birds are indicators of the environmental situation, and over the past half century, the | ||
population of seabirds has declined by 70%. Birds die due to environmental problems and human intervention in | ||
the natural environment. | ||
</div> | ||
<div class="intermediate__if-choose"> | ||
if you choose the gifts of nature and care about it’s - scroll down | ||
</div> | ||
</section> | ||
|
||
<section id="about-brand" class="about-brand"> | ||
<div class="about-brand__side-content side-content"> | ||
<div class="side-content__line"></div> | ||
<div class="side-content__text"> | ||
witch of mountain winds | ||
</div> | ||
</div> | ||
<div class="about-brand__content"> | ||
<h1 class="about-brand__title title"> | ||
about our brand | ||
</h1> | ||
<div class="about-brand__text"> | ||
Our brand cosmetics are made from natural ingredients and we are promoting them to the masses. Shampoo, hair | ||
conditioner, soap - in recycled paper. Creams, oils, washing products in glass containers with recycled | ||
paper labels. No synthetics and microplastics in cosmetics. And the packaging from it can be returned for | ||
recycling or reused. | ||
<div class="about-brand__added-content"> | ||
<div class="about-brand__added-text about-brand__added-text--active"> | ||
We are all neighbors of one big House. And we must protect what we have. Destroying everything around | ||
for the sake of consumerism and imaginary convenience, we destroy what does not belong to us. Be aware | ||
of your choice! | ||
</div> | ||
<a href="#added-text" class="about-brand__learnMore"> | ||
LEARN MORE | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="about-brand__image"> | ||
</div> | ||
<div class="about-brand__image-small"> | ||
</div> | ||
</section> | ||
|
||
<section id="shop" class="shop"> | ||
<div class="shop__side-content side-content"> | ||
<div class="side-content__line"></div> | ||
<div class="side-content__text"> | ||
shop | ||
</div> | ||
</div> | ||
<div class="shop__title-content"> | ||
<h1 class="shop__title title">shop</h1> | ||
</div> | ||
<div class="shop__header"> | ||
<nav class="shop__nav nav-shop"> | ||
<a href="#" class="nav-shop__link">face</a> | ||
<a href="#" class="nav-shop__link">body</a> | ||
<a href="#" class="nav-shop__link">hair</a> | ||
<a href="#" class="nav-shop__link">candles</a> | ||
</nav> | ||
</div> | ||
|
||
<div class="shop__products-content"> | ||
<div class="shop__products"> | ||
<div class="shop__product product product--hydrophilic-oil"> | ||
<div class="product__image product__image--hydrophilic-oil"></div> | ||
<div class="product__name">hydrophilic oil</div> | ||
<div class="product__price">160 UAH</div> | ||
</div> | ||
<div class="shop__product product product--ubtan"> | ||
<div class="product__image product__image--ubtan"></div> | ||
<div class="product__name">ubtan</div> | ||
<div class="product__price">160 UAH</div> | ||
</div> | ||
</div> | ||
</div> | ||
<a href="#" class="shop__button button"> | ||
all products | ||
</a> | ||
|
||
</section> | ||
|
||
<section class="about-creators"> | ||
<div class="about-creators__side-content side-content"> | ||
<div class="side-content__line"></div> | ||
<div class="side-content__text"> | ||
about the creators | ||
</div> | ||
</div> | ||
<div class="about-creators__content"> | ||
<h1 class="about-creators__title title">about the creators</h1> | ||
<div class="about-creators__text-content"> | ||
<div class="about-creators__text-p1"> | ||
My name is Victoria, I’m a master at candle making and natural cosmetics. In the past, a cynologist, was | ||
engaged in herbs, made layouts on the Tarot. | ||
</div> | ||
<div class="about-creators__text-p2"> | ||
I am also a volunteer to save wild birds in distress, a consultant to the Phoenix Wildlife Rehabilitation | ||
Center, a member of the Society for the Conservation of Birds of Ukraine with the support of Birdlife | ||
International. | ||
</div> | ||
<div class="about-creators__added-content"> | ||
<div class="about-creators__added-text about-creators__added-text--active"> | ||
My husband and I live in the Carpathian region in the city of Chernivtsi. I dream of my center for the | ||
rehabilitation of wild birds, as it is very difficult to rescue birds in a rented communal apartment. | ||
</div> | ||
<a href="#3" class="about-creators__learnMore">LEARN MORE</a> | ||
</div> | ||
</div> | ||
<a href="#" class="about-creators__button button">to contact us</a> | ||
</div> | ||
<div class="about-creators__image"></div> | ||
</section> | ||
|
||
<section class="tooth-powder"> | ||
<div class="tooth-powder__side-content side-content"> | ||
<div class="side-content__line"></div> | ||
<div class="side-content__text"> | ||
Ingredients | ||
</div> | ||
</div> | ||
<h1 class="tooth-powder__title title">Ayurvedic Tooth Powder</h1> | ||
<div class="tooth-powder__elements-content"> | ||
<ul class="tooth-powder__elements"> | ||
<li class="tooth-powder__element">Kaolin</li> | ||
<li class="tooth-powder__element">Sivak </li> | ||
<li class="tooth-powder__element">Calcium</li> | ||
<li class="tooth-powder__element">Licorice root</li> | ||
<li class="tooth-powder__element">Turmeric</li> | ||
</ul> | ||
<div class="tooth-powder__elements-image"> | ||
<img src="images/tooth-powder-desktop.png" alt="tooth-powder"> | ||
</div> | ||
</div> | ||
<div class="tooth-powder__added-content"> | ||
<!-- <div class="tooth-powder__added-text tooth-powder__added-text--active"> | ||
</div> --> | ||
<a class="tooth-powder__learnMore">LEARN MORE</a> | ||
</div> | ||
<div class="tooth-powder__advantages advantages"> | ||
<div class="advantages__advantage advantage"> | ||
<div class="advantage__image advantage__image--unharmful"> | ||
<img src="images/unharmful.png" alt="unharmful"> | ||
</div> | ||
<div class="advantage__text"> | ||
no synthetics and microplastics | ||
</div> | ||
</div> | ||
<div class="advantages__advantage advantage"> | ||
<div class="advantage__image advantage__image--recyclable"> | ||
<img src="images/recyclable.png" alt="recyclable"> | ||
</div> | ||
<div class="advantage__text"> | ||
product packaging can be recycled or reused | ||
</div> | ||
</div> | ||
<div class="advantages__advantage advantage"> | ||
<div class="advantage__image advantage__image--natural"> | ||
<img src="images/natural.png" alt="natural"> | ||
</div> | ||
<div class="advantage__text"> | ||
only natural ingredients | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
|
||
<section id="contact" class="contacts"> | ||
<div class="contacts__content"> | ||
<h1 class="contacts__title title">contact us</h1> | ||
<div class="contacts__text"> | ||
We will help you choose a product that suits you and answer your other questions | ||
</div> | ||
<form class="contacts__form form" onsubmit="this.reset();return false;"> | ||
<input | ||
type="text" | ||
class="form__input" | ||
placeholder="Your Name" required | ||
> | ||
<input | ||
type="email" | ||
class="form__input" | ||
placeholder="E-Mail" | ||
> | ||
<input | ||
type="tel" | ||
class="form__input" | ||
placeholder="Phone Number" | ||
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" | ||
required | ||
> | ||
<input | ||
class="form__input form__input--padding-top--45" | ||
name="form__input" | ||
aria-rowcount="3" | ||
type="text" | ||
placeholder="Your Message" | ||
required | ||
> | ||
<button class="form__button button"> | ||
send a message | ||
</button> | ||
</form> | ||
</div> | ||
<div class="contacts__image"> | ||
</div> | ||
</section> | ||
</main> | ||
</div> | ||
|
||
<footer class="footer"> | ||
<div class="container"> | ||
<div class="footer__content"> | ||
<nav class="footer__nav nav-footer"> | ||
<div class="nav-footer__links"> | ||
<a href="#shop" class="nav-footer__link">Shop</a> | ||
<a href="#contact" class="nav-footer__link">Contact</a> | ||
<a href="#about-brand" class="nav-footer__link">About</a> | ||
</div> | ||
</nav> | ||
<div class="footer__icons"> | ||
<a | ||
href="https://www.facebook.com/" | ||
class="footer__icon footer__icon--fb" | ||
target="_blank" | ||
></a> | ||
<a | ||
href="https://www.instagram.com/" | ||
class="footer__icon footer__icon--insta" | ||
target="_blank" | ||
></a> | ||
</div> | ||
<div class="footer__contacts"> | ||
<div class="footer__contact"> | ||
Ukraine | ||
</div> | ||
<a href="mailto:[email protected]" class="footer__contact"> | ||
[email protected] | ||
</a> | ||
<a href="tel:+380934476839" class="footer__contact"> | ||
+380934476839 | ||
</a> | ||
<div class="footer__contact"> | ||
Support is available Monday - Friday 9am-6pm | ||
</div> | ||
</div> | ||
|
||
<div class="footer__foot-content"> | ||
<div class="footer__foot-copy"> | ||
<div class="footer__foot-copyright">Copyright</div> | ||
<div class="footer__foot-icon"></div> | ||
</div> | ||
<div class="footer__foot-text"> | ||
2019 witch of mountain winds | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,25 @@ | ||
'use strict'; | ||
|
||
const addedContent1 = document.querySelector('.about-brand__added-content'); | ||
const addedText1 = addedContent1.querySelector('.about-brand__added-text'); | ||
const learnMore1 = addedContent1.querySelector('.about-brand__learnMore'); | ||
|
||
learnMore1.addEventListener('click', () => { | ||
addedText1.classList.toggle('about-brand__added-text--active'); | ||
}); | ||
|
||
const addedContent2 = document.querySelector('.about-creators__added-content'); | ||
const addedText2 = addedContent2.querySelector('.about-creators__added-text'); | ||
const learnMore2 = addedContent2.querySelector('.about-creators__learnMore'); | ||
|
||
learnMore2.addEventListener('click', () => { | ||
addedText2.classList.toggle('about-creators__added-text--active'); | ||
}); | ||
|
||
const addedContent3 = document.querySelector('.tooth-powder__added-content'); | ||
const addedText3 = addedContent3.querySelector('.tooth-powder__added-text'); | ||
const learnMore3 = addedContent3.querySelector('.tooth-powder__learnMore'); | ||
|
||
learnMore3.addEventListener('click', () => { | ||
addedText3.classList.toggle('tooth-powder__added-text--active'); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix this link and update it in the PR description