Portfolio Design

Developer
Dominic Francois
Size
2,507 Kb
Views
18,216
  1. Portfolio Design Previews
  2. Portfolio Design HTML Codes
  3. Portfolio Design CSS Codes
  4. Portfolio Design JS Codes

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 Previews
IQ Test

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
Portfolio Design - Script Codes
Home Page Home
Developer Dominic Francois
Username DominicFrancois
Uploaded October 10, 2022
Rating 3
Size 2,507 Kb
Views 18,216
Do you need developer help for Portfolio Design?

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!

Dominic Francois (DominicFrancois) Script Codes
Name
Digital clock
Flat login form
Responsive Navigation
Responsive Login Form
Testimonials
Fancy Audio Player
CSS Gradient Animation
Cool to-do list
Email Template
Cool menu
Create amazing art & images 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!