Skip to content

Solution #12

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

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

Solution #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef704fc
Solution
kochatkov Mar 16, 2020
4783043
Solution
kochatkov Mar 16, 2020
b0545fd
Solution
kochatkov Mar 22, 2020
8405ec6
Solution
kochatkov Mar 24, 2020
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Base layout template with Gulp, SCSS and Stylelint
1. Create a repo using this template
1. Replace `<your_account>` and `<repo_name>` with your Github username and the new repo name
- [DEMO LINK](https://<your_account>.github.io/<repo_name>/)
- [DEMO LINK](https://kochatkov.github.io/layout_AirBNBs/)
Binary file added src/fonts/Avenir-Book.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/Avenir-Heavy.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/images/headshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/picture1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
135 changes: 125 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<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.css">
</head>
<body>
<h1>Hello Mate Academy</h1>
<script type="text/javascript" src="scripts/main.js"></script>
</body>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AirBNB</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="icon" href="./images/logo.png">
</head>

<body>
<header class="header">
<div class="header__container">

<a href="#" class="header__logo-link"><img src="images/logo.png" alt="LOGO" class="header__logo"></a>

<nav class="header__nav nav">
<ul class="nav__list">
<il class="nav__item"><a href="#" class="nav__link">
Become a host</a></il>
<il class="nav__item"><a href="#" class="nav__link">Trips</a>
</il>
<il class="nav__item"><a href="#" class="nav__link">Messages</a>
</il>
</ul>
<a href="#" class="nav__headshot-link">
<img src="images/headshot.png" alt="headshot" class="nav__headshot">
</a>
</nav>
</div>
</header>

<img src="images/picture1.png" alt="flat-picture" class="promo">

<main class="main">
<section class="container">
<section class="apart">
<h1 class="apart__article">Quiet apartment</h1>
<p class="apart__entire">Entire apartment</p>
<div class="apart__content">
<span>4 guests</span>
<span>1 bed</span>
<span>1 bath</span>
</div>
<p class="apart__description">City Apartment is newly renovated in the heart of Budapest, right in the city
center. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="apart__host"><a href="#" class="apart__link">Contact host</a></p>
<h3 class="apart__amenities">Amenities</h3>
<div class="apart__amenities-grid">
<span>Elevator</span>
<span>Washer</span>
<span>Hair dryer</span>
<span>Kitchen</span>
</div>
<h5 class="apart__amenities-show"><a href="#" class="apart__link">Show All Amenities</a></h5>
<h2 class="apart__reviews"><a href="#" class="apart__link">Reviews</a></h2>
<div class="apart__user">
<div class="apart__user-photo"></div>
<section class="apart__user-info">
<p class="apart__user-John"><a href="#" class="apart__link">John</a></p>
<p class="apart__user-date">September 2016</p>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>

<div class="apart__user">
<div class="apart__user-photo"></div>
<section class="apart__user-info">
<p class="apart__user-John"><a href="#" class="apart__link">John</a></p>
<p class="apart__user-date">September 2016</p>
</section>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<p class="apart__hosted"><a href="#" class="apart__link">Hosted by Jane</a></p>
<p class="apart__town">Budapest, Hungary</p>
<p class="apart__host-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et magna aliqua.</p>
<button class="btn">Contact Host</button>
</section>
<form class="book">
<p class="book__price">25$ per night</p>
<input type="search" class="book__search" placeholder="Date">
<input type="search" class="book__search" placeholder="Guests">

<div class="book__btn">
<a href="#" class="book__btn-title">Book</a>
</div>
</form>
</section>
</main>

<footer class="footer">

<section>
<h5>Airbnb</h5>
<p><a href="#" class="footer__link">About</a></p>
<p><a href="#" class="footer__link">Press</a></p>
<p><a href="" class="footer__link">Help</a></p>
</section>

<section>
<h5>
Discover
</h5>
<p><a href="#" class="footer__link">Travel credit</a></p>
<p><a href="#" class="footer__link">Business</a></p>
<p><a href="#" class="footer__link">Guidebooks</a></p>
</section>

<section>
<h5>
Hosting
</h5>
<p><a href="" class="footer__link">Why host</a></p>
<p><a href="" class="footer__link">Hospitality</a></p>
<p><a href="" class="footer__link">Community</a></p>
</section>
</footer>

</body>

</html>
6 changes: 6 additions & 0 deletions src/styles/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,9 @@
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Avenir";
src: url("../fonts/Avenir-Book.ttf");
font-weight: 300;
}
104 changes: 104 additions & 0 deletions src/styles/apart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
.apart {
display: flex;
flex-direction: column;
margin: 40px 0 0 80px;
width: 450px;
@media screen and (max-width: 1200px) {
margin: 0 auto;

}
&__article {
margin: 0;
}

&__entire {
color: #687c94;
}

&__content {
display: grid;
grid-template-columns: repeat(3, 100px);
}

&__description {
margin-top: 40px;
}

&__host {
font-weight: bold;
}

&__amenities {
margin-top: 30px;
}

&__amenities-grid {
display: grid;
grid-template-columns: repeat(2, 176px);
grid-template-rows: repeat(2, 38px);
}

&__amenities-show {
margin-top: 0;
}

&__link {
text-decoration: none;
font-weight: bold;
color: #3d4e61;
cursor: pointer;
&:hover {
color: rgba(61, 78, 97, 0.8);
}
}

&__reviews {
margin-top: 40px;
}

&__user {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: 15px;
// grid-template-columns: repeat(2, 1fr);
}

&__user-photo {
background: #c4c4c4;
border-radius: 50%;
width: 40px;
height: 40px;
}

&__user-info {
margin: 0 15px;
}

&__user-John {
font-weight: bold;
margin: 0;
}

&__user-date {
margin: 0;
}

&__hosted {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 28px;
margin-top: 60px;
margin-bottom: 5px;
}

&__town {
font-size: 14px;
margin: 0;
}

&__host-content {
margin: 15px 0 25px;
}
}
55 changes: 55 additions & 0 deletions src/styles/book.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.book {
display: grid;
justify-content: center;
margin: 40px;
padding: 28px;
box-sizing: border-box;
width: 330px;
height: 319px;
border: 1px solid #e1e7ed;

@media screen and (max-width: 1200px) {
margin: 40px auto;
}
&__price {
display: inline;
box-sizing: border-box;
margin: 0 0 20px;
}

&__search {
width: 270px;
height: 50px;
padding: 17px;
font-family: Avenir, serif;
font-size: 16px;
border: 1px solid #e1e7ed;
box-sizing: border-box;
border-radius: 3px;
outline: none;
&:focus {
border: 1px solid gray;
}
}

&__btn {
margin-top: 10px;
text-align: center;
line-height: 50px;
width: 270px;
height: 50px;
background-color: #fd5c63;
border-radius: 4px;
box-sizing: border-box;
transition: 0.3s;
&:hover {
background-color: gray;
}
}

&__btn-title {
display: block;
color: #ffff;
text-decoration: none;
}
}
22 changes: 22 additions & 0 deletions src/styles/btn.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.btn {
font-family: Avenir, serif;
display: block;
text-align: center;
line-height: 22px;
font-weight: bold;
width: 150px;
height: 50px;
font-size: 14px;
box-sizing: border-box;
color: #118488;
background-color: white;
border-radius: 5px;
text-decoration: none;
border: 1px solid #118488;
margin-bottom: 88px;

&:hover {
border: 2px solid #118488;
cursor: pointer;
}
}
20 changes: 20 additions & 0 deletions src/styles/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.footer {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
grid-gap: 200px;
box-shadow: 0 -1px 0 #e1e7ed;
transform: translateX(-45px);
@media screen and (max-width: 1200px) {
grid-gap: 20px;
}

&__link {
text-decoration: none;
color: #3d4e61;
cursor: pointer;
&:hover {
color: rgba(61, 78, 97, 0.8);
}
}
}
27 changes: 27 additions & 0 deletions src/styles/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.header {
padding: 0 100px;
background: #ffff;
box-shadow: 0 1px 0 #e1e7ed;

&__container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
height: 60px;
margin: 0 auto;
}

&__logo {
width: 40px;
padding: 15px 26px;
outline: none;
cursor: pointer;
}

&__nav {
display: flex;
align-items: center;
justify-content: space-between;
}
}
Loading