Portfolio 2

Developer
Kartikeya Gupta
Size
4,341 Kb
Views
16,192
  1. Portfolio 2 Previews
  2. Portfolio 2 HTML Codes
  3. Portfolio 2 CSS Codes
  4. Portfolio 2 JS Codes

How do I make an portfolio 2?

What is a portfolio 2? How do you make a portfolio 2? This script and codes were developed by Kartikeya Gupta on 22 November 2022, Tuesday.

Portfolio 2 Previews
IQ Test

Portfolio 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio 2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<meta charset="utf-8">	<meta description="This is portfolio of Kartikeya Gupta.">	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">	<title>Portfolio:Kartikeya</title>	<link rel="icon" type="text/css" href="icon.ico">	<link rel="stylesheet" type="text/css" href="style.css">	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">	</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#about" >About</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">	<div class="row a" >	<a name="about"></a>	<div class="col-md-12">	<div class="col-md-4">	<div id="logo">	<img class="me img-responsive" src="http://i63.tinypic.com/2vkivwm.png">	<h4 id="myName" class="hide">Kartikeya Gupta</h4>	</div>	</div>	<div class="col-md-8">	<h2>My Proficiency and Expertise</h2>	<div class="col-md-3">	<div id="1" class="card-container_1"> <div class="card"> <div class="side"><img class="img-responsive "src="http://oi63.tinypic.com/2kmvio.jpg" alt="Javascript"></div> <div class="side back_1">Expertise level : Basic</div> </div>	</div>	</div>	<div class="col-md-3">	<div id="2" class="card-container_1 html"> <div class="card"> <div class="side"><img class="img-responsive "src="http://oi68.tinypic.com/314qs15.jpg" alt="HTML5"></div> <div class="side back_1">Expertise level : Intermidiate</div> </div>	</div>	</div>	<div class="col-md-3">	<div id="3" class="card-container_1 bs"> <div class="card"> <div class="side"><img class="img-responsive" src="http://oi67.tinypic.com/2mdhzj9.jpg" alt="Bootstrap"></div> <div class="side back_1">Expertise level : Intermidiate</div> </div>	</div>	</div>	<div class="col-md-3">	<div id="4" class="card-container_1 css"> <div class="card"> <div class="side"><img class="img-responsive" src="http://oi65.tinypic.com/nm16l1.jpg" alt="CSS3"></div> <div class="side back_1">Expertise level : Intermidiate</div> </div>	</div>	</div>	<div class="col-md-3">	<button class="btn btn-danger btn-lg skillbtn btn-block ">More Skills</button>	</div>	<div class="col-md-6">	<img class="img-responsive hidskill1 " src="http://oi64.tinypic.com/juvo29.jpg" alt="Javascript">	</div>	<div class="col-md-3">	<div class="ang"><img class="img-responsive hidskill2 hide" src="http://i68.tinypic.com/f3cikx.png" alt="Angular">	<h4 class="head hide">Learning in Progress</h4>	</div>	</div>	</div>	</div>	</div>	<div class="row b">	<a name="profile"></a>	<div class="col-md-12">	<h2>My Projects and Works</h2>	</div>	</div>	<div class="row c">	<a name="contact"></a>	<div class="col-md-12">	<h2>Contact Me</h2>	<div class="col-md-4">	<div class="input-group input"> <span class="input-group-addon"><i class="fa fa-font fa-fw" aria-hidden="true"></i></span> <input class="form-control" type="password" placeholder="Your Name">	</div>	<div class="input-group margin-bottom-sm input"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span> <input class="form-control" type="text" placeholder="Email address">	</div>	<button class="btn btn-default btn-lg">Submit!!!</button>	</div>	<div class="col-md-2">	<ul class="icons">	<li><button class="conme1 skill btn btn-success btn-lg">Instagram</button></li>	<li><a href="https://www.instagram.com/kartikeya100/"><i class="fa fa-instagram fa-4x" aria-hidden="true"></i></a></li>	</ul>	</div>	<div class="col-md-2">	<ul class="icons">	<li><button class="conme2 skill btn btn-primary btn-lg ">Facebook</button></li>	<li><a href="https://www.facebook.com/kartikeya100"><i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i></a></li>	</ul>	</div>	<div class="col-md-2">	<ul class="icons">	<li><button class="conme3 skill btn btn-warning btn-lg ">Email Me</button></li>	<li><a href="mailto:[email protected]"><i class="fa fa-envelope fa-4x" aria-hidden="true"></i></a></li>	</ul>	</div>	<div class="col-md-2">	<ul class="icons">	<li><button class="conme4 skill btn btn-info btn-lg">LinkedIN</button></li>	<li><a href="https://www.linkedin.com/in/kartikeya-gupta-a65369125?trk=hp-identity-photo"><i class="fa fa-linkedin fa-4x" aria-hidden="true"></i></a></li>	</ul>	</div>	</div>	</div>
</div><!--container-fluid-->
<footer>	<p>	Written Coded and Designed by Kartikeya Gupta	</p>
</footer>
<script src="java.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio 2 - Script Codes CSS Codes

body{	background: black;
}
.navbar{	margin: 0;	padding: 0;
}
.row{	padding: 0;	margin: 0;
}
h2{
font-family: 'Gloria Hallelujah', cursive;
padding-bottom: 10px;
text-align: center;
}
.a{	background: #F0F0F0 no-repeat;	-webkit-background-size:cover;	-moz-background-size:cover;	-o-background-size:cover;	padding: 20px 0px;
}
/*******************
****ABOUT
********************/
#logo img{	position: relative;	opacity: .55;	width: 100%;	height: 460px;
}
#logo img:hover{	opacity:1;	-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition: 0.5s; cursor: pointer;
}
#logo h4{	background-color: red;	position: relative;	bottom: 40px;	width: 100%;	opacity: .6;	text-align: center;	padding: 5px 0;	font-size: 20px;	font-weight: bold;
}
.sk{	padding-bottom: 10px;
}
.card-container_1 { cursor: pointer; height: 180px; perspective: 600; position: relative; width: 180px; margin: auto; margin-bottom: 10px;
}
.card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%;
}
.card:hover { transform: rotateY(180deg);
}
.card .side { backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%;
}
.card .back_1 { background: #eaeaed; color: #0087cc; padding-top: 70px; text-align: center; font-weight: bold; transform: rotateY(180deg); font-family: Roboto;
}
.skillbtn{	padding: 30px 0px;	font-weight: bold;	margin-top: 50px;
}
.ang{	position: relative;	width: 180px;	height: 180px;
}
.ang:hover{	cursor: pointer;
}
.ang h4{	background-color: black;	color: white;	text-align: center;	position: absolute;	bottom: 0px;	opacity: .0;
}
.css{	left: -2000px;	transition: left 2s linear 0s;
}
.bs{	top: -2000px;	transition: top 2s linear 0s;
}
.html{	top: 2000px;	transition: top 2s linear 0s;
}
.original{	top: 0;	right: 0;	left: 0;	bottom: 0;
}
/*******************
****WORK
********************/
.b{	background: #C0C0C0 no-repeat;	-webkit-background-size:cover;	-moz-background-size:cover;	-o-background-size:cover;	padding: 20px 0px;
}
/*******************
****Contact
********************/
.c{	background: #A5A5A5 no-repeat;	-webkit-background-size:cover;	-moz-background-size:cover;	-o-background-size:cover;
}
.c h2{	padding-top: 30px;	margin-bottom: 50px;
}
.icons{ list-style: none;
}
.icons li{ display: inline-block;
}
input:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; background: #EEEEEE;
}
.fa{
color: black;
}
.fa-facebook-square:hover{ color: #4862A3;
}
.fa-envelope:hover{ color: #EC9712;
}
.fa-linkedin:hover{ color: #0077B5;
} .fa-instagram:hover{ color: green;
}
.btn-lg{	text-align: center;	width: 100%;
}
.skill{
margin-bottom: 20px;
}

Portfolio 2 - Script Codes JS Codes

$(document).ready(function(){	$('.me').hover(function(){	$('#myName').toggleClass("hide");	});	$('.skillbtn').click(function(){	$('.hidskill2').toggleClass("hide");	$('.head').toggleClass("hide");	$('.hidskill1').slideToggle();	});	$('.ang').hover(function(){	$('.head').css("opacity","0.7");	});	$('.ang').mouseout(function(){	$('.head').css("opacity","0.0");	});	$('.conme1').click(function(){	$('.fa-instagram').slideToggle();	});	$('.conme2').click(function(){	$('.fa-facebook-square').fadeToggle();	});	$('.conme4').click(function(){	$('.fa-linkedin').toggle();	});	$('#2').addClass("original");	$('#3').addClass("original");	$('#4').addClass("original");
});
Portfolio 2 - Script Codes
Portfolio 2 - Script Codes
Home Page Home
Developer Kartikeya Gupta
Username kartikeya100
Uploaded November 22, 2022
Rating 3
Size 4,341 Kb
Views 16,192
Do you need developer help for Portfolio 2?

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!

Kartikeya Gupta (kartikeya100) Script Codes
Name
Javascript Calculator
Random Quote Generator Machine
Pomodoro clock
Parallax effect
Tic Tac Toe
Weather Application
Tribute Page
Twitch TV
My Portfolio
Wikipedia Viewer
Create amazing sales emails 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!