Portfolio

Developer
Tushar Singh
Size
5,673 Kb
Views
32,384
  1. Portfolio Previews
  2. Portfolio HTML Codes
  3. Portfolio CSS Codes
  4. Portfolio JS Codes

How do I make an portfolio?

What is a portfolio? How do you make a portfolio? This script and codes were developed by Tushar Singh on 07 July 2022, Thursday.

Portfolio Previews
IQ Test

Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<header> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</header>
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Tushar Singh</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#myCarousel">HOME</a></li> <li><a href="#about-me">ABOUT</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#contact">CONTACT</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="icon"><a href="http://codepen.io/tushar_13/" target="_blank"><i class="fa fa-codepen"></i></a></li> <li class="icon"><a href="https://www.facebook.com/tushar.singh.90663" target="_blank"><i class="fa fa-facebook-square"></i></a></li> <li class="icon"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li class="icon"><a href="https://github.com/tushar3112" target="_blank"><i class="fa fa-github"></i></a></li> <li class="icon last"><a href="https://in.linkedin.com/in/tushar-singh-340228111
" target="_blank"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </nav> <div id="page-1"> <div class="container"> <div class="carousel slide" id="myCarousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> <li data-slide-to="3" data-target="#myCarousel"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active" id="slide1"> <div class="carousel-caption"> <h1>It's N<span>I</span>ce To Me<span>E</span>t You !</h1> </div> <!-- end carousel-caption--> </div> <!-- end item --> <div class="item" id="slide2"> <div class="carousel-caption"> <h1>Bootstrap <span>3</span> Integration and M<span>O</span>bile First Approach</h1> </div> <!-- end carousel-caption--> </div> <!-- end item --> <div class="item" id="slide3"> <div class="carousel-caption"> <h1>Re<span>S</span>ponsive and Flat Desi<span>G</span>n</h1> </div> <!-- end carousel-caption--> </div> <!-- end item --> <div class="item" id="slide4"> <div class="carousel-caption"> <h1>Eleg<span>A</span>nt Design</h1> </div> <!-- end carousel-caption--> </div> <!-- end item --> </div> <!-- carousel-inner --> <!-- Controls --> <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> </div> <!-- end myCarousel --> </div> <div id="bigCallout"> <h1>Hey There !</h1> <h2>Need a Website?</h2> <h2>I'll make it for You...</h2> </div> <!--end bigCallout--> </div> <!--end page-1--> <div class="page-2"> <div class="row" id="about-me"> <div class="container"> <div class="col-md-5"> <img class="profile-pic" src="http://res.cloudinary.com/tushar13/image/upload/v1457716221/profile-pic_dl0vdd.jpg" alt="profile-pic"></div> <div class="col-md-7"> <h1 class="abt">About</h1> <p class="para">Hi, I am Tushar Singh. I'm a self-taught Web Developer. This is my Design Portfolio where I share all my favourite work.</p> <p class="para">Well, I could tell you I hunt Tigers with my bare hands and go skiing with a Polar Bear but let's be honest; I'm a simple guy with an insatiable taste for technology who spends most of his time learning, building and creating.</p> </div> </div> </div> <!-- end about-me--> </div> <div class="page-3"> <div class="container "> <div class="row" id="features-1"> <div class="col-md-6"> <img class="ft-img img-responsive" src="http://res.cloudinary.com/tushar13/image/upload/v1458324736/carousel-1_ala6ci.jpg"> </div> <div class="col-md-6"> <h5 class="ft-text">I believe in simple, clear and effective copy that's written for a targeted audience. My words inform, explain and entertain. No gimmicks. Just a copy that works.</h5> </div> </div> <!--end features-1--> <div class="row" id="features-2"> <div class="col-md-6"> <blockquote> <p>"Be a yard stick of quality. Some people aren't used to an environment where excellence is expected."</p> <p><small>Steve Jobs</small></p> </blockquote> </div> <div class="col-md-6"> <img class="ft-img img-responsive" src="http://www.educational.rai.it/materiali/immagini_articoli/28969.jpg"> </div> </div> <div class="row" id="features-3"> <div class="col-md-6"> <img class="ft-img img-responsive" src="https://lysagreer.com/wp-content/uploads/2016/01/blog-header-3.jpg"> </div> <div class="col-md-6"> <h5 class="ft-text">Do You want to give a headache to your designer friends?</h5> <h5 class="ft-text">Do You have an idea and looking for someone to visualize it?</h5> </div> </div> </div> </div> <div class="page-4"> <div class="container"> <h1>Some of my latest work...</h1> <div class="row" id="portfolio"> <div class="col-md-4"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> </div> <div class="col-md-4"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> </div> <div class="col-md-4"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif"> </div> </div> <!--end portfolio--> </div> </div> <div class="page-5"> <div class="container"> <div class="row" id="contact"> <div class="col-md-8 primary"> <h1>General Information</h1> <p>I'm actively looking for an interesting project. If you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries, otherwise e-mail is the best way to reach me.</p> </div> <div class="col-md-4 secondary"> <h1>Contact Details</h1> <ul class="contact-details"> <li class="phone"> <a href="tel:+918058708525"><span class="glyphicon glyphicon-earphone">+91-8058708525</a></li> <li class="mail"> <a href="mailto:[email protected]"><span class="glyphicon glyphicon-envelope">[email protected]</a></li> <li class="linkedin"> <a target="_blank" href="https://in.linkedin.com/in/tushar-singh-340228111"><i class="fa fa-linkedin"></i> LinkedIn</a></li> </ul> </div> </div> <!--end contact--> </div> </div> </div> <!-- end fluid container--> <footer> <div class="container"> <div class="row"> <div class="col-md-4"> <h1>Interested?</h1> </div> <div class="col-md-4"> <p class="lead"><span>Me Too.</span> I always have my eyes open for a few good clients. Contact me and let me know how can I help you.</p> </div> <div class="col-md-4"> <a href="#" target="_blank" class="btn btn-block btn-danger">Let's get Started.</a> </div> </div> <p>&copy; 2016 Tushar Singh.</p> </div> </footer>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script> window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</html> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio - Script Codes CSS Codes

li { list-style: none;
}
a { text-decoration: none; color: white; font-family: Roboto, sans-serif;
}
.navbar-brand { padding:13px 15px;
}
/************************** CAROUSEL
**************************/
#myCarousel { margin-top:50px;
}
#myCarousel .item { height: 391px;
}
.carousel-caption h1 { font-size: 3em; font-family: 'Roboto', sans-serif; font-weight: bold; padding-right:100px;
}
.carousel-caption h1 span { color: yellow; font-family: Lobster, sans-serif;
}
#slide1 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225405/c-1-medium_y9wmas.jpg') top left no-repeat;
}
#slide2 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225408/c-2-medium_xz8l1l.jpg') top left no-repeat;
}
#slide3 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225407/c-3-medium_zti0pa.jpg') top left no-repeat;
}
#slide4 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225422/c-4-medium_xyqeod.jpg') top left no-repeat;
}
/************************** Page-1
**************************/
#page-1 { background-image: url('http://www.psdgraphics.com/file/abstract-design.jpg'); background-size: cover; backgroun-position: fixed; padding-bottom:50px;
}
#page-1 h1 { margin-top:50px; margin-left:30%; font-family: Lobster, sans-serif; font-weight: bold; font-size:3em;
}
#page-1 h2 { margin-left:60%; font-family: Lobster, sans-serif;
}
/************************** ABOUT
**************************/
.page-2 { background: url('http://netnz.org/wp-content/uploads/2014/12/Photography-Camera-HD-Wallpaper1.jpg'); background-size: cover; backgroun-position: fixed; height:700px; overflow: hidden;
}
.profile-pic { margin-top:100px; border-radius: 100%;
}
.abt { color: white; font-family: Lobster, sans-serif; margin-top: 100px; margin-bottom: 50px; font-size:2.9em;
}
.para { color: white; font-family: Roboto, sans-serif; font-size:1.3em; line-height:1.5;
}
/************************** Features
**************************/
.page-3 { background-image: url('http://www.wallpaperjosh.xyz/wp-content/uploads/2016/01/abstract-wallpaper-HD-HYU008.jpg'); background-size: cover; background-position: fixed;
}
#features-1, #features-2, #features-3 { margin-top:50px; border-bottom: 1px solid slategrey;
}
.ft-img { height:250px; width:500px; border: 2px dotted #333; margin-bottom: 20px;
}
.ft-text { font-size: 1.8em; font-fmaily: Roboto, sans-serif; margin-top: 40px;
}
blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
}
blockquote p { display: inline;
}
/************************** PORTFOLIO
**************************/
.page-4 { background-image: url('http://wallpoper.com/images/00/42/23/30/abstract-red_00422330.jpg'); background-size: cover; background-position: fixed;
}
.page-4 h1 { margin:30px; color: white; font-family: Lobster, sans-serif
}
/************************** PAGE-5
**************************/
.page-5 { background-image: url('http://cdn.paper4pc.com/images/abstract-wallpaper-38.jpg'); background-size: cover; background-position: fixed; height: 500px;
}
.glyphicon-earphone:before { margin-right: 5px;
}
.fa-linkedin:before { margin-reight: 7px;
}
.glyphicon-envelope:before { margin-right: 5px;
}
.primary, .secondary{ margin-top: 150px; color: white;
}
.primary h1{ margin-bottom: 50px; font-family: Lobster, sans-serif;
}
.secondary h1{ margin-bottom: 50px; font-family: Lobster, sans-serif;
}
/************************** Footer
**************************/
footer { background-image: url('http://p1.pichost.me/i/58/1822357.jpg'); text-align: center;
}
footer h1 { color: yellow; font-weight: bold; font-family: Roboto, sans-serif; margin-top:20px;
}
footer p { color: white; font-family: Roboto, sans-serif;
}
footer .lead { margin-top: 25px;
}
footer .btn { margin-top:30px;
}
p span { color: yellow; font-weight: bold;
}
/************************** MEDIA QUERIES
**************************/
/* for mobile phones*/
@media (max-width: 480px) { .carousel-caption h1 { font-size: 8px; padding:0; } .abt { margin: 20px 12px; } .page-2 { height:800px; } .secondary { margin-top:50px; } .primary h1{ margin-bottom:20px } .secondary h1 { margin-bottom: 20px; }
}
/* landscape mobile and tablets*/
@media (max-width: 768px) { .carousel-caption h1 { padding-bottom:20px; font-size:2em; } #myCarousel .item { height: 302px; } #slide1 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225404/c-1-small_gys346.jpg') top left no-repeat; } #slide2 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225406/c-2-small_rrofan.jpg') top left no-repeat; } #slide3 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225408/c-3-small_uwamtj.jpg') top left no-repeat; } #slide4 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225408/c-4-small_xphx2l.jpg') top left no-repeat; }
}
/* large desktops */
@media (min-width: 1200px) { #myCarousel .item { height: 500px; } #slide1 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225407/c-1_of4aoa.jpg') top left no-repeat; } #slide2 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225408/c-2_rq1ju5.jpg') top left no-repeat; } #slide3 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225408/c-3_yd8agn.jpg') top left no-repeat; } #slide4 { background: url('http://res.cloudinary.com/tushar13/image/upload/v1458225422/c-4_mkdopv.jpg') top left no-repeat; }
}

Portfolio - Script Codes JS Codes

$(".carousel-caption span").hide().show("slow");
Portfolio - Script Codes
Portfolio - Script Codes
Home Page Home
Developer Tushar Singh
Username tushar_13
Uploaded July 07, 2022
Rating 3
Size 5,673 Kb
Views 32,384
Do you need developer help for Portfolio?

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!

Tushar Singh (tushar_13) Script Codes
Name
Weather App
Pomodoro Clock
Manav
Random Stuff
Wikipedia Viewer
Random Quote Generator
Experiments
Hamburger for smaller screens
Tic Tac Toe
JavaScript Calculator
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!