You are currently viewing Portfolio Website using HTML and CSS (Source Code)

Portfolio Website using HTML and CSS (Source Code)

It is crucial for you to have a portfolio website if you work as a web developer or designer. Your best work, together with your relevant knowledge and experience, can be displayed while introducing yourself. I’ll go through a few advantages of setting up a portfolio website in this article. Then, using HTML and CSS, I’ll demonstrate how you can build a stunning responsive portfolio website for yourself.

How To Create a Responsive Portfolio Using HTML & CSS?

Portfolio Website using HTML and CSS (Source Code)
Preview Of Portfolio Website using HTML and CSS

 

A portfolio contains a three section . All these 3 section are important and contains different details about the developer:

  • Header: The developers include links to several portfolio areas in this section, as well as a quick summary of the user, in the introduction.
  • Body: This is a crucial area where the user introduces themselves, lists their talents, and includes all of the projects they have worked on. In this area, we write primarily about experience and talents.
  • Footer: We include a contact link in the footer section so that anyone wishing to get in touch with the user may do so by clicking on the link there.

This project is designed for beginners, and we will build our own portfolio step by step. By the end of this article, you will be able to build your own portfolio using HTML and CSS.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Adding some basic HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio</title>

    <script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <nav id="navbar" class="nav">
        <ul>
            <li>
                <a href="#welcome-section">About</a>
            </li>
            <li>
                <a href="#projects">Work</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>


    <!-- Second Section-->

    <section id="welcome-section">
        <h1>Hey I'm Madan</h1>
        <p><i>a front-end web developer</i></p>
    </section>

    <section id="projects" class="project-section">
        <h2 class="projects-section-header">My Project's</h2>

        <div class="projects-grid">
            <a href="https://codepen.io/MadanSinha/full/MWgjyKm" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/project_pic/blob/main/photography.jpg?raw=true" alt="project" />
                <p class="project-title">

                    Photography Page

                </p>
            </a>

            <a href="https://codepen.io/MadanSinha/full/eYdXzme" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/project_pic/blob/main/SimpleQuote%20Generator.jpg?raw=true"
                    alt="project" />
                <p class="project-title">

                    Random Quote Machine

                </p>
            </a>

            <a href="https://codepen.io/MadanSinha/full/poEQpzM" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/project_pic/blob/main/LandingPage.jpg?raw=true" alt="project" />
                <p class="project-title">

                    Landing Page

                </p>
            </a>

            <a href="https://codepen.io/MadanSinha/full/MWjPYae" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/project_pic/blob/main/survey%20f.jpg?raw=true" alt="project" />
                <p class="project-title">

                    Survey Form

                </p>
            </a>

            <a href="https://codepen.io/MadanSinha/full/bGwxqed" target="_blank" class="project project-tile">
                <img class="project-image" src="https://github.com/lazy4gyan/project_pic/blob/main/tribute.jpg?raw=true"
                    alt="project" />
                <p class="project-title">

                    Tribute Page

                </p>
            </a>

            <a href="https://codepen.io/MadanSinha/full/dybNMze" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/project_pic/blob/main/3d%20cube.jpg?raw=true" alt="project" />
                <p class="project-title">

                    3D Cube

                </p>
            </a>

            <a href="https://cfxbu9.csb.app/" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/Frontend-Practice/blob/main/travel-journal.png?raw=true"
                    alt="project" />
                <p class="project-title">

                    Travel Journal using React

                </p>
            </a>

            <a href="https://8y90ff.csb.app/" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/Huddle-landing-page/blob/main/design/random.png?raw=true"
                    alt="project" />
                <p class="project-title">

                    Random Picture in React by Unsplash API

                </p>
            </a>
            <a href="https://osly2x.csb.app/" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/Frontend-Practice/blob/main/randomquote.png?raw=true"
                    alt="project" />
                <p class="project-title">

                    Random Quote using React

                </p>
            </a>

            <a href="https://moonlit-nougat-ab6465.netlify.app" target="_blank" class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/Huddle-landing-page/blob/main/design/huddle.png?raw=true"
                    alt="project" />
                <p class="project-title">

                    Huddle landing page

                </p>
            </a>

            <a href="https://62430ce3085a210baf9a1f20--lazygyan-3column-preview-card.netlify.app/" target="_blank"
                class="project project-tile">
                <img class="project-image"
                    src="https://github.com/lazy4gyan/3-Column-Preview-Card/blob/main/design/desktop-design.jpg?raw=true"
                    alt="project" />
                <p class="project-title">

                    3 Column Preview Card

                </p>
            </a>


        </div>


    </section>


    <!-- Third Section-->


    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2 id="con">Let's work together...</h2>
            <p>How do you take your coffee?</p>
        </div>
        <div class="form">
            <form id="form" action="mailto:example@example.com/email-submit">
                <input type="email" id="email" placeholder="Your Email Address" name="email" required /><br>
                <a href="#" target="_blank" id="submit" class="btn contact-submit"><i class="fas fa-arrow-right"></i></a
                    </form>
        </div>
        <div class="contact-links">
            <a href="#" target="_blank" class="btn contact-details"><i class="fab fa-instagram"></i></a>
            <a id="profile-link" href="https://github.com/lazy4gyan" target="_blank" class="btn contact-details"><i
                    class="fab fa-github"></i></a>
            <a href="#" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i></a>
            <a href="#" class="btn contact-details"><i class="fas fa-mobile-alt"></i></a>
        </div>
    </section>

    <!-- END CONTACT SECTION -->

    <!-- START FOOTER SECTION -->

    <footer>
        <p id="foot">
            &copy; 2021, Made with ❤ by
            <a id="fot" href="https://www.linkedin.com/in/madansinha/" target="_blank">Madan Sinha
            </a>
        </p>
    </footer>

    <!-- END FOOTER SECTION -->

</body>

</html>

Before we add the structure to our portfolio. We must include some links in the HTML head section. To link them to one another, we will primarily add the link to our external stylesheet file. The import link for our icon must be put to the head section because we also included the font-awesome icon to our project.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

<script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="style.css" />

Now The structure will be included in our portfolio. We will start by giving our portfolio a navbar. The required links are added to the top of a portfolio using a navbar. We’ll use the <nav> tag to create our navbar. We’ll make an unordered list inside the nav tag and use it to include links to the various parts of our portfolio.

<nav id="navbar" class="nav">
        <ul>
            <li>
                <a href="#welcome-section">About</a>
            </li>
            <li>
                <a href="#projects">Work</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>

We’ll now include another, called the About & Projects section. We will add the user’s name and a designation of the user in this part using the <H1> and <p> and <i> tags, respectively. We’ll now make a section for projects. Using the <a>, we will add the link to our project and a brief description of the project under the project section.

<section id="welcome-section">
    <h1>Hey I'm Madan</h1>
    <p><i>a front-end web developer</i></p>
</section>

<section id="projects" class="project-section">
    <h2 class="projects-section-header">My Project's</h2>

    <div class="projects-grid">
        <a href="https://codepen.io/MadanSinha/full/MWgjyKm" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/project_pic/blob/main/photography.jpg?raw=true" alt="project" />
            <p class="project-title">

                Photography Page

            </p>
        </a>

        <a href="https://codepen.io/MadanSinha/full/eYdXzme" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/project_pic/blob/main/SimpleQuote%20Generator.jpg?raw=true"
                alt="project" />
            <p class="project-title">

                Random Quote Machine

            </p>
        </a>

        <a href="https://codepen.io/MadanSinha/full/poEQpzM" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/project_pic/blob/main/LandingPage.jpg?raw=true" alt="project" />
            <p class="project-title">

                Landing Page

            </p>
        </a>

        <a href="https://codepen.io/MadanSinha/full/MWjPYae" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/project_pic/blob/main/survey%20f.jpg?raw=true" alt="project" />
            <p class="project-title">

                Survey Form

            </p>
        </a>

        <a href="https://codepen.io/MadanSinha/full/bGwxqed" target="_blank" class="project project-tile">
            <img class="project-image" src="https://github.com/lazy4gyan/project_pic/blob/main/tribute.jpg?raw=true"
                alt="project" />
            <p class="project-title">

                Tribute Page

            </p>
        </a>

        <a href="https://codepen.io/MadanSinha/full/dybNMze" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/project_pic/blob/main/3d%20cube.jpg?raw=true" alt="project" />
            <p class="project-title">

                3D Cube

            </p>
        </a>

        <a href="https://cfxbu9.csb.app/" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/Frontend-Practice/blob/main/travel-journal.png?raw=true"
                alt="project" />
            <p class="project-title">

                Travel Journal using React

            </p>
        </a>

        <a href="https://8y90ff.csb.app/" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/Huddle-landing-page/blob/main/design/random.png?raw=true"
                alt="project" />
            <p class="project-title">

                Random Picture in React by Unsplash API

            </p>
        </a>
        <a href="https://osly2x.csb.app/" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/Frontend-Practice/blob/main/randomquote.png?raw=true"
                alt="project" />
            <p class="project-title">

                Random Quote using React

            </p>
        </a>

        <a href="https://moonlit-nougat-ab6465.netlify.app" target="_blank" class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/Huddle-landing-page/blob/main/design/huddle.png?raw=true"
                alt="project" />
            <p class="project-title">

                Huddle landing page

            </p>
        </a>

        <a href="https://62430ce3085a210baf9a1f20--lazygyan-3column-preview-card.netlify.app/" target="_blank"
            class="project project-tile">
            <img class="project-image"
                src="https://github.com/lazy4gyan/3-Column-Preview-Card/blob/main/design/desktop-design.jpg?raw=true"
                alt="project" />
            <p class="project-title">

                3 Column Preview Card

            </p>
        </a>


    </div>


</section>

We’ll now have a section for contacts. A contact form will be added to this area. We’ll give our contact form a title by using the H2 element. We will now ask the user for their email address using the email input type, and we will also construct a submit button.

Using the paragraph tag, we will now construct a footer for our portfolio. We’ll include a copyright icon and the user’s information who developed the portfolio. We will affix a LinkedIn link to our user name using the anchor tag.

    <section id="contact" class="contact-section">
        <div class="contact-section-header">
            <h2 id="con">Let's work together...</h2>
            <p>How do you take your coffee?</p>
        </div>
        <div class="form">
            <form id="form" action="mailto:example@example.com/email-submit">
                <input type="email" id="email" placeholder="Your Email Address" name="email" required /><br>
                <a href="#" target="_blank" id="submit" class="btn contact-submit"><i class="fas fa-arrow-right"></i></a
                    </form>
        </div>
        <div class="contact-links">
            <a href="#" target="_blank" class="btn contact-details"><i class="fab fa-instagram"></i></a>
            <a id="profile-link" href="https://github.com/lazy4gyan" target="_blank" class="btn contact-details"><i
                    class="fab fa-github"></i></a>
            <a href="#" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i></a>
            <a href="#" class="btn contact-details"><i class="fas fa-mobile-alt"></i></a>
        </div>
    </section>

    <!-- END CONTACT SECTION -->

    <!-- START FOOTER SECTION -->

    <footer>
        <p id="foot">
            &copy; 2021, Made with ❤ by
            <a id="fot" href="https://www.linkedin.com/in/madansinha/" target="_blank">Madan Sinha
            </a>
        </p>
    </footer>

    <!-- END FOOTER SECTION -->

</body>

</html>

We have now added the basic structure of our webpage. Now we will be using our stylesheet to add styles to our portfolio, but first let’s take a look at our output.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Output:

Portfolio Website using HTML
Portfolio Website using HTML

Step2: Adding CSS Code

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Poppins&display=swap");

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

/* Base styling */

body {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

img {
  display: block;
  width: 100%;
}

h1,
h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  text-align: center;
}

h1 {
  font-size: 6rem;
  font-size: 72px;
  background: -webkit-radial-gradient(#e8f5e9, #b2dfdb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 4.2rem;
  color: #2196f3;
  border: 0.5px solid #ddd;
}
p {
  font-size: 2rem;
  color: #e1bee7;
}

/* Navigation Bar Styling */

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #3e4e88;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

li {
  display: inline;
}

ul {
  list-style: none;
  padding: 10px;
}

a {
  text-decoration: none;
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 1em;
  color: #fff;
}
a:hover {
  color: #fbc02d;
}

/* Section 1 Styling*/

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);
}

/* Section 2*/

.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: #eceff1;
}
.projects-section-header {
  max-width: 640px;
  margin: 3rem auto 6rem auto;
  border-bottom: 0 solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 38px;
  word-spacing: 4px;
  letter-spacing: 3px;
  box-shadow: 0 5px 20px #ddd;
}
@media (max-width: 28.75em) {
  .projects-section-header {
    font-size: 4rem;
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}
@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}
.project {
  background: #ad1457;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  transition: all 2s, transform 0.5s, box_shadow 0.5s;
}
.project:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}

.project-image {
  height: calc(100% - 6.8rem);
  width: 100%;
  object-fit: cover;
  border-top-right-radius: 28px;
  border-top-left-radius: 28px;
}
.project-title {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  text-align: center;
  padding: 2rem 0.5rem;
  color: #fff;
  text-transform: uppercase;
}
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}

/* Contact section */
.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0 2rem;
  background: #363748;
}
.contact-section-header > h2 {
  font-size: 6rem;
}
#con {
  color: #fff;
  border: none;
}
@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}
.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
  flex-wrap: wrap;
}
.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
}
.contact-details:hover {
  transform: translateY(8px);
  color: red;
}
.form {
  max-width: 640px;
  margin-top: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#email {
  max-width: 300px;
  width: 300px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-top: 2rem;
  border-radius: 28px;
  text-align: center;
  outline: none;
}
#submit {
  margin-top: 1rem;
  background-color: red;
  border-radius: 28px;
  padding-top: 0.7rem;
  padding-right: 2.1rem;
  padding-bottom: 1.1rem;
  transition: all 2s, transform 0.5s, box_shadow 0.5s;
}
#submit:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.04);
}

/* Footer Section */
footer {
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: #0c344e;
  border-top: 4px solid #bfc8ea;
}
#foot {
  color: #fff;
  font-family: "Poppins", sans-serif;
}
#fot {
  margin-left: -0.1rem;
  color: #ff9f5c;
  font-family: "Poppins", sans-serif;
}
#fot:hover {
  color: #f31702;
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Step1: First, we’ll import the two newGoogle Fonts . We’ll  use the universal selection to set the padding and margin to “zero.” The font size and box size are both set to “62.5%” using the HTML tag selector, and the scroll attribute is used to set the scrolling to “smooth.”

Create Quiz App Using Html,Css And Javascript (Source Code)

Now that we’ve used the media query and specified the maximum width to add some responsiveness, our portfolio’s font size will be adjusted automatically for different screen sizes.

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Poppins&display=swap");

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

/* Base styling */

Step2:  We will now update our portfolio with a foundational style. We’ll style our body right now utilising the body tag selector. Font thickness using the font weight is set to 400, and the font size is set to 1.8 rem.

The image’s display style is now set to “block” and its width is set to “100%” using the img selector.

We will give our headings, like h1 and h2, some styling. The font-family is set to “Raleway,” the font-weight is set to “700,” and the text is aligned to the “centre” using the text-align attribute.

body {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

img {
  display: block;
  width: 100%;
}

h1,
h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  text-align: center;
}

h1 {
  font-size: 6rem;
  font-size: 72px;
  background: -webkit-radial-gradient(#e8f5e9, #b2dfdb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 4.2rem;
  color: #2196f3;
  border: 0.5px solid #ddd;
}
p {
  font-size: 2rem;
  color: #e1bee7;
}
Portfolio Website using CSS
Portfolio Website using CSS

 

Step3: We will now style our navigation bar. Our navbar bar’s display is set to “flex” and its position is set to “fixed” using the class selector (.nav). The navbar’s height and width are both set to “auto,” respectively. Our navbar’s background colour is “light blue,” and its z-index is set to 10 using the z-index parameter.

We will now style the list and unorderlist components of our navbar. We set its presentation to be inline using the li tag. Additionally, we added 1.5 rem left and right margins and set the font size to 1 em. Utilizing the hover attribute, the text’s colour is set to “white” when it is displayed.

Portfolio Website using CSS
Portfolio Website using CSS

 

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #3e4e88;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

li {
  display: inline;
}

ul {
  list-style: none;
  padding: 10px;
}

a {
  text-decoration: none;
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 1em;
  color: #fff;
}
a:hover {
  color: #fbc02d;
}

Step4: Using the id selector we will style our about section. The width and height is set to the 100% & 100vh respectively. Using the align-item property we set it position  to the center. We also added a linear gradient with a combination of red & blue.

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);
}

/* Section 2*/

.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: #eceff1;
}
.projects-section-header {
  max-width: 640px;
  margin: 3rem auto 6rem auto;
  border-bottom: 0 solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 38px;
  word-spacing: 4px;
  letter-spacing: 3px;
  box-shadow: 0 5px 20px #ddd;
}
@media (max-width: 28.75em) {
  .projects-section-header {
    font-size: 4rem;
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}
@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}
.project {
  background: #ad1457;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  transition: all 2s, transform 0.5s, box_shadow 0.5s;
}
.project:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}

Step5: To style our display as a “inline-block.” I would advise you to try adding your own styling as we design both our contact and footer sections in the same way. The more you attempt to add your own flair, the more you will understand the idea.

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0 2rem;
  background: #363748;
}
.contact-section-header > h2 {
  font-size: 6rem;
}
#con {
  color: #fff;
  border: none;
}
@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}
.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
  flex-wrap: wrap;
}
.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
}
.contact-details:hover {
  transform: translateY(8px);
  color: red;
}
.form {
  max-width: 640px;
  margin-top: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#email {
  max-width: 300px;
  width: 300px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-top: 2rem;
  border-radius: 28px;
  text-align: center;
  outline: none;
}
#submit {
  margin-top: 1rem;
  background-color: red;
  border-radius: 28px;
  padding-top: 0.7rem;
  padding-right: 2.1rem;
  padding-bottom: 1.1rem;
  transition: all 2s, transform 0.5s, box_shadow 0.5s;
}
#submit:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.04);
}

/* Footer Section */
footer {
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: #0c344e;
  border-top: 4px solid #bfc8ea;
}
#foot {
  color: #fff;
  font-family: "Poppins", sans-serif;
}
#fot {
  margin-left: -0.1rem;
  color: #ff9f5c;
  font-family: "Poppins", sans-serif;
}
#fot:hover {
  color: #f31702;
}
Portfolio Website using HTML and CSS
Portfolio Website using HTML and CSS

 

The design of our portfolio in HTML & CSS is now complete. To help you fully comprehend and attempt to put all those concepts into practise on your own, we’ll now have a look at the video output.

Output:

Codepen Preview Of Portfolio Website using HTML and CSS


Now We have Successfully added Portfolio using HTML & CSS . You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Codepen Link : @Link
Code by : @Madan

Leave a Reply