Portfolio Design
How do I make an portfolio design?
Wanted to write this up quickly to show to explain the concept to a client.. What is a portfolio design? How do you make a portfolio design? This script and codes were developed by Dominic Francois on 10 October 2022, Monday.
Portfolio Design - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Design</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sidebar"> <div class="logo"> <p>Logo</p> </div> <ul class="nav"> <li>Home</li> <li>About</li> <li>Blog</li> <li>Contact</li> </ul>
</div>
<div class="content"> <div class="menu"> <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"/> </div> <div class="wrapper"> <div class="header"> <h1>Blog</h1> </div> <img src="http://parade.com/wp-content/uploads/2014/02/labrador-america-top-dog-breed-ftr.jpg" alt="" /> <p>Max @ the park</p> <img src="http://7-themes.com/data_images/out/2/6775361-beautiful-hills-wallpaper.jpg" alt="" /> <p>My view today 05/01/15</p> <img src="http://www.crosbys.com/wp-content/uploads/2013/04/IMG_9296.jpg" alt="" /> <p>My Moms a chef!</p> </div> <div class="footer"> <p>Created by <a href="http://www.domfrancois.com">Dominic Francois</a> 2015 </p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Portfolio Design - Script Codes CSS Codes
.sidebar { width: 200px; height:1000px; background: #121212; font-family: Arial; padding-top:50px; margin-bottom:200px; box-sizing: border-box; float: left; position:fixed;
}
.sidebar .logo { background:#0072ff; height:100px; width:100px; margin:0 50px 50px; text-align: center; border-radius: 150px;
}
.sidebar .logo p { color: #ffffff; padding-top:40px;
}
.sidebar ul { color: #fff;
}
.sidebar ul li { background: #080808; border-top: 1px solid #0f0f0e; line-height: 2em; font-size:.875em; padding-left: 20px;
}
.sidebar ul li:hover { background:#0072ff; cursor:pointer;
}
.content { width: 100%; background: #282a2c;
}
.content .menu { position:fixed; margin-left: 200px;
}
.content .menu:hover { cursor: pointer;
}
.content .menu img { height:30px;
}
.content .wrapper { margin: 0 auto; font-family: Arial; padding-top: 20px; padding-left: 220px; padding-right:20px;
}
.content h1 { font-size: 1.25em; color:#fff; margin-top: 20px;
}
.content .wrapper img { width: 100%; margin-top:15px; overflow:hidden;
}
.content .wrapper p { color:#fefefe; font-size:.875em; margin-top:15px;
}
.content .footer { color:#fefefe; font-family: Arial; font-size: .75em; line-height: 1.5em; margin:10px 0 0 220px; padding-bottom:10px;
}
.content .footer a { color:#0072ff;
}
Portfolio Design - Script Codes JS Codes
$('.content .menu').hide(0);
$('.content .menu').click(function() { $('.sidebar').slideToggle(500);
});
![Portfolio Design - Script Codes](http://shots.codepen.io/DominicFrancois/pen/vEydrm-512.jpg)
Developer | Dominic Francois |
Username | DominicFrancois |
Uploaded | October 10, 2022 |
Rating | 3 |
Size | 2,507 Kb |
Views | 18,216 |
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!
Name | Size |
Vertical Image Slider | 2,429 Kb |
Accordion Menu | 2,289 Kb |
Portfolio Design | 2,507 Kb |
Sorry page | 1,777 Kb |
Facebook Style Menu | 2,275 Kb |
Navigation | 1,742 Kb |
Cool to-do list | 2,071 Kb |
Clean Search | 2,088 Kb |
Photography Portfolio | 1,979 Kb |
Digital clock | 2,514 Kb |
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!
Name | Username | Size |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Twitch TV | Natester13 | 4,488 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
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. Hide Your IP Now!