<div class="sidebar">

<button class="nav-btn"></button>

</div>

<header class="header">

<img src="img/logo.png" alt="Nexter logo" class="header__logo">

<h3 class="heading-3">Your own home:</h3>

<h1 class="heading-1">The ultimate personal freedom</h1>

<button class="btn header__btn">View our properties</button>

<div class="header__seenon-text">Seen on</div>

<div class="header__seenon-logos">

<img src="img/logo-bbc.png" alt="Seen on logo 1">

<img src="img/logo-forbes.png" alt="Seen on logo 2">

<img src="img/logo-techcrunch.png" alt="Seen on logo 3">

<img src="img/logo-bi.png" alt="Seen on logo 4">

</div>

</header>

<div class="realtors">

<h3 class="heading-3">Top 3 Realtors</h3>

<div class="realtors__list">

<img src="img/realtor-1.jpeg" alt="Realtor 1" class="realtors__img">

<div class="realtors__details">

<h4 class="heading-4 heading-4--light">Erik Einman</h4>

<p class="realtors__sold">245 houses sold</p>

</div>

<img src="img/realtor-2.jpeg" alt="Realtor 2" class="realtors__img">

<div class="realtors__details">

<h4 class="heading-4 heading-4--light">Kim Brown</h4>

<p class="realtors__sold">212 houses sold</p>

</div>

<img src="img/realtor-3.jpeg" alt="Realtor 3" class="realtors__img">

<div class="realtors__details">

<h4 class="heading-4 heading-4--light">Toby Ramsey</h4>

<p class="realtors__sold">198 houses sold</p>

</div>

</div>

</div>

<section class="features">

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-global"></use>

</svg>

<h4 class="heading-4 heading-4--dark">Worlds best luxury home</h4>

<p class="feature__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda mollitia possimus consequatur amet.</p>

</div>

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-trophy"></use>

</svg>

<h4 class="heading-4 heading-4--dark">Only the best properties</h4>

<p class="feature__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam voluptatum tempore expedita cum.</p>

</div>

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-map-pin"></use>

</svg>

<h4 class="heading-4 heading-4--dark">All homes in top locations</h4>

<p class="feature__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam praesentium fugiat adipisci, fuga dolore similique.</p>

</div>

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-key"></use>

</svg>

<h4 class="heading-4 heading-4--dark">New home in one week</h4>

<p class="feature__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo recusandae libero aut perspiciatis!</p>

</div>

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-presentation"></use>

</svg>

<h4 class="heading-4 heading-4--dark">Top 1% realtors</h4>

<p class="feature__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem voluptatibus expedita commodi et maxime!</p>

</div>

<div class="feature">

<svg class="feature__icon">

<use xlink:href="img/sprite.svg#icon-lock"></use>

</svg>

<h4 class="heading-4 heading-4--dark">Secure payments on nexter</h4>

<p class="feature__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolores earum maiores voluptatem nisi itaque?</p>

</div>

</section>

<div class="story__pictures">

<img src="img/story-1.jpeg" alt="Couple with new house" class="story__img--1">

<img src="img/story-2.jpeg" alt="new house" class="story__img--2">

</div>

<div class="story__content">

<h3 class="heading-3 mb-sm">Happy Customers</h3>

<h2 class="heading-2 heading-2--dark mb-md">&ldquo;The best decision of our lives&rdquo;</h2>

<p class="story__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi consequuntur tempore fugiat impedit, sit molestias repellat quis!</p>

<button class="btn">Find your own home</button>

</div>

<section class="homes">

<div class="home">

<img src="img/house-1.jpeg" alt="House 1" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Beautiful Family House</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>USA</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>5 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>325 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$1,200,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

<div class="home">

<img src="img/house-2.jpeg" alt="House 2" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Modern Glass Villa</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>Canada</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>6 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>450 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$2,750,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

<div class="home">

<img src="img/house-3.jpeg" alt="House 3" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Cozy County House</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>UK</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>4 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>250 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$850,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

<div class="home">

<img src="img/house-4.jpeg" alt="House 4" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Large Rustical Villa</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>Portugal</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>6 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>480 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$1,950,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

<div class="home">

<img src="img/house-5.jpeg" alt="House 5" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Majestic Palace House</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>Germany</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>18 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>4230 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$9,500,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

<div class="home">

<img src="img/house-6.jpeg" alt="House 6" class="home__img">

<svg class="home__like"><use xlink:href="img/sprite.svg#icon-heart-full"></use></svg>

<h5 class="home__name">Modern Family Apartment</h5>

<div class="home__location">

<svg><use xlink:href="img/sprite.svg#icon-map-pin"></use></svg>

<p>Italy</p>

</div>

<div class="home__rooms">

<svg><use xlink:href="img/sprite.svg#icon-profile-male"></use></svg>

<p>3 rooms</p>

</div>

<div class="home__area">

<svg><use xlink:href="img/sprite.svg#icon-expand"></use></svg>

<p>180 m²</p>

</div>

<div class="home__price">

<svg><use xlink:href="img/sprite.svg#icon-key"></use></svg>

<p>$600,000</p>

</div>

<button class="btn home__btn">Contact realtor</button>

</div>

</section>

<section class="gallery">

<figure class="gallery__item gallery__item--1">

<img src="img/gal-1.jpeg" alt="Gallery image 1" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--2">

<img src="img/gal-2.jpeg" alt="Gallery image 2" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--3">

<img src="img/gal-3.jpeg" alt="Gallery image 3" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--4">

<img src="img/gal-4.jpeg" alt="Gallery image 4" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--5">

<img src="img/gal-5.jpeg" alt="Gallery image 5" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--6">

<img src="img/gal-6.jpeg" alt="Gallery image 6" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--7">

<img src="img/gal-7.jpeg" alt="Gallery image 7" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--8">

<img src="img/gal-8.jpeg" alt="Gallery image 8" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--9">

<img src="img/gal-9.jpeg" alt="Gallery image 9" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--10">

<img src="img/gal-10.jpeg" alt="Gallery image 10" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--11">

<img src="img/gal-11.jpeg" alt="Gallery image 11" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--12">

<img src="img/gal-12.jpeg" alt="Gallery image 12" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--13">

<img src="img/gal-13.jpeg" alt="Gallery image 13" class="gallery__img">

</figure>

<figure class="gallery__item gallery__item--14">

<img src="img/gal-14.jpeg" alt="Gallery image 14" class="gallery__img">

</figure>

</section>

<footer class="footer">

<ul class="nav">

<li class="nav__items"><a href="#" class="nav__link">Find your dream home</a></li>

<li class="nav__items"><a href="#" class="nav__link">Request proposal</a></li>

<li class="nav__items"><a href="#" class="nav__link">Download home planner</a></li>

<li class="nav__items"><a href="#" class="nav__link">Contact us</a></li>

<li class="nav__items"><a href="#" class="nav__link">Submit your property</a></li>

<li class="nav__items"><a href="#" class="nav__link">Come work with us</a></li>

</ul>

<p class="copyright">

&copy; Copright 2017 by Jonas Schmedtmann. Feel free to use this project for your own purposes. This does NOT apply if you plan to produce your own course or tutorials based on this project.

</p>

</footer>