How to make a simple one page personal website using html css

Jan. 26, 2023

7 min read

495

This is a one-page website designed to showcase a developer's profile and projects. The website is built using HTML and CSS. The layout is simple and easy to navigate, with a header displaying the developer's name and a section that includes a profile picture and information about the developer. The website also includes three boxes that display the developer's projects, each with a title, a short description, and an image.

The CSS is used to style the website, including setting the font-family, background color, padding, and text alignment of the header and section elements. Flexbox is used to create a responsive layout that adjusts the size of the boxes depending on the screen size. The website is designed to be visually appealing, with a clean and modern look.

The website also includes additional CSS styles such as the hover effect, rounded edges, and link to read more and view project, creating a visually interesting and engaging experience for the user.

Here is the code you can copy it

<!DOCTYPE html>
<html>
  <head>
    <title>My Personal Website</title>
    <style>
      /* CSS styles go here */
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
      header h1 {
        margin: 0;
      }
      section {
        padding: 20px;
      }
      section h2 {
        margin: 0;
      }
      img {
        max-width: 100%;
        border-radius: 50%;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        flex: 1;
        padding: 20px;
        text-align: center;
        background-color: #f2f2f2;
        box-shadow: 0px 0px 10px #ccc;
        border-radius: 10px;
        margin-bottom: 20px;
      }
      .box img {
        margin-bottom: 20px;
      }
      .box p {
        font-size: 18px;
        line-height: 1.5;
        color: #444;
        margin-bottom: 0;
      }
      .box:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0px 0px 20px #aaa;
      }
      .box a {
        display: block;
        font-size: 20px;
        margin-top: 20px;
        text-decoration: none;
        color: #333;
      }
        /* Footer Styles */
    footer {
        background-color: #333;
        color: white;
        bottom: 0;
        width: 100%;
        position: fixed;
        padding: 1em;
    }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Personal Website</h1>
    </header>
    <section>
      <div class="container">
        <div class="box">
          <img src="image2.jpeg" alt="Profile Picture">
          <h2>About Me</h2>
          <p>I am a web developer and designer with over 5 years of experience. I specialize in creating responsive and user-friendly websites using HTML, CSS, and JavaScript.</p>
          <a href="about.html">Read More</a>
        </div>
        <div class="box">
          <img src="image1.jpg" alt="Project 1">
          <h2>Project 1</h2>
          <p>A brief description of the project, including the technologies used and the main features.</p>
          <a href="project1.html">View Project</a>
        </div>
        <div class="box">
          <img src="image2.jpeg" alt="Project 2">
          <h2>Project 2</h2>
          <p>A brief description of the project, including the technologies used and the main features.</p>
          <a href="project2.html">View Project</a>
        </div>
      </div>
    </section>
    <footer>
        <p align="center">Copyright ©2021 My Portfolio</p>
    </footer>
  </body>
</html>

The code above is an example of a one-page website using HTML and CSS. It includes several elements such as a header, a section, and three boxes that display information about the developer, their profile picture, and their projects.

In the <style> section, the CSS styles the website by setting the font-family, background color, padding, and text alignment of the header and section elements. It also uses Flexbox to create a responsive layout that adjusts the size of the boxes depending on the screen size.

The following are some of the additional CSS styles that were added to the previous example:

background-color and box-shadow were added to the .box class to give it a background color and a shadow effect.
border-radius was added to the .box class to give it rounded edges.
margin-bottom was added to the .box class to add some space between each box.
font-size and line-height were added to the .box p class to adjust the size and spacing of the text.
transition and transform were added to the .box:hover class to create a hover effect that scales the boxes up slightly and changes the shadow effect when the user hovers over them.
a tag is added and display , font-size , margin-top, text-decoration and color were added to the .box a class to create a link to read more and view project.
In the <header> element, the background-color is set to #333 and the color is set to #fff, which makes the text white and the background dark gray.
The padding is set to 20px, which adds space around the text inside the header.
The text-align is set to center, which centers the text inside the header.
The h1 element inside the header has a margin of 0, which removes any space around the text.
In the <section> element, the padding is set to 20px, which adds space around the content inside the section.
The img element has a max-width of 100%, which makes the image scale down to fit the width of its container.
The border-radius is set to 50%, which makes the image round.
The .container class is used to create a container for the boxes.
The max-width is set to 1200px, which sets a maximum width for the container so that it doesn't take up the whole screen on large screens.
The margin is set to 0 auto, which centers the container horizontally.
The display is set to flex, which makes the boxes inside the container display in a row.
The flex-wrap is set to wrap, which makes the boxes wrap to the next line when they run out of room on the current line.
The .box class is used to style the boxes that display information about the developer and their projects.
The flex is set to 1, which makes the boxes take up equal space in the container.
The padding is set to 20px, which adds space around the content inside the box.
The text-align is set to center, which centers the text inside the box.
The background-color is set to #f2f2f2, which makes the background of the box a light gray.
The box-shadow is set to 0px 0px 10px #ccc, which adds a subtle shadow effect to the box.
The border-radius is set to 10px, which rounds the edges of the box.
The margin-bottom is set to 20px, which adds space between each box.
The img inside the .box class has margin-bottom is set to 20px, which adds space between the image and the text.
The p element inside the .box class has font-size set to 18px, line-height set to 1.5, color set to #444, margin-bottom set to 0, which adjust the size, spacing and color of the text.
The .box:hover class is used to create a hover effect that scales the boxes up slightly and changes the shadow effect when the user hovers over them.
The transform is set to scale(1.05), which increases the size of the box by 5% when hovered over.
The transition is set to transform 0.3s ease-in-out, which makes the scaling effect smooth over 0.3 seconds.
The box-shadow is set to 0px 0px 20px #aaa, which changes the shadow effect when the box hovers over.
The display is set to block, which makes the link take up the full width of its container.
The font-size is set to 16px, which adjusts the size of the text.
The margin-top is set to 20px, which adds space above the link.
The text-decoration is set to none, which removes the underline from the link.
The color is set to #333, which makes the text color dark grey.
The transition is set to color 0.3s ease-in-out, which makes the text color change smooth over 0.3 seconds.

You can see screenshot here

Please note that this is a simplified example and you may need to add more code for more functionality and improved design.

In summary, this website serves as an online portfolio for a developer, showcasing their profile and projects in a visually appealing and easy-to-navigate manner.

Appreciate you stopping by my post! 😊

Zehra Ahmad

Dian Alphabet