How to Create a Responsive Personal Portfolio Website HTML
Learn How To Make Responsive Personal Portfolio Website Only Using HTML and CSS. Easy Way To Create Portfolio Website in HTML and CSS. You will create this website by watching my video or follow those steps, which I have given below.
How to Make a Responsive Personal Portfolio Website Only using HTML and CSS
- 0.0 - 2.0 min : Intro
- 1.0 - 54.0 min: Create a Responsive Personal Portfolio Website Only using HTML and CSS
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.
Personal Website
You can easily make a personal Portfolio Website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make the Personal Portfolio Website like that for your website. So I recommended you watch the Personal Portfolio Website Section video Tutorial on how can I make this Only using HTML and CSS. This Personal Portfolio Website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Personal Portfolio Website video tutorial on how I make this Personal Portfolio Website. you can use this on your website without any copyright.
Navigation
➤ Navigation HTML Code have given below.
➤ Navigation CSS Code have given below.
@charset "utf-8"; /* CSS Document */ body{ margin:0px; padding: 0px; font-family: poppins; } *{ box-sizing:border-box; scroll-behavior: smooth; } ul{ list-style:none; } a{ text-decoration:none; } #main{ width:100%; height:100vh; position: relative; } nav{ display: flex; justify-content: space-around; align-items: center; box-shadow: 5px 10px 30px rgba(0,0,0,0.02); position: fixed; left: 0; top: 0; width:100%; z-index: 1; background-color: #FFFFFF; } .logo img{ height:45px; } nav ul{ display: flex; } nav ul li a{ height:40px; line-height: 43px; margin: 3px; padding: 0px 22px; display: flex; font-size: 0.8rem; text-transform: uppercase; font-weight: 500; color:#585b5b; letter-spacing: 1px; } .hey{ color:#39bfbd; font-weight: 500; font-size: 0.9rem; border-bottom: 2px solid #40c6c4; } nav ul li a:hover{ background-color: #2adabc; color:#FFFFFF; box-shadow: 5px 10px 30px rgba(64,198,196,0.3); transition: all ease 0.2s; }
Content
➤ Content HTML Code have given below.
Hello, I am Smith
Hey, In this video i am gonna show you how to make a responisve personal website only using HTML and CSS.
See My Portfolio
➤ Content CSS Code have given below.
.model img{ width:100%; height: 100%; object-fit: contain; } .model{ width:500px; height: 500px; } .content{ width:90%; display: flex; justify-content: space-around; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .main-text{ width:500px; } .main-text h1{ font-size: 3.5rem; color:#1c3548; margin:0px 0px 10px 0px; line-height: 60px; } .main-text p{ color:#747474; } .portfolio-btn{ width:190px; height: 44px; display: flex; justify-content: center; align-items: center; color:#FFFFFF; background-color: #1db096; border-radius: 20px; box-shadow: 4px 10px 30px rgba(24,139,119,0.2); } .portfolio-btn:hover{ background-color: #23cdaf; transition: all ease 0.2s; }
Skill
➤ Skills HTML Code have given below.
My SkillsMy Experties
Hyper Text Markup Language(HTML)I have 3 years experience in HTML and i completed 100+ HTML project.
Cascading Style Sheets(CSS)I have 3 years experience in CSS and i completed 100+ CSS project.
JavaScript(Js)I have 3 years experience in JavaScript and i completed 100+ Js project.
➤ Skills CSS Code have given below.
#skills{ display: flex; justify-content: space-around; align-items: center; width:90%; margin:auto auto 50px auto; } .skill-text{ width:400px; } .skill-img{ width:600px; height: 600px; } .skill-img img{ width:100%; height: 100%; object-fit: contain; } .skill-heading span{ color:#36b7b5; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; } .skill-heading h2{ color: #1c3548; font-size: 3.3rem; margin:0px; font-weight: 400; letter-spacing: 1px; } .s-box-container{ margin-top: 30px; } .skill-box{ display: flex; margin: 25px 0px; } .s-box-icon{ margin-right:12px; } .s-box-icon i{ width:40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-size: 1.1rem; } .s-box-text strong{ color:#1c3548; margin: 0px; font-size: 0.9rem; font-weight: 600; } .s-box-text p{ color:#747474; font-size: 0.9rem; } .fa-html5{ color:#e06061; } .fa-css3-alt{ color:#416cdf; } .fa-js-square{ color:#f98231; }
Recent
➤ Recent Section HTML Code have given below.
RecentRecent Doing Project Design
View Design
➤ Recent Section CSS Code have given below.
#recent{ display: flex; justify-content: center; align-items: center; margin:30px 0px; flex-direction: column; } .recent-heading span, .client-heading span{ color:#36b7b5; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; font-size: 1.1rem; } .recent-heading h3, .client-heading h3, #contact h3{ color:#1c3548; font-size: 3rem; margin: 0px; font-weight: 400; letter-spacing: 1px; } .recent-img{ margin:0px 40px; } .recent-img img{ width:100%; height: 100%; } .recent-btn{ width:190px; height: 44px; display: flex; justify-content: center; align-items: center; color:#FFFFFF; background-color: #1db096; border-radius: 20px; box-shadow: 4px 10px 30px rgba(24,139,119,0.2); } .recent-btn:hover{ background-color: #23cdaf; transition: all ease 0.2s; } .recent-btn{ width:190px; margin-top: -20px; }
Client
➤ Client Section HTML Code have given below.
CommentsClient's Say
If you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph.
Read MoreIf you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph.
Read MoreIf you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph.
Read More
➤ Font Awesome Link
➤ Client Section CSS Code have given below.
#client{ width:100%; border-top: 1px solid rgba(58,58,58,0.03); border-bottom: 1px solid rgba(58,58,58,0.03); padding: 50px 0px; background-image: url("../images/bg.png"); background-position: center; background-size: 1000px; } .client-heading{ display: flex; justify-content: center; align-items: center; flex-direction: column; } .c-box-container{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin:20px 0px; } .client-box { width:310px; height: 350px; background-color: #FFFFFF; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px; margin: 20px; box-shadow: 5px 10px 30px rgba(0,0,0,0.08); } .client-box img{ width:90px; height: 90px; border-radius: 50%; object-fit: cover; } .client-box strong{ color:#1c3548; margin:0px; font-size: 1.1rem; font-weight: 600; margin-top:10px; } .star{ display: flex; margin: 10px 0px 10px 0px; } .star i{ color:#ff9529; } .client-box p{ color:#747474; font-size: 0.9rem; margin:0px; text-align: center; display: block; display: -webkit-box; max-width: 80%; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis; } .client-box a{ width:190px; height: 44px; display: flex; justify-content: center; align-items: center; color:#FFFFFF; background-color: #1db096; border-radius: 20px; box-shadow: 4px 10px 30px rgba(24,139,119,0.2); } .client-box a{ width:140px; margin-top: 20px; border-radius: 0px; } .client-box:hover{ transform: translateY(-10px); box-shadow: 5px 10px 30px rgba(0,0,0,0.1); background-color: #23cdaf; transition: all ease 0.2s; }
Contact and Footer
➤ Contact and Footer Section HTML Code have given below.
Get The Best Project Estimation
➤ Contact and Footer Section CSS Code is have given below.
#contact{ display:flex; flex-direction: column; justify-content: center; align-items: center; margin:40px 0px; } #contact h3{ font-size:2.5rem; margin:20px; } #contact img{ height:300px; } .contact-input{ width:400px; height:50px; background-color:#FFFFFF; display:flex; justify-content: center; border-radius: 50px; box-shadow: 2px 2px 30px rgba(0,0,0,0.15); } .contact-input input{ width:100%; background-color: transparent; border:none; outline: none; text-align: center; color:#242425; } .contact-input a{ width:200px; height:35px; background-color:#1db096; color:#FFFFFF; display: flex; font-size: 0.9rem; justify-content: center; align-items: center; margin: auto 10px; border-radius: 20px; font-weight: 500; } footer{ display:flex; justify-content: space-around; border-top: 1px solid rgba(232,232,232,0.5); background-color:#FFFFFF; } footer p{ margin:15px 0px; color:#5f5f5f; font-size: 0.9rem; }
Make Responsive
nav .menu-btn, .menu-icon{ display:none; } @media(max-width:1140px){ .content{ width:100%; } .model{ width:400px; height: 400px; } .main-text,.model{ margin:10px; } .main-text h1{ font-size:3rem; } .skill-img{ width:400px; height: 400px; } .client-box{ flex-grow:0.5; } } @media(max-width:900px){ .menu-icon{ display:block;} nav{ justify-content: space-between; height: 65px; padding: 0px 30px; } .logo img{ height:35px; } .menu{ display:none; position:absolute; top:65px; left:0px; background-color:#FFFFFF; border-bottom:4px solid #1db096; width:100%; padding:0px; margin:0px; } .menu li{ width:100%; } nav .menu li a{ width:100%; height:40px; justify-content: center; align-items: center; margin:0px; padding: 25px; border:1px solid rgba(38,38,38,0.03); } nav .menu-icon{ cursor:pointer; float:right; padding:28px 20px; position:relative; user-select: none; } nav .menu-icon .nav-icon{ background-color:#333333; display:block; height:2px; position:relative; transition: background 0.2s ease-out; width:18px; } nav .menu-icon .nav-icon:before, nav .menu-icon .nav-icon:after{ background:#333; content:''; display:block; height:100%; position:absolute; transition:all ease-out 0.2s; width:100%; } nav .menu-icon .nav-icon:before{ top:5px; } nav .menu-icon .nav-icon:after{ top:-5px; } nav .menu-btn:checked ~ .menu-icon .nav-icon{ background:transparent; } nav .menu-btn:checked ~ .menu-icon .nav-icon:before{ transform: rotate(-45deg); top:0; } nav .menu-btn:checked ~ .menu-icon .nav-icon:after{ transform: rotate(45deg); top:0; } nav .menu-btn{ display:none; } nav .menu-btn:checked ~ .menu{ display:block; } #skills{ width:100%; justify-content: space-between; padding-left: 40px; } .skill-text{ width:400px; } .skill-img{ width:40%; height:300px; } .skill-img img{ object-fit: cover; object-position: left; } .recent-heading h3, .client-heading h3, #contact h3{ font-size:2.2rem; text-align:center; } .recent-heading{ text-align:center; padding:0px 15px; } } @media(max-width:720px){ .model{ display:none; } .main-text{ width:70%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } #contact img{ height:200px; } footer{ justify-content: center; padding:10px 20px; } footer p{ text-align: center; } .recent-btn{ margin:0px; } } @media(max-width:530px){ .contact-input{ width:90%; } .skill-img{ display:none; } .skill-text{ width:85%; } #skills{ margin:0px; } }
Download file is not working. Please provide us any alternative option.
ReplyDeleteThis comment has been removed by the author.
DeleteSecond images link download btn add in this post please check
ReplyDeleteimg file extract kora jacce na... Bad Rar Archive show korse
ReplyDeleteAre bhai. Heti ki bangla bujhe ni??
Deleteoye que es el archivo debug
ReplyDeletethe images are on read only
ReplyDeletehow to download
ReplyDeletethank you man
ReplyDeleteThe images are showing but downloading videos
ReplyDelete☹
ReplyDelete