Portfolio // LWD

Developer
Brian Haferkamp
Size
4,388 Kb
Views
8,096
  1. Portfolio // LWD Previews
  2. Portfolio // LWD HTML Codes
  3. Portfolio // LWD CSS Codes
  4. Portfolio // LWD JS Codes

How do I make an portfolio // lwd?

What is a portfolio // lwd? How do you make a portfolio // lwd? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.

Portfolio // LWD Previews
IQ Test

Portfolio // LWD - Script Codes 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 - Script Codes 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 - Script Codes 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 );
});
Portfolio // LWD - Script Codes
Portfolio // LWD - Script Codes
Home Page Home
Developer Brian Haferkamp
Username brianhaferkamp
Uploaded October 10, 2022
Rating 3
Size 4,388 Kb
Views 8,096
Do you need developer help for Portfolio // LWD?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian Haferkamp (brianhaferkamp) Script Codes
Name
Brutal, Bro
RADIOLOGY
System Fonts Can Be Beautiful
Gradient Transitions Between Sections
Full-Width Hero with Image Using Flexbox
Brutalism Web Design School
Emoji-Driven Survey
2-Up Magazine Layout
Follow Your Heart
Travel Blog Design with Sticky Nav and Sidebar
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!