Skip to content

Instantly share code, notes, and snippets.

@juanlet

juanlet/index.html

Created February 17, 2020 17:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juanlet/86e9b01695a6ec71257457e943339eaa to your computer and use it in GitHub Desktop.
Save juanlet/86e9b01695a6ec71257457e943339eaa to your computer and use it in GitHub Desktop.
Download ZIP
Simple sidebar menu that pushes content to the side
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>My Landing Page</title>
</head>
<body>
<nav id="nav">
<div class="logo">
<img src="https:/randomuser.me/api/portraits/men/76.jpg" alt="user">
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<header>
<button id="toggle" class="toggle">
<i class="fa fa-bars fa-2x"></i>
</button>
<h1>My Landing Page</h1>
<p>Lorem ipsum dolor sit amet, consect</p>
<button class="cta-btn" id="open">Sign Up</button>
</header>
<div class="container">
<h2>What is this landing page about?</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo, rerum repellat nemo quis odio, vitae optio
recusandae nisi dolor et nesciunt voluptas! Ipsum cumque modi earum, amet eius alias incidunt!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente explicabo repudiandae velit quia ullam
nobis quasi necessitatibus fugiat doloribus quisquam!</p>
<h2>Tell Me More</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores possimus dolor autem est nisi dolorem
labore? Aspernatur esse delectus pariatur, iusto dolorum ducimus, dolores quidem quas nesciunt magnam quod
dolore. Sit laboriosam, officiis nihil sequi at quia placeat assumenda labore!</p>
<h2>Benefits</h2>
<ul>
<li>Lifetime Access</li>
<li>30 Day Money Back</li>
<li>Tailored Customer Support</li>
</ul>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat perspiciatis ducimus facilis natus eum a
quas possimus? Et cumque iusto corporis ducimus exercitationem cupiditate dolor illum officiis laudantium
voluptatibus expedita magni asperiores perferendis voluptatem sapiente, provident iste aut. Deleniti eaque
dolores consectetur ipsam non. Facere laborum sequi excepturi atque accusamus consequuntur porro accusantium
officia tempora error dolores enim dicta, vel magni placeat maxime optio perspiciatis ipsa necessitatibus
quisquam non ex.</p>
</div>
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="modal-header">
<h3>Sign Up</h3>
<div class="modal-content">
<p>Register with us</p>
<form class="modal-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter Name" class="form-input">
<label for="name">Email</label>
<input type="text" id="email" placeholder="Enter Email" class="form-input">
<label for="name">Password</label>
<input type="password" id="password" placeholder="Enter Name" class="form-input">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter Name" class="form-input">
</div>
<input type="submit" value="Submit" class="submit-btn">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
const toggle = document.getElementById('toggle');
const close = document.getElementById('close');
const open = document.getElementById('open');
const modal = document.getElementById('modal');
const nav = document.getElementById('nav');
toggle.addEventListener('click', () =>
document.body.classList.toggle('show-nav')
);
//Show modal
open.addEventListener('click', () => {
modal.classList.add('show-modal');
});
//Hide modal
close.addEventListener('click', () => modal.classList.remove('show-modal'));
//hide modal on outside click
window.addEventListener('click', e => {
e.target === modal ? modal.classList.remove('show-modal') : false;
});
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
:root {
--modal-duration: 1s;
--primary-color: #30336b;
--secondary-color: #be2edd;
--nav-width: 200px;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
margin: 0;
overflow-x: hidden;
}
body.show-nav {
transform: translateX(var(--nav-width));
transition: transform 0.3s ease;
}
nav {
background-color: var(--primary-color);
border-right: 2px solid rgba(200, 200, 200, 0.1);
color: #fff;
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
z-index: 100;
transform: translateX(-100%);
}
nav .logo {
padding: 30px 0;
text-align: center;
}
nav .logo img {
height: 75px;
width: 75px;
border-radius: 50%;
}
nav ul {
padding: 0;
list-style-type: none;
margin: 0;
}
nav ul li {
border-bottom: 2px solid rgba(200, 200, 200, 0.1);
padding: 20px;
}
nav ul li:first-of-type {
border-top: 2px solid rgba(200, 200, 200, 0.1);
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
header {
background-color: var(--primary-color);
color: #fff;
font-size: 130%;
position: relative;
padding: 40px 15px;
text-align: center;
}
header h1 {
margin: 0;
}
header p {
margin: 30px 0;
}
button,
input[type='submit'] {
background-color: var(--secondary-color);
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 12px;
}
button:focus,
input[type='submit']:focus {
outline: none;
}
.toggle {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 20px;
left: 20px;
}
.cta-btn {
padding: 12px 30px;
font-size: 20px;
}
.container {
padding: 15px;
margin: 0 auto;
max-width: 100%;
width: 800px;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.modal-container.show-modal {
display: block;
}
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header {
background: var(--primary-color);
color: #fff;
padding: 15px;
}
.modal-header h3 {
margin: 0;
border-bottom: 1px solid #333;
}
.modal-content {
padding: 20px;
}
.modal-form div {
margin: 15px 0;
}
.modal-form label {
display: block;
margin-bottom: 5px;
}
.modal-form .form-input {
padding: 8px;
width: 100%;
}
.close-btn {
background: transparent;
font-size: 25px;
position: absolute;
top: 0;
right: 0;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment