التخطي إلى المحتوى الرئيسي

Bootstrap Portfolio Website Source Code

 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. 

Bootstrap Portfolio Website Source Code


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>

التسميات:

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

Vanrakshak Question Answer Download Part 32

 Are you looking for a vanrakshak PDF file ? If you are also searching for a Vanrakshak PDF file then this article will provide you the vanrakshak PDF file.  I am a Nepali Youtuber who is providing Vanrakshak related content on my youtube channel from two years ago.  You can easily download your files from the download button :  Read my Other articles :  convert your date from here :  hostgator hosting review Ban Rakshak Question Answer Part 29 Ban Rakshak Question Answer PDF Download - Part 28 Vanrakshak Question Answer PDF Download
تعليق واحد
To Read more.............. »

Ban Rakshak Model Question PDF | vanrakshak book pdf in nepali

Recently the Pradesh Loksewa aayog Kailali published a notice related to Ban rakshak (Forest Guard). Many Nepali candidates also applying for those jobs positions. Especially this job vacancy is for those people who are interested in the forest.  Wildlife and plats lovers can apply for this vanarakshak vacancy. There are many types of quotas available for this vacancy. Such as Khulla, Adibasi/Janajati , Madhesi , Mahila and Apanga. You can choose any of them. Duties of Vanrakshak in Nepal  Take Care of plants  Take Care of Animals  Basically, there are two duties of Vanrakshak. You should take care of plants and Animals.  You should go in the team while going in the jungle. You should use an elephant or vehicle when going to the jungle.  Vanrakshak Salary in Nepal It depends on what types of Facilities are provided by Nepal Government. You can get the festival bonus, Uniform expenses, and Dearness allowance. If you calculated all the facilities then you wil...
إرسال تعليق
To Read more.............. »

Rajkumar Thapa Magar Biography , Age , Height , Girlfriend

 Raj Kumar Thapa Magar is one of the most popular YouTubers in Nepal. He is doing content creation in managed social media. He is uploading his content on his Youtube channel and Facebook page regularly.  He was a shy guy in starting period. He started his vlog using his cycle. After getting up to 50k Youtube subscribers then he gets more confidence. He was really passionate about cycling. Now he is getting more popular.  Youtube Career  He started his career at an early age. He created his channel on Sep 21, 2017. But he uploaded his first video on Feb 18, 2018.  His family was not supportive in his starting phase. Now his mummy also giving full support after achieving success on his youtube channel. He has almost 850k Youtube subscribers on his youtube channel. He has a 15 to 20-age-grouped Youtube subscriber base.  His childhood  According to Rajkumar he always loves to do cycling. For a few months, he was passionate about bodybuilding also. He...
إرسال تعليق
To Read more.............. »