How To Create A Project Section Using 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
- 00:00 - 01:50 min : Intro
- 01:50 - 18.00 min: Create Project Section for your website Using HTML, CSS, and JavaScript
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 class="portfolio-box app" data-lightbox="work" href="images/b-1.jpg"> <img alt="" src="images/b-1.jpg"> </a> <!--2------------> <a class="portfolio-box app" data-lightbox="work" href="images/b-2.jpg"> <img alt="" src="images/b-2.jpg"> </a> <!--3------------> <a class="portfolio-box appdesign" data-lightbox="work" href="images/b-3.jpg"> <img alt="" src="images/b-3.jpg"> </a> <!--4------------> <a class="portfolio-box web" data-lightbox="work" href="images/b-4.jpg"> <img alt="" src="images/b-4.jpg"> </a> <!--5------------> <a class="portfolio-box web" data-lightbox="work" href="images/b-5.jpg"> <img alt="" src="images/b-5.jpg"> </a> <!--6------------> <a class="portfolio-box ai" data-lightbox="work" href="images/b-6.jpg"> <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;
}
}
You just provided html and css code, where is the jsquery code..
ReplyDeleteThe page is looking nice but it is not responsive