first 2 lectures
This commit is contained in:
dqnid committed
1 parent
2cf84f4efd
commit
98a7c96117
289 files changed
+14886
No files matched your search
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
|
||||
|
||||
<title>nexter — your home, your freedom</title>
|
||||
</head>
|
||||
<body class="container">
|
||||
<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 Feinman</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">World's best luxury homes</h4>
|
||||
<p class="feature__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.</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">Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.</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 in top locations</h4>
|
||||
<p class="feature__text">Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.</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">Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.</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">Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.</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">Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.</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">“The best decision of our lives”</h2>
|
||||
<p class="story__text">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta!
|
||||
</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 Familiy 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<sup>2</sup></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<sup>2</sup></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 Country 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<sup>2</sup></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<sup>2</sup></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<sup>2</sup></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 Familiy 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<sup>2</sup></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__item"><a href="#" class="nav__link">Find your dream home</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
|
||||
</ul>
|
||||
<p class="copyright">
|
||||
© Copyright 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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user