Here's a complete Hands on CSS code to style the "HTML Developer Profile" web page. This styling will give the page a clean and professional look with a responsive layout and visually appealing design.
CSS Styling Code (styles.css)
css code
/* Reset default margin and padding */
body, h1, h2, p, ul, nav, section {
margin: 0;
padding: 0;
box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}
/* Set base font styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
padding-top: 60px; /* Adds space for the fixed navigation bar */
}
/* Style the header */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
position: sticky;
top: 0;
z-index: 1000;
}
header h1 {
font-size: 36px;
margin-bottom: 10px;
}
header p {
font-size: 20px;
}
/* Style the navigation menu */
nav {
background-color: #444;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
nav ul {
list-style: none;
display: inline-block;
padding: 10px 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s; /* Smooth color transition on hover */
}
nav ul li a:hover {
color: #ff6347;
}
/* Style the main content */
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds shadow for a subtle depth effect */
border-radius: 8px;
}
section {
margin-bottom: 40px;
}
section h2 {
color: #333;
margin-bottom: 10px;
border-bottom: 2px solid #ff6347;
display: inline-block;
padding-bottom: 5px;
}
section p, section ul {
margin-bottom: 20px;
font-size: 18px;
}
section ul {
list-style: disc;
margin-left: 20px;
}
section ul li {
margin-bottom: 10px;
}
/* Style the footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
Explanation of Key Styling Choices
Reset Styles: The
box-sizing: border-box;property ensures that the padding and border are included in an element’s total width and height, making it easier to manage layout.Sticky Header and Navigation: The
position: sticky;andposition: fixed;properties keep the header and navigation bar visible when scrolling, enhancing usability.Responsive Layout: The
max-widthandmargin: 0 auto;properties in themainensure that content is centered and adapts to different screen sizes.Hover Effects: The
transitionproperty adds smooth transitions for hover effects on navigation links, enhancing interactivity.Shadows and Borders: The
box-shadowandborder-radiusproperties add subtle visual effects to the main content area, making the design more appealing.Footer: The footer is fixed at the bottom of the page, ensuring it is always visible and styled consistently with the header.
Instructions to Use
Create the CSS File: Save the CSS code in a file named
styles.cssin the same directory as your HTML file.Link the CSS File: Ensure the HTML file has the following line within the
<head>section to link the CSS file:html code<link rel="stylesheet" href="styles.css">View in a Browser: Open the
index.htmlfile in your web browser to see the styled profile page in action.Customize Further: Experiment with different colors, fonts, and layouts to make the design your own. You can also add media queries for further responsiveness if needed.
This CSS styling provides a solid foundation for a professional-looking web page, with flexibility to expand and customize as you grow more comfortable with CSS.
No comments:
Post a Comment