Scribd
Upload
3 views3 pages

my website

This document is an HTML template for a personal portfolio website titled 'My Portfolio'. It features a header with navigation links, a hero section introducing the developer 'DonRah', and includes social media icons and buttons for contact and resume. The design utilizes CSS for styling, including a gradient text effect and responsive layout.

Uploaded by

BN GANG YT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views3 pages

my website

This document is an HTML template for a personal portfolio website titled 'My Portfolio'. It features a header with navigation links, a hero section introducing the developer 'DonRah', and includes social media icons and buttons for contact and resume. The design utilizes CSS for styling, including a gradient text effect and responsive layout.

Uploaded by

BN GANG YT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
text-align: center;

background-size: cover;
color: white;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: -1;
}
header {
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.nav-links a {
margin: 0 15px;
text-decoration: none;
color: #00eaff;
font-weight: bold;
transition: 0.3s;
}
.nav-links a:hover {
color: #ff00ff;
}
.hero {
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
position: relative;
}
.hero-text {
max-width: 500px;
text-align: left;
}
.hero-text h1 {
font-size: 42px;
background: linear-gradient(45deg, #00eaff, #ff00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-text p {
font-size: 18px;
opacity: 0.8;
}
.social-icons {
margin-top: 10px;
}
.social-icons img {
width: 40px;
margin: 5px;
filter: drop-shadow(0px 0px 5px rgba(0, 234, 255, 0.7));
}
.hero img {
max-width: 400px;
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
}
.buttons a {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background: linear-gradient(45deg, #00eaff, #ff00ff);
color: white;
text-decoration: none;
border-radius: 5px;
transition: 0.3s;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}
.buttons a:hover {
background: linear-gradient(45deg, #ff00ff, #00eaff);
transform: scale(1.1);
}
</style>
</head>
<body>
<header>
<h2>&lt; DonRah /&gt;</h2>
<nav class="nav-links">
<a href="#skills">⚡ Skills</a>
<a href="#projects">💾 Projects</a>
<a href="#contact">📡 Contact</a>
</nav>
</header>
<section class="hero">
<div class="hero-text">
<h1>Hi all 👋 I'm DonRah</h1>
<p>A passionate Developer 🚀 building futuristic Web and Mobile
applications using JavaScript, AI, and Cloud Technologies.</p>
<div class="social-icons">
<img src="github-icon.png" alt="GitHub">
<img src="linkedin-icon.png" alt="LinkedIn">
<img src="google-icon.png" alt="Google">
<img src="facebook-icon.png" alt="Facebook">
</div>
<div class="buttons">
<a href="#contact">🛠 CONTACT ME</a>
<a href="#resume">📜 SEE MY RESUME</a>
</div>
</div>
<img src="futuristic-illustration.png" alt="Tech Illustration">
</section>
</body>
</html>

You might also like