In this article we are going to make a bootstrap Portfolio website using bootstrap5. YOu can easily create a portfolio website using boostrap5 . So without any delay lets get start.
HTML and CSS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nucleus academy portfolio website </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
.bgimage{
height: 100vh;
background: url('images/heroImage.jpg');
background-size: cover;
position: relative;
}
.hero_title{
font-size: 4.5rem;
}
.hero_title{
font-size:2rem;
}
.hero-text{
text-align: center;
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.imageAboutPage{
width: 100%;
}
.servicesText{
height:280px;
cursor: pointer;
}
.servicesIcon{
font-size:36px;
text-align:center;
width:100%;
}
.card-title{
text-align:center;
}
.card:hover .servicesIcon{
color: #FF0000 ;
}
.servicesText:hover{
border:2px solid #FF0000 ;
}
.navbarScroll.navbarDark{
background-color:cyan;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
<div class="container bg-info">
<a href="#" class="navbar navbar-brand">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNucelus" aria-controls="navbarSuportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNucelus">
<ul class="navbar-nav ms-auto">
<li class="nav-item active"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item "><a href="#about" class="nav-link">About</a></li>
<li class="nav-item "><a href="#services" class="nav-link">Services</a></li>
<li class="nav-item "><a href="#portfolio" class="nav-link">Portfolio</a></li>
<li class="nav-item "><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- nav closed -->
<!-- home section started -->
<section class="bgimage" id="home">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
<h2 class="hero_title">
Hi , Its me Nucleus academy
</h2>
<p class="hero_desc">
We are building a portfolio website using bootstrap.
</p>
</div>
</div>
</div>
</section>
<!-- about section -->
<section id="about">
<div class="container mt-4 pt-4">
<h1 class="text-center"> About Me</h1>
<div class="row mt-4">
<div class="col-lg-4">
<img src="images/1.jpg" alt="" class="imageAboutPage">
</div>
<div class="col-lg-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero ab labore mollitia quas, nobis odio deserunt fugit, officia corrupti officiis vel soluta minima id veniam quasi cum et fuga quod non sequi suscipit. Nihil cum voluptates architecto soluta tenetur quia!</p>
<div class="row mt-3">
<div class="col-md-6">
<ul>
<li> Name : nucleus Academy</li>
<li> Adress : Bhojpur , Nepal </li>
<li> Established date : 2012</li>
<li> Market ARea : all nepal</li>
</ul>
</div>
</div>
<div class="row mt-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, illum debitis fuga error provident mollitia minima rem. Perspiciatis impedit illum inventore, sint ut in nostrum nisi! Laudantium fugit facere, eligendi aperiam, dolor recusandae molestiae similique voluptates quasi illo dolores id sequi earum tempore, fuga quo et natus pariatur repellat asperiores.</p>
</div>
</div>
</div>
</section>
<!-- now services section is started -->
<section id="services">
<div class="container">
<h1 class="text-center">Services</h1>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-alarm servicesIcon"></i>
<h4 class="card-title">Basic course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
<!-- second card started -->
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-circle-square servicesIcon"></i>
<h4 class="card-title">Graphic Design course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
<!-- third card selected -->
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-pc-display-horizontal servicesIcon"></i>
<h4 class="card-title">Computer course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
<!-- fourth card started -->
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-pc-display-horizontal servicesIcon"></i>
<h4 class="card-title">Computer course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
<!-- fifth card started -->
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-pc-display-horizontal servicesIcon"></i>
<h4 class="card-title">Computer course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
<!-- sixth card started -->
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="bi bi-pc-display-horizontal servicesIcon"></i>
<h4 class="card-title">Computer course</h4>
<p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum quis consequatur doloremque quod labore quaerat magnam praesentium recusandae illum et ea officia iste, ab. Alias natus, molestias possimus nihil animi! Iusto repellendus eius minus, dignissimos est quos cupiditate obcaecati.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Now portfolio section stared -->
<section id="portfolio">
<div class="container mt-3">
<h1 class="text-center">
Portfolio
</h1>
<div class="row">
<!-- first card<--></--> -->
<div class="col-lg-4 mt-4">
<div class="card">
<img src="images/2.jpg" alt="" class="card-img-top" style="width:100%">
<div class="card-body">
<h4 class="card-title">
First website
</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fuga illo suscipit voluptate sit? Quidem expedita, mollitia tenetur voluptates, error explicabo reprehenderit enim, autem rem iusto molestiae eligendi. Debitis, minima! Beatae provident, nulla, similique, officia veniam quidem eaque maiores doloribus
</p>
<div class="text-center">
<a href="" class="btn btn-danger"> Know more</a>
</div>
</div>
</div>
</div>
<!-- second card stared -->
<div class="col-lg-4 mt-4">
<div class="card">
<img src="images/2.jpg" alt="" class="card-img-top" style="width:100%">
<div class="card-body">
<h4 class="card-title">
First website
</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fuga illo suscipit voluptate sit? Quidem expedita, mollitia tenetur voluptates, error explicabo reprehenderit enim, autem rem iusto molestiae eligendi. Debitis, minima! Beatae provident, nulla, similique, officia veniam quidem eaque maiores doloribus
</p>
<div class="text-center">
<a href="" class="btn btn-danger"> Know more</a>
</div>
</div>
</div>
</div>
<!-- third card started -->
<div class="col-lg-4 mt-4">
<div class="card">
<img src="images/2.jpg" alt="" class="card-img-top" style="width:100%">
<div class="card-body">
<h4 class="card-title">
First website
</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fuga illo suscipit voluptate sit? Quidem expedita, mollitia tenetur voluptates, error explicabo reprehenderit enim, autem rem iusto molestiae eligendi. Debitis, minima! Beatae provident, nulla, similique, officia veniam quidem eaque maiores doloribus
</p>
<div class="text-center">
<a href="" class="btn btn-danger"> Know more</a>
</div>
</div>
</div>
</div>
<!-- fourth div started -->
<div class="col-lg-4 mt-4">
<div class="card">
<img src="images/2.jpg" alt="" class="card-img-top" style="width:100%">
<div class="card-body">
<h4 class="card-title">
First website
</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fuga illo suscipit voluptate sit? Quidem expedita, mollitia tenetur voluptates, error explicabo reprehenderit enim, autem rem iusto molestiae eligendi. Debitis, minima! Beatae provident, nulla, similique, officia veniam quidem eaque maiores doloribus
</p>
<div class="text-center">
<a href="" class="btn btn-danger"> Know more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact section started -->
<section id="contact">
<div class="container mt-3 contactContent">
<h1 class="text-center">Contact Us</h1>
<div class="row mt-4">
<div class="col-lg-6">
<div style="max-width:100%; overflow: hidden; width:px; height:px">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d113591.83188638708!2d86.97399186089977!3d27.164320266949144!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39e8d29440e55a47%3A0x6352ff8a0f521efe!2sBhojpur%2057000!5e0!3m2!1sen!2snp!4v1686046786551!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div class="col-lg-6">
<form action="">
<input type="text" class="form-control form-control-lg" placeholder="Name">
<input type="Email" class="form-control form-control-lg" placeholder="Put your Email">
<input type="text" class="form-control form-control-lg" placeholder="Subejct">
<div class="mb-3 mt-3">
<textarea class="form-control" name="" id="" cols="30" rows="10" placeholder="Give your feedback"></textarea>
</div>
</form>
<div>
</div>
</div>
</div>
</section>
javascript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script>
const header = document.querySelector('.navbar');
window.onscroll = function(){
var top = window.scrollY;
if(top>=100){
header.classList.add("navbarDark");
}
else
{
header.classList.remove('navbarDark');
}
}
</script>
</script>
</body>
</html>
Post a Comment