OneCompiler

Samara Kurami Portfolio

299


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio</title> <link rel="stylesheet" href="style.css"> <style> /* Reset and Fonts */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body {
background-color: #0d1117;
color: #c9d1d9;
line-height: 1.6;
}

/* Navigation */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: #161b22;
}

header h1 {
color: #00ffff;
font-size: 24px;
}

header ul {
display: flex;
list-style: none;
}

header ul li {
margin: 0 15px;
}

header ul li a {
color: #c9d1d9;
text-decoration: none;
font-size: 16px;
transition: color 0.3s;
}

header ul li a:hover {
color: #00ffff;
}

/* Intro Section */
.intro {
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px;
}

.intro .content {
max-width: 50%;
}

.intro h2 {
font-size: 32px;
color: #00ffff;
}

.intro h1 {
font-size: 48px;
margin: 10px 0;
}

.intro h3 {
font-size: 24px;
margin-bottom: 20px;
}

.intro h3 .highlight {
color: #00ffff;
}

.intro p {
font-size: 18px;
margin-bottom: 20px;
}

.buttons .btn {
display: inline-block;
background-color: #00ffff;
color: #0d1117;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}

.buttons .btn:hover {
background-color: #008b8b;
}

/* Profile Picture */
.profile-picture {
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, #00ffff, #161b22);
display: flex;
justify-content: center;
align-items: center;
}

.profile-picture img {
width: 90%;
height: 90%;
border-radius: 50%;
border: 5px solid #161b22;
}

/* Social Icons */
.social-icons {
margin-top: 20px;
}

.social-icons a {
margin-right: 10px;
color: #c9d1d9;
font-size: 20px;
transition: color 0.3s;
}

.social-icons a:hover {
color: #00ffff;
}
</style>

</head> <body> <header> <nav> <h1>Portfolio.</h1> <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section class="intro"> <div class="content"> <h2>Hello, It's Me</h2> <h1>Samara kurami</h1> <h3>And I'm a <span class="highlight">Web Developer</span></h3> <p> I'm a web designer with extensive experience for over 3 years. Expertise is to create and design websites, frontend development, and much more. </p> <div class="buttons"> <a href="#about" class="btn">More About Me</a> </div> <div class="social-icons"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <div class="profile-picture"> <img src="[1729681059655.jpg](https://static.onecompiler.com/images/posts/435cwsphd/1729681059655.jpg)" alt="Profile"> </div> </section> </main> </body> </html>