Styling The Portfolio WebSite

In this lesson we are going to be styling the markup file we created.

In the same folder your markup file is, create another file named style.css, and paste the below code into it.

                /* Step 4: Introduction to CSS - Basic Reset */
                * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                }
                
                body {
                background: linear-gradient(135deg, #1e1e2f, #2d2d44);
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                padding: 20px;
                }
                
                .container {
                text-align: center;
                max-width: 400px;
                width: 100%;
                }
                
                .profile-img {
                width: 80px;
                height: 80px;
                background: #00d2ff;
                border-radius: 50%;
                margin: 0 auto 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 1.5rem;
                }
                
                /* Step 5: Styling the "My Webpage" website */
                .links {
                margin-top: 30px;
                }
                
                .link-card {
                display: block;
                background: rgba(255, 255, 255, 0.1);
                color: white;
                text-decoration: none;
                padding: 15px;
                margin-bottom: 15px;
                border-radius: 10px;
                transition: 0.3s;
                border: 1px solid transparent;
                }
                
                .link-card:hover {
                background: rgba(255, 255, 255, 0.2);
                border-color: #00d2ff;
                transform: scale(1.02);
                }
                
                .premium {
                background: #00d2ff;
                color: #1e1e2f;
                font-weight: bold;
                }
                
                #shareBtn {
                margin-top: 20px;
                padding: 10px 20px;
                background: transparent;
                color: #00d2ff;
                border: 1px solid #00d2ff;
                border-radius: 5px;
                cursor: pointer;
                }

1. The "Reset" (The * Selector)

* { margin: 0; padding: 0; box-sizing: border-box; }

Browsers (Chrome, Safari, Edge) add their own weird spacing by default. This line "zeroes" everything out so you have total control over the layout.

2. The "Atmosphere" (Body Background)

background: linear-gradient(135deg, #1e1e2f, #2d2d44);

Instead of a flat color, we use a Gradient. This makes the site look high-end and modern, matching the Meisophant tech aesthetic.

3. Centering Magic (Flexbox)

display: flex; justify-content: center; align-items: center;

In the old days, centering things was hard. With Flexbox, we tell the body to be a "Flex Container" and it perfectly centers our "Business Hub" right in the middle of the screen.

4. The Profile Circle

border-radius: 50%;

Any square box can become a perfect circle by setting the border-radius to 50%. This is how we make professional-looking profile pictures.

5. Interactivity (Hover Effects)

.link-card:hover { transform: scale(1.02); }

This is Step 6 in action. When a user moves their mouse over a link, it grows slightly larger. This "feedback" tells the user the site is alive and responsive.

Pro Tip: Always add transition: 0.3s; to make the movement smooth, not jumpy!

6. Transparency (RGBA)

background: rgba(255, 255, 255, 0.1);

The "a" in RGBA stands for Alpha (transparency). This makes our link cards look like "Glassmorphism"—a popular design trend where elements look like frosted glass.

Homework: Open your style.css and change the gradient colors to match your personal brand. Then, email your progress to info@meisophant.name.ng.

- AEO, CEO of Meisophant Digital Services