How to create an attractive person webpage within just 10 mins using HTML and CSS

You can create your own personal website including your details within just 10 minutes using only HTML and CSS. I’m gonna show you how to create an attractive webpage easily step by step.

First open any text editor and create a HTML file (with the .html extension) and another file as CSS file (with the .css extension). In the html file first link the CSS file in the <head> in the “href” attribute. You can give a suitable title for your webpage in the <title>. Write the following code in the <body> to include the basic description about yourself as below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Personal Website</title>
</head>
<body>
<div class="box">
<img src="https://static4.depositphotos.com/1003940/348/i/600/depositphotos_3489130-stock-photo-portrait-of-beautiful-business-woman.jpg" alt="profile picture" class="box-image">
<h1>YourName</h1>
<h5>Web developer - Web designer</h5>
<p>A small description about you that would take several lines including something attractive that would make the reader to get a good understanding of yourself</p>
</div></body>
</html>

Here I have taken a class called “box” for the box in the middle of the background. When you write the CSS code for the “box” class it will be visible. For the link in the “source” attribute of the <img> you can use the address of the image you want and for the “alt” attribute you can use an alternative name for the image. A class called “box-image” is given here for the image. When you write the CSS code for “box-image” it will be visible in the image. In the <h1> write your name. In the <h5> write your profession. In the <p> write a small description about yourself that you want to appear in the webpage. Then you will get the output like this.

Next, in the CSS file write the following code to get a background image for the webpage and arrange it without repeating with margins and padding as you like. Here I haven’t used a margin or padding. For the URL in the background image you can use the URL of the image you like. You can use “cover” as the background size. Refer the following code for these tasks.

body
{
margin: 0;
padding: 0;
background: url(https://www.feedster.com/wp-content/uploads/2019/06/3d-cube-background-4k-yo.jpg);
no-repeat;
background-size: cover;
}

Next to add styles for the box in the middle of the background, you can use the following code. You can use height and width as you like for the size of the box. For the color of the box I have given the values in RGBA format. I have center-aligned the text in the box and have used “Bisque” as the color of the text and “Century Gothic” as the font of the text, you can change the values of these properties as you like. I have also arranged padding and margin accordingly.

You can find more colors from the link below https://www.w3schools.com/cssref/css_colors.asp

You can find more fonts from the link below https://www.w3schools.com/css/css_font.asp

.box
{
width: 450px;
height: 700px;
background: rgba(0,0,0,0.5);
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
color: bisque;
font-family: 'Century Gothic', sans-serif;
}

To add the styles to the profile picture in the box you can use the following code. You can make the shape of the image round by “border-radius” property and can arrange the height and width as you like.

.box-image
{
border-radius: 50%;
width: 200px;
height: 200px;
}

Then the output will be as below.

If you like you can use the following code to add more style to the contents in the box and can change them as you wish.

.box h1
{
font-size: 40px;
letter-spacing: 4px;
font-weight: 100;
}

.box h5
{
font-size: 20px;
letter-spacing: 3px;
font-weight: 100;
}
.box p
{
text-align: justify;
}

Next go to the HTML file again. You can write the following code to insert your contact details(still we are writing inside the <div class= “box”>). First to insert icons and details of phone number and email you can use the following code.

<br>

<img src="https://image.flaticon.com/icons/png/512/124/124034.png" class="icon">
<p class="contactdetail">+00 000 000 000</p>

<img src="https://cdn4.vectorstock.com/i/1000x1000/23/08/gmail-new-icon-vector-34182308.jpg" class="icon">
<p class="contactdetail">example@gmail.com</p>

For the icon images you can use the given URLs, but have to edit the contact details accordingly. I have defined a class as “icon” to add necessary styles for the icons and another class as “contactdetail” to make necessary changes for the details.

In the CSS file you can use following code to get the necessary styles for the above inserted icons and details.

.icon
{
float: left;
width: 50px;
height: 50px;
padding-left: 100px;
}
.contactdetail
{
float: left;
padding-left: 50px;
}

Here “float” property is used to align the wanted aspect to left or right.

You will get the output as below.

As for the last part, for inserting the details of your Facebook, Instagram and LinkedIn profile links go to HTML file and write the following code(still inside <div class= “box”>).

<br><br><br><br><br><br><ul>
<li><a href="#"><img alt="Facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png" class="icon1"></a></li>
<li><a href="#"><img alt="Instagram" src="https://www.instagram.com/static/images/ico/apple-touch-icon-167x167-precomposed.png/4985e31c9100.png" class="icon1"></a></li><li><a href="#"><img alt="LinkedIn" src="https://icons.iconarchive.com/icons/danleech/simple/512/linkedin-icon.png" class="icon1"></a></li>
</ul>

Inside the “href” attribute insert the links to your relevant profiles (Here I have used “#” mark). Inside the <img> for the “src” attribute I have used suitable icons of the social media sites. To add the necessary styles for the icons I have defined a class called “icon1”.

In the CSS file at last write the following code to style the social media icons.

.icon1
{
width: 60px;
height: 60px;
}
ul
{
margin: 0;
padding: 0;
}
.box li
{
display: inline-block;
margin: 6px;
list-style: none;
}

If you have finished all the above coding the HTML file should look like below.

And the CSS file should look like this.

Your final output will be like this. Good Luck in making your own page!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Develop Chatbot using Amazon Lex and integration with React JS web application

Validating Forms in Semantic UI React

Visualizing JavaScript Array Methods

Cloud Firestore + Angular — Serverless app on transactions and batched writes

React.JS

Beginners Guide to ReactJS — Data handling Using Props and State

ExpressJS

Using ml5.js, poseNet, p5.js to Turn Myself Into a Cat

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chamodhya Manawathilake

Chamodhya Manawathilake

More from Medium

Increase your Knowledge

Run a Local Script over SSH with Interactivity

CS 371P Spring 2022 #10: Anya Uwakwe

How to Make a Historic Style