Portfolio Website Using Html and Css | portfolio website html css javascript

 

# To create Portfolio Website Using Html and Css | portfolio website html css javascript Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create Portfolio Website Using Html and Css | portfolio website html css javascript Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Portfolio Website:

<div class="profile_area">
   <div class="flex_dark_lite" id="dark_mode_lite"> </div>
   <div class="profile_box">
      <div class="profile_img">
         <img src="./img/profile circle.png" alt="webfoxcode">
         <div class="img_prof"></div>
      </div>
      <div class="profile_name">
         <h2>code_web_4u</h2>
         <p>Web Developer</p>
      </div>
      <div class="social_box">
         <a href="https://t.me/nxprime_movie"><i class="fi fi-brands-telegram"></i></a>
         <a href="https://github.com/CodMark/"><i class="fi fi-brands-github"></i></a>
         <a href="#"><i class="fi fi-brands-discord"></i></a>
      </div>
   </div>

   <div class="grup_box_info">
      <div class="box_info"><b>5</b><br> Years of Work</div>
      <div class="box_info"><b>+322</b> <br>Completed Projects</div>
      <div class="box_info"><b>+23K</b> <br>Monthly Visitor</div>
   </div>

   <div class="profile_buttons">
      <button onclick="window.open(`https://www.instagram.com/code_web_4u/`)">Follow Me <i
            class="fi fi-rr-following"></i></button>
      <a href="#"><i class="fi fi-brands-whatsapp"></i></a>
      <a href="https://www.instagram.com/code_web_4u/"><i class="fi fi-brands-instagram"></i></a>
   </div>

   <div class="filters_area">
      <div class="filters_section">
         <div class="project active" id="project" onclick="project()">Project</div>
         <div class="project" id="skills" onclick="skills()">Skills</div>
      </div>
      <div class="capture_photo_box active_box" id="profile_box_id">
         <div class="f_collom">
            <div class="box_img_post">
               <img src="./img/search box animation.png" alt="code_web_4u">
               <div class="box_pupo">
                  <div class="top_info_dow">
                     <h3 style="color: #000">search box animation</h3>
                     <p>HTML, CSS, Javascript</p>
                     <div class="download_live">
                        <a href="https://linkpays.in/kqNaY0Y" style="box-shadow: 0px 0px 20px #ff585442;" target="_blank"><i class="fi fi-rr-download"></i></a>
                        <a href="https://www.instagram.com/p/Cv3qOIcrb7H/" style=" background: #000;"><i class="fi fi-rr-browser" style="margin-right: 8px;"></i> Live Demo</a>
                     </div>
                  </div>
               </div>
            </div>

             <div class="box_img_post">
               <img src="./img/2.png" alt="code_web_4u">
               <div class="box_pupo">
                  <div class="top_info_dow">
                     <h3 style="color: #000">Border Animation CSS</h3>
                     <p>HTML, CSS</p>
                     <div class="download_live">
                        <a href="https://linkpays.in/ep28" style="box-shadow: 0px 0px 20px #ff585442;" target="_blank"><i class="fi fi-rr-download"></i></a>
                        <a href="https://www.instagram.com/p/Cv4FNyXL77Z/" style=" background: #000;"><i class="fi fi-rr-browser" style="margin-right: 8px;"></i> Live Demo</a>
                     </div>
                  </div>
               </div>
            </div>

            <div class="box_img_post">
               <img src="./img/4.png" alt="code_web_4u">
               <div class="box_pupo">
                  <div class="top_info_dow">
                     <h3 style="color: #000">Navigation bar menu</h3>
                     <p>HTML, CSS, Javascript</p>
                     <div class="download_live">
                        <a href="https://linkpays.in/E8Y7FJV" style="box-shadow: 0px 0px 20px #ff585442;" target="_blank"><i class="fi fi-rr-download"></i></a>
                        <a href="https://www.instagram.com/p/Cv4DgZ1rNmO/" style=" background: #000;"><i class="fi fi-rr-browser" style="margin-right: 8px;"></i> Live Demo</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <div class="skills_box" id="skills_box_id">
         <div class="box_skills">
            <i class="fi fi-brands-html5"></i>
            <div class="prog_skills">
               <p>HTML5 - <b>90%</b></p>
               <div class="prog_box pro1"></div>
            </div>
         </div>
         <div class="box_skills">
            <i class="fi fi-brands-css3-alt"></i>
            <div class="prog_skills">
               <p>CSS, SCSS - <b>60%</b></p>
               <div class="prog_box pro2"></div>
            </div>
         </div>
         <div class="box_skills">
            <i class="fi fi-brands-js"></i>
            <div class="prog_skills">
               <p>Javascript - <b>80%</b></p>
               <div class="prog_box pro3"></div>
            </div>
         </div>
      </div>
   </div>
   <br>
</div>
            

2. Next, add some HTML Icon Link to create a Portfolio Website:

<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-brands/css/uicons-brands.css'>

3. Next, add some scrollreveal Js Link to create a Portfolio Website Animation:

<script src="https://codmark.github.io/slideimg.github.io/scrollreveal.min.js"></script>

4. Next, add some CSS to create a Portfolio Website and position the container in the center:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --hue: 207;
   --sat: 90%;
   --lig: 61%;
   /* -4% */
   --title-color: hsl(var(--hue), 12%, 15%);
   --text-color: hsl(var(--hue), 12%, 45%);
   --text-color-light: hsl(var(--hue), 8%, 75%);
   --text-color-lighten: hsl(var(--hue), 8%, 92%);
   --body-color: hsl(var(--hue), 100%, 99%);
   --container-color: #fff;

   /*========== Font and typography ==========*/
   /*.5rem = 8px | 1rem = 16px ...*/
   --body-font: 'Poppins', sans-serif;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1rem;
   --normal-font-size: .938rem;
   --small-font-size: .813rem;
   --smaller-font-size: .75rem;
}

@media screen and (min-width: 968px) {
   :root {
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smaller-font-size: .813rem;
   }
}


body {
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   background-color: var(--body-color);
   color: var(--text-color);
   transition: .3s all;
   display: flex;
   justify-content: center;
}

body.dark-theme {
   --title-color: hsl(var(--hue), 12%, 95%);
   --text-color: hsl(var(--hue), 12%, 75%);
   --body-color: hsl(var(--hue), 40%, 8%);
   --text-color-light: hsl(var(--hue), 24%, 12%);
   --text-color-lighten: hsl(var(--hue), 10%, 1%);
   --container-color: hsl(var(--hue), 24%, 12%);
}

h1,
h2,
h3,
b {
   color: var(--title-color);
   font-weight: 600;
}

a {
   text-decoration: none;
}

i {
   color: var(--title-color);
}

.active_box {
   display: flex !important;
}

.profile_area {
   display: grid;
   gap: 1.5rem;
   max-width: 968px;
   height: 100%;
   justify-content: center;
   padding-top: 45px;
}

.profile_area .flex_dark_lite.litemod {
   background: url('../img/brightness.png') no-repeat;
   background-position: center;
   background-size: cover;
}

.profile_area .flex_dark_lite {
   width: 25px;
   height: 25px;
   position: absolute;
   right: 31px;
   top: 41px;
   cursor: pointer;
   background: url('../img/moon-stars.png') no-repeat;
   background-position: center;
   background-size: cover;
   z-index: 999;
}

.profile_area .profile_box {
   width: 100%;
   height: fit-content;
}

.profile_area .profile_box .profile_img {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.profile_area .profile_box .profile_img img {
   width: 7rem;
   height: 7rem;
}

.profile_area .profile_box .profile_img .img_prof {
   width: 6rem;
   height: 6rem;
   background: url('../img/2cd10d09ff5c9720f8ad26d0d3d9e9c7.png') no-repeat;
   background-position: center;
   background-size: 9rem;
   position: absolute;
   border-radius: 50%;
   box-shadow: 0px 0px 20px #ff4d0025;
}

.profile_area .profile_box .profile_name {
   text-align: center;
   margin-top: 8px;
}

.profile_area .profile_box .social_box {
   margin-top: 10px;
   display: flex;
   gap: 1rem;
   justify-content: center;
}

.profile_area .profile_box .social_box i {
   font-size: 18px;
}

.profile_area .profile_box .social_box i:hover {
   color: #ff5854;
}

.profile_area .grup_box_info {
   display: flex;
   justify-content: center;
   gap: 1rem;
   text-align: center;
}

.profile_area .grup_box_info .box_info {
   width: 5rem;
}

.profile_area .profile_buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.profile_area .profile_buttons button {
   border: none;
   padding: 16px;
   font-size: var(--normal-font-size);
   letter-spacing: 1px;
   border-radius: 10px;
   background: #ff5854;
   color: white;
   font-weight: 400;
   box-shadow: 0px 0px 20px #ff585442;
   cursor: pointer;
}

.profile_area .profile_buttons button i {
   color: white;
   font-size: 16px;
}

.profile_area .profile_buttons a {
   padding: 12px 17px 9px;
   background: var(--text-color-lighten);
   border-radius: 10px;
}

.profile_area .profile_buttons a:hover {
   background: var(--text-color-light);
}

.profile_area .filters_area {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
}

.profile_area .filters_area .filters_section {
   display: flex;
   background-color: var(--text-color-lighten);
   padding: 6px;
   border-radius: 10px;
   width: fit-content;
   gap: 11px;
}

.profile_area .filters_area .filters_section .project {
   padding: 12px 56px;
   border-radius: 10px;
   color: var(--text-color);
   transition: 0.2s all;
   cursor: pointer;
}

.profile_area .filters_area .filters_section .project:hover {
   background: var(--container-color);

}

.active {
   background: var(--container-color);
}

.profile_area .filters_area .capture_photo_box {
   width: 100%;
   padding: 12px;
   display: none;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
}

.profile_area .filters_area .capture_photo_box .f_collom {
   width: 100%;
   height: auto;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post {
   position: relative;
}

.profile_area .filters_area .capture_photo_box .f_collom img {
   height: auto;
   width: 292px;
   object-fit: cover;
   border-radius: 10px;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post:hover .box_pupo{
   opacity: 1;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo {
   position: absolute;
   bottom: 13px;
   width: auto;
   height: 7rem;
   left: 6px;
   right: 6px;
   opacity: 0;
   transition: opacity 0.2s;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo .top_info_dow {
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 3;
   width: 100%;
   height: 100%;
   background-color: white;
   border-radius: 10px;
   position: relative;
   box-shadow: 0px 0px 20px #00000012;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo::after {
   content: "";
   position: absolute;
   top: -23px;
   width: auto;
   height: 2rem;
   background-color: white;
   left: 11px;
   right: 11px;
   border-radius: 10px;
   z-index: 1;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo .top_info_dow .download_live {
   width: 100%;
   display: flex;
   gap: 1rem;
   justify-content: center;
}

.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo .top_info_dow .download_live a {
   background: #ff5854;
   padding: 9px 12px 7px;
   border-radius: 7px;
   margin-top: 5px;
   color: white;
   text-align: center;
   display: flex;
}
.profile_area .filters_area .capture_photo_box .f_collom .box_img_post .box_pupo .top_info_dow .download_live a i{
   color: white;
   font-size: 18px;
}

.profile_area .filters_area .skills_box {
   display: none;
   width: 100%;
   justify-content: center;
   gap: 1rem;
   flex-direction: column;
   padding-left: 12px;
   padding-right: 12px;
   margin-top: 12px;
}

.profile_area .filters_area .skills_box .box_skills {
   width: 100%;
   height: 4rem;
   background: var(--text-color-lighten);
   padding: 12px;
   display: flex;
   flex-direction: row;
   gap: 1rem;
   align-items: center;
   border-radius: 10px;
}

.profile_area .filters_area .skills_box .box_skills i {
   font-size: 29px;
   height: 33px;
   width: 29px;
}

.profile_area .filters_area .skills_box .box_skills .prog_skills {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box {
   width: 15rem;
   height: 0.5rem;
   background: var(--text-color-light);
   position: relative;
   border-radius: 10px;
   overflow: hidden;
}


.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box.pro1::after,
.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box.pro2::after,
.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box.pro3::after {
   content: "";
   position: absolute;
   left: 0;
   width: 90%;
   height: 0.5rem;
   background: var(--text-color);
   border-radius: 10px;
}

.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box.pro2::after {
   width: 60% !important;
}

.profile_area .filters_area .skills_box .box_skills .prog_skills .prog_box.pro3::after {
   width: 80% !important;
}



/* @media (max-width: 543px) {

   .profile_area .filters_area .capture_photo_box .f_collom img{
      width: 221px !important;
   }
} */

@media (max-width: 473px) {
   .f_collom{
      gap: 19px !important;
   }
   .profile_area .filters_area .capture_photo_box .f_collom div {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .profile_area .filters_area .capture_photo_box .f_collom img {
      width: 90% !important;
   }
   .box_pupo{
      bottom: 0 !important;
   }
}
            

5. Use JavaScript to create a Portfolio Website element inside the container:

/*=============== DARK LIGHT THEME ===============*/ 
const themeButton = document.getElementById('dark_mode_lite')
const darkTheme = 'dark-theme'
const iconTheme = 'litemod'

// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'flex_dark_lite' : 'litemod'

// We validate if the user previously chose a topic
if (selectedTheme) {
  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'flex_dark_lite' ? 'add' : 'remove'](iconTheme)
}

// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
    // Add or remove the dark / icon theme
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    // We save the theme and the current icon that the user chose
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

const skills = ()=>{
   document.getElementById('skills').classList.add("active");
   document.getElementById('project').classList.remove("active");
   document.getElementById('skills_box_id').classList.add("active_box");
   document.getElementById('profile_box_id').classList.remove("active_box");
}
const project = ()=>{
   document.getElementById('skills').classList.remove("active");
   document.getElementById('project').classList.add("active");
   document.getElementById('skills_box_id').classList.remove("active_box");
   document.getElementById('profile_box_id').classList.add("active_box");
}

// animation website add

const scro = ScrollReveal({
   origin: 'top',
   distance: '60px',
   duration: 2500,
   delay: 400
})

scro.reveal(`.flex_dark_lite`)
scro.reveal(`.profile_img`)
scro.reveal(`.profile_name`, {delay: 500})
scro.reveal(`.social_box`, {delay: 600})
scro.reveal(`.grup_box_info`, {interval: 100, delay: 700})
scro.reveal(`.profile_buttons`, {delay: 800})
scro.reveal(`.filters_section`, {delay: 900})
scro.reveal(`.capture_photo_box`, {delay: 1000})
            

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Portfolio Website html css |Portfolio Website in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.