Code For Personal Portfolio Website using HTML & CSS

Code For Personal Portfolio Website using HTML & CSS

Hello, today we are going to Learn How To Make Personal Website Using HTML And CSS. You Easily Create This Personal Portfolio Website Using HTML By Follow These Steps. You’ll Build This Awesome Personal Portfolio Website By Just Following These Steps Which I Given Bellow.

On this Portfolio site, there are navigation bar with a logo on the left side, some navigation links are on the middle side and right side button. Next Step, On the left side of this site, there are texts which are about the author’s name, profession, and a button labeled as “Download CV” as you can see in the image.

If you like this portfolio and want to get the source code, I have provided all the codes of this program below link of this program where you can easily download the source files of this program. You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio Website</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="hero">
      <nav>
        <img src="./img/logo.png" class="logo" />
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" class="btn">Resume</a>
      </nav>

      <div class="content">
        <span class="title">Freelance Web Developer</span>
        <h1>Hello, I’m <span>emma</span></h1>
        <p>
          I’m working on a professional, visually sophisticated and
          technologically proficient, responsive and multi-functional React
          Components.
        </p>
        <a href="#" class="btn">Download CV</a>
      </div>
    </div>
  </body>
</html>

You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.

First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images( download files from GitHub ) that are used on this website won’t appear.

HTML Output 

html Personal Portfolio Website

 

You Might Like This:

 

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
a {
  text-decoration: none;
}
.hero {
  width: 100%;
  height: 100vh;
  background: url(img/bg.png);
  background-size: cover;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 100px;
}
.logo {
  max-height: 60px;
}
nav ul li {
  list-style: none;
  display: inline-block;
  padding: 10px 20px;
}
nav ul li a {
  color: #1d1d24;
  position: relative;
  padding: 5px 0;
}
nav ul li a:hover {
  color: #fd4766;
}
nav ul li a:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 3px;
  background: #fd4766;
  transition: 0.3s;
  bottom: 0;
}
nav ul li a:hover:after {
  width: 100%;
}
.btn {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 40px;
  border-radius: 500px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.4s ease-in-out;
  background-size: 152% 100%;
  background: #fd4766;
  border: 2px solid #fd4766;
}
.btn:hover {
  background: transparent;
  border-color: #fd4766;
  color: #fd4766;
}
.content {
  position: absolute;
  top: 35%;
  left: 8%;
}
.content .title {
  color: #0a0a0a;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
  margin-bottom: 20px;
  background: linear-gradient(
    120deg,
    #1c99fe 20.69%,
    #7644ff 50.19%,
    #fd4766 79.69%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content h1 {
  color: #1f1f25;
  font-size: 75px;
  font-weight: 900;
  line-height: 90px;
  text-transform: inherit;
  width: 70%;
}
.content h1 span {
  color: #fd4766;
}
.content p {
  width: 55%;
  color: #202020;
  margin-top: 25px;
  margin-bottom: 30px;
}

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS (Cascading Style Sheets) are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the <style></style> tags are used.

The external stylesheets are stored in files with the .css extension. With the external CSS, you can include it on multiple HTML pages to update the style of those pages. Even a single CSS file can be used to style a complete website.

A CSS rule comprises of two components, a selector and a declaration. A selector points to an element in the HTML document. It can either be an element tag, class name, id name, multiple tags showing the hierarchy, etc.

A declaration contains the style definition comprising of property and value. The property identifies the property of the element that you want to change and the value defines its new value. Each CSS rule can have multiple declarations. The following is an example of a CSS rule.

Final Output 

css Personal Portfolio Website

 

You have completed learning Personal Portfolio Website. I hope I have explained to you in this tutorial how I created this Personal Portfolio Website.

Quiz Project Using Javascript

50+ Frontend Project Code 

Source code 

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

written by – Ninja_webTech

Share on:

3 thoughts on “Code For Personal Portfolio Website using HTML & CSS”

  1. Wow, fantаstic blog layout! How long have you been blоgging for?

    you make bⅼogging loߋk easy. The overalⅼ lоok of
    yоur web site is fantastic, as well as tһe content!

    Reply
  2. Hello there! Ꭲhis post cߋuldn’t be written any better!
    Reading through this article reminds me of my prevіous roommate!

    He constantⅼy kept preaching about this.
    I most certаinly will forward this information to him.
    Pretty sure he’s going to have a νery good read.
    Many thanks for sharing!

    Reply

Leave a Comment