How To Create A Project Section Using HTML CSS And JavaScript

byPosted at
How To Create A Project Section Using HTML CSS And JavaScript
Project Section HTML, CSS, And JavaScript

Learn how to make a Project Section for your website using HTML, CSS, and JavaScript. Easy way to create Project Section using HTML, CSS, JavaScript. I also provide you HTML, CSS, And JavaScript Code which helps you to understand this Tutorial.

How to make a Project Section using HTML, CSS, and JavaScript

  1. 00:00 - 01:50 min : Intro
  2. 01:50 - 18.00 min: Create Project Section for your website Using HTML, CSS, and JavaScript


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


<html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Side Login and Registration Form Bar</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

➤Project Section HTML Code have given below.


  <!--doctype html-->
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!--title---------------------->
<title>Portfolio Section</title>

<!--Stylesheet----------------------------------->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<!--Light-Box-css-------------------------------->
<link rel="stylesheet" href="css/lightbox.min.css">

<!--fav-icon------------------------------------->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--poppins-font-family-------------------------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


</head>

<body>


    <!--===Project-Section======================================================-->
  <section id="project">

    <!--heading--------------->
    <div class="project-heading">
      <span>Let's See My Work</span>
      <h3>MY PROJECTS</h3>
    </div>


    <!--filter--------->
    <ul class="portfolio-filter">
      <li class="list portfolio-filter-active" data-filter="all">All</li>
      <li class="list" data-filter="app">Application</li>
      <li class="list" data-filter="appdesign">App Design</li>
      <li class="list" data-filter="web">Website Designs</li>
      <li class="list" data-filter="ai">AI</li>
  </ul>


  <!--container--------->
  <div class="portfolio-container">

    <!--1------------>
    <a href="images/b-1.jpg" class="portfolio-box app" data-lightbox="work">
      <img alt="" src="images/b-1.jpg">
    </a>

    <!--2------------>
    <a href="images/b-2.jpg" class="portfolio-box app" data-lightbox="work">
      <img alt="" src="images/b-2.jpg">
    </a>

    <!--3------------>
    <a href="images/b-3.jpg" class="portfolio-box appdesign" data-lightbox="work">
      <img alt="" src="images/b-3.jpg">
    </a>

    <!--4------------>
    <a href="images/b-4.jpg" class="portfolio-box web" data-lightbox="work">
      <img alt="" src="images/b-4.jpg">
    </a>

    <!--5------------>
    <a href="images/b-5.jpg" class="portfolio-box web" data-lightbox="work">
      <img alt="" src="images/b-5.jpg">
    </a>

    <!--6------------>
    <a href="images/b-6.jpg" class="portfolio-box ai" data-lightbox="work">
      <img alt="" src="images/b-6.jpg">
    </a>

  </div>


  </section>




  <!--js---------------------------------->
  <script src="js/JQuery.js"></script>
  <script src="js/lightbox.min.js"></script>



  <script>


    /*blog-filter-menu----------------------------*/
    $(document).on('click','.portfolio-filter li',function(){
            $(this).addClass('portfolio-filter-active').siblings().removeClass('portfolio-filter-active')
        });

        
     /*portfolio-filter---------------------------------*/
     $(document).ready(function(){
            $('.list').click(function(){
                const value = $(this).attr('data-filter');
                if(value == 'all'){
                    $('.portfolio-box').show('1000');
                }
                else{
                    $('.portfolio-box').not('.'+value).hide('1000');
                    $('.portfolio-box').filter('.'+value).show('1000');
                }
            });
        });



  </script>
</body>

</html>

➤project Section CSS Code is have given below.


*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
}
#project{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px 0px;
}
.project-heading{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}
.project-heading h3{
    font-size: 2.7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.project-heading span{
    color: #f33c3c;
}
.portfolio-filter{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border: 1px solid rgb(237, 237, 237,0.6);
    flex-wrap: wrap;
    margin: 20px;
}
.portfolio-filter li{
    margin: 10px;
    padding: 5px 20px;
    color: #9b9b9b;
    font-size: 1rem;
    letter-spacing: 0.5px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.portfolio-filter-active{
    background-color: #f0f0f0;
    color: #272727 !important;
}
.portfolio-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
}
.portfolio-box{
    width:330px;
    padding: 15px;
    border: 1px solid #eeeeee;
    margin: 20px;
   
}

.portfolio-box img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

@media(max-width:740px){
.portfolio-filter{
    background-color: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.portfolio-filter-active{
    background-color: #ffffff;
    border: 1px solid rgb(219, 219, 219);
}
.portfolio-box{
    width:80%;
}
}
@media(max-width:550px){

    .project-heading h3
    {
        font-size: 1.8rem;
    }
}





How To Dowload Files
Share
1 comment Labels, ,

Comments

  1. CoderJanuary 13, 2022 at 9:02 AM

    You just provided html and css code, where is the jsquery code..
    The page is looking nice but it is not responsive

    ReplyDelete

Archive

Contact Form

Send