"Portf"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
$(".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);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular

Questions / Comments: