Portfolio

Developer
Anukaran Kathuria
Size
4,126 Kb
Views
26,312
  1. Portfolio Previews
  2. Portfolio HTML Codes
  3. Portfolio CSS Codes

How do I make an portfolio?

What is a portfolio? How do you make a portfolio? This script and codes were developed by Anukaran Kathuria on 02 September 2022, Friday.

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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Anukaran Kathuria's Portfolio</title>
</head>
<body id="page-top" > <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="t" href="#page-top" style="color:GREY"><h3>Anukaran's Portfolio</h3></a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#Projects">Projects</a></li> <li><a href="#About"> About</a></li> <li><a href="#Contact"> Contact</a></li> </ul> </div> </nav> <!-- Portfolio Grid Section --> <!-- Modal content--> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Random Quote Machine</h4> </div> <div class="modal-body"> <div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md"> <a class="btn btn-primary" href="#page-top"> <i class="fa fa-chevron-up"></i> </a> </div> <img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt=""> <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p> <ul class="list-inline item-details"> <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a> </strong> </li> <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a> </strong> </li> <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a> </strong> </li> </ul> <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> <div class="view"> <!-- <span id="ab">gfcdyuvhdfhjvdnhjvn</span> --> </div> <section id="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 id="Projects">Projects</h2> <hr> </div> </div> <div class="row"> <div class="col-sm-4">
<a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> <div class="col-sm-4">
<a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> <div class="col-sm-4"> <a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> </div> <hr border-top="1px"> <div class="row"> <div class="col-sm-4"> <a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> <div class="col-sm-4"> <a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> <div class="col-sm-4"> <a href="#myModal" data-toggle="modal"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" class="img-responsive" alt="">
</a> </div> </div> </div> </section> <!-- About Section --> <section class="success" id="About"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>About</h2> <hr class="star-light"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <p>An analytical and dedicated individual with strong development and problem-solving skills, seeking an entry-level position in computer programming, database application support, network support department.</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="Contact"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Contact Me</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <div class="contact-form"> <!-- Form --> <form id="contact-us" method="post" action="#"> <!-- Left Inputs --> <div class="col-xs-6 wow animated slideInLeft" data-wow-delay=".5s"> <!-- Name --> <input type="text" name="name" id="name" required="required" class="form" placeholder="Name" /> <!-- Email --> <input type="email" name="mail" id="mail" required="required" class="form" placeholder="Email" /> <!-- Subject --> <input type="text" name="subject" id="subject" required="required" class="form" placeholder="Subject" /> </div> <!-- End Left Inputs --> <!-- Right Inputs --> <div class="col-xs-6 wow animated slideInRight" data-wow-delay=".5s"> <!-- Message --> <textarea name="message" id="message" class="form textarea" placeholder="Message"></textarea> </div> <!-- End Right Inputs --> <!-- Bottom Submit --> <div class="relative fullwidth col-xs-12"> <!-- Send Button --> <button type="submit" id="submit" name="submit" class="form-btn semibold">Send Message</button> </div> <!-- End Bottom Submit --> <!-- Clear --> <div class="clear"></div> </form> <!-- Your Mail Message --> <div class="mail-message-area"> <!-- Message --> <div class="alert gray-bg mail-message not-visible-message"> <strong>Thank You !</strong> Your email has been delivered. </div> </div> </div> </div> </div> </div> <!-- Footer --> <div class="footer">Created by <a href="https://www.linkedin.com/in/anukath/" target=_blank>Anukaran Kathuria</a></div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>

Portfolio - Script Codes CSS Codes

.t { text-decoration: none!important;
}
html,
body,
.view { height: 100%;
}
.view { background: url("https://preview.ibb.co/kb3q35/2k7YG8p.jpg")no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.navbar{ margin:0; background-color:#26272B;
}
#contact{ padding:10px 0 10px; } .contact-text{ margin:45px auto; } .mail-message-area{ width:100%; padding:0 15px; } .mail-message{ width: 100%; background:rgba(255,255,255, 0.8) !important; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s; margin:0 auto; border-radius: 0; } .not-visible-message{ height:0px; opacity: 0; } .visible-message{ height:auto; opacity: 1; margin:25px auto 0; }
/* Input Styles */ .form{ width: 100%; padding: 15px; background:#f8f8f8; border:1px solid rgba(0, 0, 0, 0.075); margin-bottom:25px; color:#727272 !important; font-size:13px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .textarea{ height: 200px; max-height: 200px; max-width: 100%; }
/* Generic Button Styles */ .button{ padding:8px 12px; background:#0A5175; display: block; width:120px; margin:10px 0 0px 0; border-radius:3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-align:center; font-size:0.8em; box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); } .button:hover{ background:#8BC3A3; color:white; }
/* Send Button Styles */ .form-btn{ width:180px; display: block; height: auto; padding:15px; color:#fff; background:#8BC3A3; border:none; border-radius:3px; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; margin:auto; box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); } .form-btn:hover{ background:#111; color: white; border:none; } .form-btn:active{ opacity: 0.9; }
center{ margin-top:330px;
}
input { z-index: 9999;
}
.footer { right: 0; bottom: 0; left: 0; padding: 1rem; background-color:#padding :0 !important272B; text-align: center;
}
Portfolio - Script Codes
Portfolio - Script Codes
Home Page Home
Developer Anukaran Kathuria
Username anukath
Uploaded September 02, 2022
Rating 3
Size 4,126 Kb
Views 26,312
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!

Anukaran Kathuria (anukath) Script Codes
Name
A Pen by Anukaran Kathuria
Consult-PRO
Tribute
Wikipedia Viewer
Random Quote Machine
Weather App
Twitchtv JSON API
Create amazing blog posts 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!