Portfolio page
How do I make an portfolio page?
What is a portfolio page? How do you make a portfolio page? This script and codes were developed by Bhavya Jain on 25 August 2022, Thursday.
Portfolio page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio page</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<body class="textf">
<div> <nav clas="nav navbar fixed-top navbar-full"> <div class="nav navbar-inverse"> <ul class="nav navbar-nav sze" <li> <a href="#" class="navbar-brand navbar-left">Page Title</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Projects</a> </li> <li> <a href="#">Contact</a> </li> </div> </nav>
</div>
<!--carousel-->
<div id="mycarousel" class="carousel slide" data-ride="carousel"> <!--wrapper for slides--> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://unsplash.com/photos/MsJPXmHQIs8/download?force=true" class="imgsize"> </div> <div class="item"> <img src="http://unsplash.com/photos/p0rT3VcWRvQ/download?force=true" class="imgsize"> </div> <div class="item "> <img src="http://unsplash.com/photos/boLgiM0qwkg/download?force=true" class="imgsize"> </div> <div class="item"> <img src="http://unsplash.com/photos/p0rT3VcWRvQ/download?force=true" class="imgsize"> </div> </div> <!--indicators--> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> </ol> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div>
<br>
<section id="about" class="container"> <h2 class="text-center">About</h2> <hr> <br> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <p class="text-center">Hi,my name is Bhavya,and I am a developer from Bombay.I love crafting beautiful websites in HTML,CSS and jQuery.Want professional looking websites,<a href="#contact">contact me</a>. </div> </div>
</section> <br> <section id="projects" class="container1"> <h2 class="text-center">Projects</h2> <hr> <div class="row"> <div class="col-sm-4 text-center pr-img"> <h3>Tribute Page</h3> <a href="http://codepen.io/Bhavya_j/full/oZqVKR/"> <img src="http://i.lv3.hbo.com/assets/images/series/entourage/character/vincent-chase-1920.jpg" class="sml-img"</a></div> <div class="col-sm-4 text-center"> <h3>placeholder</h3> </div> <div class="col-sm-4 text-center"> <h3>placeholder</h3> </div> </div>
</section> <br> <section id="contact" class="container2 text-center"> <h2 class="text-center">Contact</h2> <hr> <br> <a class="h1" href="https://www.instagram.com/bhavya_j/"><i class="fa fa-instagram"></i></a> <a class="h1" href="https://twitter.com/?lang=en"><i class="fa fa-twitter"></i></a> <a class="h1"href="https://github.com/"><i class="fa fa-github"></i></a> </section> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</body>
</html>
Portfolio page - Script Codes CSS Codes
.textf{ font-family:oswald;
}
.navbar-inverse a:hover{ text-decoration:none; }
.sze a{ font-size:25px;
}
.navbar-right a{font-size:20px;}
.imgsize{ height:900px; padding:-30px;
}
.sml-img{ height:200px; width:350px; border-radius:2%;
}
.container{ height:210px; width:100%;
}
.container2{ height:300px; width:100%; background-color:#D1EEF2; padding:10px;
}
.container1{ padding:30px;
}
.h1{ margin:10px; padding:10px; font-color:white;
}
hr{ width:30%;
}
.row p{font-size:20px;}
.pr-img a:hover{
}
Developer | Bhavya Jain |
Username | Bhavya_j |
Uploaded | August 25, 2022 |
Rating | 3 |
Size | 2,804 Kb |
Views | 26,312 |
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 |
Portfoilio | 3,248 Kb |
Tribute to Vincent Chase | 4,625 Kb |
A Pen by Bhavya Jain | 2,662 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 |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Tooltip in table | Roine | 3,713 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 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!