Portfolio
How do I make an portfolio?
Simple portfolio of myself using css & html. What is a portfolio? How do you make a portfolio? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.
Portfolio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<input type="checkbox" id="menu-toggle" /> <label for="menu-toggle" class="menu-icon">☰</label>
<header> <div class="container"> <div class="brand">Tushar Mehrotra </div> </div>
</header>
<nav class="menu"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="banner text-center"> <h1>Tushar Mehrotra</h1> <h2>Front-end developer</h2> <h4>Currently working at ThoughtFocus.<br /> Previously worked for kapgan.</h4> <a href = "http://www.tusharmehrotra.in" target="_blank" class="btn btn-success">View More</a> <a class="btn btn-primary">Contact</a> <div class="icon"> <a href="#" class="social-icon"><i class="fa fa-facebook-square fa-x"></i></a> <a href="https://codepen.io/MTushar"><i class="fa fa-codepen fa-x"></i></a> <a href="#"><i class="fa fa-twitter-square fa-x"></i></a> <a href="https://github.com/MeTushar"><i class="fa fa-github-square fa-x"></i></a> <a href="#"><i class="fa fa-google-plus-square fa-x"></i></a> </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js'></script>
</body>
</html>
Portfolio - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
*{margin:0; padding: 0;}
body{ font-family: 'Open Sans', sans-serif; background: #17212c;
}
.container{ width: 90%; margin: 0 auto;
}
header{ width: 100%; height: 50px; /*border-bottom: 1px solid #ddd;*/ background: #17212f; z-index: 99;
}
.brand{ line-height: 50px; font-size: 30px ; font-weight: bolder; float: left; color: #afafaf; transition: color 2s ease; cursor: pointer;
}
.brand:hover{ color: #fff;
}
a{text-decoration: none;}
li{list-style: none;}
nav.menu{ text-align: center; width: 100%; background: #e71d36; height: 50px; position: absolute; top: -51px; transition: all .3s ease; z-index: -1;
}
nav ul{ line-height: 50px;
}
nav li{ display: inline-block;
}
nav a{padding: 15px 20px 14px; color: #fff; transition: background 0.4s ease, font-size: 0.6s ease; font-size: 18px;}
nav a:hover, nav li.active a{ background: #cc0031; color: #fff;
}
#menu-toggle{ display: none;
}
.menu-icon{ float: right; /*padding: 10px 20px;*/ margin: 5px 20px 5px 0; /*background: #000;*/ color: #afafaf; cursor: pointer; border-radius: 5px; font-size: 25px;
}
#menu-toggle:checked ~ nav.menu{ position: absolute; top: 51px;
}
.banner{ padding-top: 70px; text-transform: uppercase; color: #fff;
}
.banner h1{ border-top: 4px solid #fff; border-bottom: 4px solid #fff; display: inline-block; padding: 10px;
}
a{ margin-top: 20px; text-transform: uppercase; padding: 5px 20px; font-size: 20px;
}
a.btn-success{ background: #ff9f1c; border: 1px solid #ff9f1c;
}
.btn-primary{ background: #f25f5c; border :1px solid #f25f5c;
}
.icon{ margin-top: 20px;
}
.icon a{ padding: 5px 10px; font-size: 25px; color: #fdfffc;
}
@media screen and (max-width: 480px) { nav li{display: block;} nav a{ display: block;} nav.menu{ top: -300px; height: auto; }
}
![Portfolio - Script Codes](http://shots.codepen.io/MTushar/pen/JYgKWZ-512.jpg)
Developer | Tushar Mehrotra |
Username | MTushar |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,739 Kb |
Views | 20,240 |
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 |
JS Calculator | 3,213 Kb |
Jquery datepicker | 1,497 Kb |
CSS3 Pricing Table | 3,923 Kb |
Vertical timeline page | 2,267 Kb |
Form Email validation | 2,148 Kb |
Angular ToDo App | 2,863 Kb |
MixItUp With Ajax | 2,689 Kb |
AngularJS Form Validation | 2,896 Kb |
Full Page JS jQuery Plugin | 2,029 Kb |
Login or Register Form | 3,614 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 |
Click handler test | Snapson | 2,329 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 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!