Here is the Simple Project Using html and css with source code – Personal Profile Card with Navigation. if you are learning HTML and CSS code, you can try this Simple Project Using HTML and CSS with source code.
Here is the complete code setup that you can copy and run – just save both files to the same folder on your computer.
Simple Project Using html and css with source code – Personal Profile Card with Navigation
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Profile Card with Navbar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Project 2: Navigation Bar -->
<nav class="navbar">
<div class="logo">MyWebsite</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Project 1: Profile Card -->
<div class="card">
<img src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-img">
<h2>Vicky</h2>
<p class="title">Web Developer at Hostingkeeda</p>
<p>Bihar,Patna </p>
<button>Contact</button>
</div>
</body>
</html>
2. style.css
/* Reset default styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base body styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
padding: 0;
margin: 0;
}
/* Navbar Styling (Project 2) */
.navbar {
background-color: #4a90e2;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style: none;
display: flex;
gap: 30px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 16px;
transition: color 0.3s;
}
.nav-links a:hover {
color: #d0e6ff;
}
/* Profile Card Styling (Project 1) */
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
width: 280px;
text-align: center;
padding: 30px 20px;
margin: 40px auto;
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 20px;
}
.title {
color: gray;
font-size: 16px;
margin: 5px 0;
}
button {
border: none;
outline: none;
padding: 10px 20px;
background-color: #4a90e2;
color: white;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
font-size: 14px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #357ABD;
}
How to Run This Project
- Open any text editor (like VS Code, Notepad++, Sublime).
- Create a folder (e.g.,
my-project). - Inside that folder:
- Save the HTML code as
index.html - Save the CSS code as
style.css
- Save the HTML code as
- Double-click
index.htmlor right-click → “Open with browser”.
Your page will load with a navbar on top and a profile card in the center!
HTML Tags & Their Uses
| Tag | Use / Purpose |
|---|---|
<html> | Root element of an HTML document |
<head> | Contains metadata like title, links, styles |
<title> | Sets the title of the webpage |
<link> | Links external CSS or favicon |
<meta> | Provides metadata (e.g., charset, viewport) |
<body> | Contains the visible content |
<h1> to <h6> | Headings (largest to smallest) |
<p> | Paragraph text |
<div> | Division/container for layout or styling |
<nav> | Represents navigation menu |
<ul> | Unordered list |
<li> | List item inside <ul> or <ol> |
<a> | Anchor link to another page or section |
<img> | Embeds an image |
<button> | Adds a clickable button |
<span> | Inline container for text styling |
CSS Properties & Their Uses
| Property | Use / Purpose |
|---|---|
color | Sets text color |
background-color | Sets background color |
font-size | Sets size of the text |
font-family | Defines the font style |
text-align | Aligns text (left, center, right) |
margin | Space outside the element |
padding | Space inside the element |
border | Adds a border around elements |
display | Sets layout (block, inline, flex, grid) |
flex | Defines flex container behavior |
justify-content | Aligns items horizontally (in flex) |
align-items | Aligns items vertically (in flex) |
width / height | Sets size of an element |
border-radius | Rounds corners of an element |
box-shadow | Adds shadow around an element |
transition | Animates property changes |
cursor | Changes the mouse pointer |
hover (pseudo) | Styles elements when hovered |