Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
pratama.sumirat committed Nov 20, 2022
0 parents commit 2d4de95
Show file tree
Hide file tree
Showing 18 changed files with 758 additions and 0 deletions.
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Nginep

Responsive landing page website for vacation homes and condo rentals.

### Features:

- Reponsive
- Mobile first
- Animation (with ScrollReveal)

### Live version:

[Nginep](https://happy-leavitt-1b9517.netlify.app/)

### Screenshot:

![Screenshot Nginep - Main page desktop version](/screenshots/desktop.png)
![Screenshot Nginep - Main page mobile version](/screenshots/mobile.png)

Thanks!
254 changes: 254 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nginep - Like in your best friends house</title>
<link rel="stylesheet" href="src/css/reset.css" />
<link rel="stylesheet" href="src/css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<script defer src="https://unpkg.com/scrollreveal"></script>
<script defer src="./src/js/script.js"></script>
</head>
<body>
<!-- NAVIGATION -->
<header>
<div class="navigation container">
<div class="navigation__logo">Nginep</div>
<div class="navigation__hamburger"></div>
<nav class="navigation__nav">
<ul class="navigation__group">
<li class="navigation__group__item navigation__group__item--active">
<a href="#">Home</a>
</li>
<li class="navigation__group__item"><a href="#">Browse</a></li>
<li class="navigation__group__item"><a href="#">Categories</a></li>
<li class="navigation__group__item"><a href="#">Sign In</a></li>
<li class="navigation__group__item"><a href="#">Register</a></li>
</ul>
</nav>
</div>
</header>

<!-- HERO -->
<div class="hero container">
<div class="hero__main">
<h1 class="hero__title">
A places where you can <span>take a rest peacefully</span>
</h1>
<p class="hero__description">
Forget your work for a little while, and let your head and body rest
peacefully in our beautiful places
</p>
<a class="hero__button" href="#popular">Show Me</a>
</div>
<div class="hero__right">
<img class="hero__image" src="src/images/hero.jpg" alt="Nginep" />
</div>
</div>

<!-- MOST POPULAR PLACES -->
<section class="popular container" id="popular">
<h2 class="section-title">Most Popular Places</h2>
<div class="popular__cards">
<div class="popular__item">
<img
src="./src/images/popular/kuta-house.jpg"
alt="Beach House in Bali Indonesia"
class="popular__image animation-hover"
/>
<div class="popular__text">
<p class="popular__name">Kuta House</p>
<p class="popular__location">Bali, Indonesia</p>
</div>
</div>
<div class="popular__item">
<img
src="./src/images/popular/hilton-galveston.jpg"
alt="Beach House in Bali Indonesia"
class="popular__image animation-hover"
/>
<p class="popular__name">Hilton Galveston</p>
<p class="popular__location">Texas, US</p>
</div>
<div class="popular__item">
<img
src="./src/images/popular/encuentro-guadalupe.jpg"
alt="Beach House in Bali Indonesia"
class="popular__image animation-hover"
/>
<p class="popular__name">Encuentro Guadalupe</p>
<p class="popular__location">El Porvenir, Mexico</p>
</div>
<div class="popular__item">
<img
src="./src/images/popular/oneeighty-dayclub.jpg"
alt="Beach House in Bali Indonesia"
class="popular__image animation-hover"
/>
<p class="popular__name">Oneeighty Dayclub</p>
<p class="popular__location">Bali, Indonesia</p>
</div>
</div>
</section>

<!-- CATEGORIES -->
<section class="categories container">
<h2 class="section-title">Choose Your Comfort</h2>
<div class="categories__cards">
<div class="categories__item">
<img
src="src/images/categories/whole-house.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Whole House</p>
<p class="categories__unit">4000+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/apartments.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Apartments</p>
<p class="categories__unit">1000+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/beach.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Beach</p>
<p class="categories__unit">700+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/nature.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Nature</p>
<p class="categories__unit">1500+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/barbeque.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Barbeque</p>
<p class="categories__unit">600+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/whole-house.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Whole House</p>
<p class="categories__unit">4000+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/apartments.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Apartments</p>
<p class="categories__unit">1000+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/beach.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Beach</p>
<p class="categories__unit">700+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/nature.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Nature</p>
<p class="categories__unit">1500+ units</p>
</div>
<div class="categories__item">
<img
src="src/images/categories/barbeque.jpg"
alt="Whole House Category"
class="categories__image animation-hover"
/>
<p class="categories__name">Barbeque</p>
<p class="categories__unit">600+ units</p>
</div>
</div>
</section>

<!-- FOOTER -->
<footer class="footer container">
<div class="footer__content">
<div class="footer__left">
<h4 class="footer__logo">Nginep</h4>
<p>We serve you well that you want to always take a rest</p>
<div class="footer__social">
<div class="footer__social__item">
<img src="./src/icon/fb.png" alt="facebook" />
<p>nginepaja</p>
</div>
<div class="footer__social__item">
<img src="./src/icon/ig.png" alt="Instagram" />
<p>@nginepaja</p>
</div>
<div class="footer__social__item">
<img src="./src/icon/twitter.png" alt="Twitter" />
<p>@nginepaja</p>
</div>
</div>
</div>

<div class="footer__right">
<div class="footer__right__group">
<h4 class="footer__right__title">Tutorial</h4>
<ul>
<li>Create a new account</li>
<li>Choosing a room</li>
<li>How to pay</li>
<li>How to Checkin</li>
</ul>
</div>
<div class="footer__right__group">
<h4 class="footer__right__title">About</h4>
<ul>
<li>Terms & Services</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Refund</li>
</ul>
</div>
<div class="footer__right__group">
<h4 class="footer__right__title">Contact</h4>
<ul>
<li>[email protected]</li>
<li>+62 21 551445</li>
<li>Bukit Algoritma, Indonesia</li>
</ul>
</div>
</div>
</div>
<p class="footer__copyright">
Copyright © 2022 PT. Nginep Internasional Indonesia
</p>
</footer>
</body>
</html>
74 changes: 74 additions & 0 deletions src/css/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Loading

0 comments on commit 2d4de95

Please sign in to comment.