Portfolio // LWD

What is a portfolio // lwd How do you make a portfolio // lwd? This script and codes were developed by Brian Haferkamp on 14 December 2021, Tuesday.

How do I make an portfolio // lwd?
  1. Portfolio // LWD Previews
  2. Portfolio // LWD HTML Codes
  3. Portfolio // LWD CSS Codes
  4. Portfolio // LWD JS Codes
Portfolio // LWD Previews

Portfolio // LWD HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Portfolio // LWD</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Righteous" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<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:[email protected]"> 
      <p>[email protected]</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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Portfolio // LWD CSS Codes

body {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  height: auto;
  width: 100%;
  -ms-touch-action: auto;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.social-icons p {
  margin: 0;
}

Portfolio // LWD JS Codes

$('.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 );
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.