<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="content">
<div class="identity">
<h1>Joe Blow</h1>
<h2>Photographer . Developer</h2>
</div>
<div class="icons"><a href="#" data-tab="about">
<p><i class="fa fa-user" aria-hidden="true"></i></p></a><a href="#" data-tab="gallery">
<p><i class="fa fa-th" aria-hidden="true"></i></p></a><a href="#" data-tab="contact">
<p><i class="fa fa-envelope" aria-hidden="true"></i></p></a></div>
</div>
<!-- modals-->
<div class="modal" id="about">
<div class="modal-inner">
<div class="image">
<p><img src="http://judithgravel.ca/wp-content/uploads/2012/07/DSC_0179-small1.jpg"/></p>
</div>
<div class="text">
<h2>About Joe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio nulla provident quidem, debitis dolores modi unde pariatur adipisci facere error beatae esse ab non, repudiandae. Accusamus quam perspiciatis temporibus, rerum.</p>
</div>
</div>
</div>
<div class="modal" id="gallery">
<div class="gallery-wrapper"><img src="https://unsplash.it/800?image=720"/><img src="https://unsplash.it/800?image=721"/><img src="https://unsplash.it/800?image=722"/><img src="https://unsplash.it/800?image=723"/><img src="https://unsplash.it/800?image=724"/><img src="https://unsplash.it/800?image=726"/></div>
</div>
<div class="modal" id="contact">
<div class="contact-wrapper">
<h3>Email</h3><a href="mailto:joe@joeblow.com">
<p>joe@joeblow.com</p></a>
<h3>Phone</h3><a href="tel:+11234567890">
<p>123-456-7890</p></a>
<h3>Social</h3>
<div class="social-icons"><a href="#">
<p><i class="fa fa-500px" aria-hidden="true"></i></p></a><a href="#">
<p><i class="fa fa-github" aria-hidden="true"></i></p></a><a href="#">
<p><i class="fa fa-twitter" aria-hidden="true"></i></p></a></div>
</div>
</div>
<div class="close">
<p><i class="fa fa-times" aria-hidden="true"></i></p>
</div>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
z-index: 1;
}
img {
width: 100%;
}
a {
color: black;
}
a:hover {
color: rgba(0, 0, 0, 0.7);
}
h1,
h2,
h3,
h4 {
font-family: "Righteous", cursive;
}
p {
font-family: "Nunito Sans", sans-serif;
}
.content {
text-align: center;
padding: 1rem;
}
.identity {
font-size: 2rem;
}
.identity h1 {
color: red;
margin: 0;
}
.identity h2 {
font-size: 1rem;
text-transform: uppercase;
}
.icons {
display: flex;
justify-content: space-between;
font-size: 1.5rem;
margin-top: 2rem;
}
.icons a {
color: black;
}
.icons a:hover {
color: rgba(0, 0, 0, 0.7);
}
.modal {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: white;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 50;
}
@media (min-width: 600px) {
.modal {
max-width: 800px;
}
}
.modal-inner {
padding: 1rem;
}
.image img {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
.close {
position: absolute;
top: 0;
right: 1rem;
cursor: pointer;
z-index: 100;
}
.gallery-wrapper {
display: flex;
overflow-x: auto;
height: auto;
width: 100%;
touch-action: auto;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.gallery-wrapper img {
width: 100%;
height: 100%;
}
.contact-wrapper {
position: relative;
text-align: center;
font-size: 1.5rem;
z-index: 1000;
}
.social-icons {
display: flex;
justify-content: space-between;
}
.social-icons p {
margin: 0;
}
$(".modal, .close").hide();
$(".icons a").on("click", function() {
var tabID = $(this).attr("data-tab");
$("#" + tabID).fadeIn(200);
$(".close").fadeIn(200);
});
$(".close, .modal").on("click", function() {
$(".modal, .close").fadeOut(200);
});
