Hugging Face's logo

Spaces:
Temporalai
/
deepsite-project
Running

App Files Community
deepsite-project / index.html
Temporalai's picture
Temporalai
Make this a a stunning portfolio page
752ebff verified
Raw History Blame Contribute Delete
10.7 kB
<!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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6c63ff;
--dark: #1e1e1e;
--light: #f8f9fa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--light);
color: var(--dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 24px;
font-weight: 700;
color: var(--primary);
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary);
}
.hero {
height: 100vh;
display: flex;
align-items: center;
padding-top: 80px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.hero-content {
max-width: 600px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
color: #666;
}
.btn {
display: inline-block;
background-color: var(--primary);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
}
.hero-image {
position: absolute;
right: 0;
width: 50%;
height: 100%;
background: url('http://static.photos/technology/640x360/123') no-repeat center/cover;
border-radius: 20px 0 0 20px;
}
section {
padding: 100px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 36px;
color: var(--primary);
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-image {
height: 200px;
background: url('http://static.photos/technology/320x240') no-repeat center/cover;
}
.project-content {
padding: 20px;
}
.project-content h3 {
margin-bottom: 10px;
}
.project-content p {
color: #666;
margin-bottom: 15px;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.skill {
background: white;
padding: 10px 20px;
border-radius: 30px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
footer {
background: var(--dark);
color: white;
text-align: center;
padding: 30px 0;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.social-links a {
color: white;
font-size: 20px;
transition: color 0.3s;
}
.social-links a:hover {
color: var(--primary);
}
@media (max-width: 768px) {
.hero-image {
display: none;
}
.hero-content {
max-width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">Portfolio.</div>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</div>
</nav>
</div>
</header>
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h1>Hi, I'm <span style="color: var(--primary);">[Your Name]</span></h1>
<p>I'm a passionate [Your Profession] specializing in creating beautiful, functional digital experiences. Let's build something amazing together.</p>
<a href="#contact" class="btn">Get In Touch</a>
</div>
<div class="hero-image"></div>
</div>
</section>
<section id="projects">
<div class="container">
<div class="section-title">
<h2>My Projects</h2>
</div>
<div class="projects">
<div class="project-card">
<div class="project-image"></div>
<div class="project-content">
<h3>Project Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<a href="#" class="btn">View Project</a>
</div>
</div>
<div class="project-card">
<div class="project-image" style="background-image: url('http://static.photos/technology/320x240/2')"></div>
<div class="project-content">
<h3>Project Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<a href="#" class="btn">View Project</a>
</div>
</div>
<div class="project-card">
<div class="project-image" style="background-image: url('http://static.photos/technology/320x240/3')"></div>
<div class="project-content">
<h3>Project Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<a href="#" class="btn">View Project</a>
</div>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="container">
<div class="section-title">
<h2>My Skills</h2>
</div>
<div class="skills">
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">React</div>
<div class="skill">Node.js</div>
<div class="skill">UI/UX Design</div>
<div class="skill">Figma</div>
<div class="skill">Git</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="section-title">
<h2>Get In Touch</h2>
</div>
<form style="max-width: 600px; margin: 0 auto;">
<div style="margin-bottom: 20px;">
<input type="text" placeholder="Your Name" style="width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #ddd;">
</div>
<div style="margin-bottom: 20px;">
<input type="email" placeholder="Your Email" style="width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #ddd;">
</div>
<div style="margin-bottom: 20px;">
<textarea placeholder="Your Message" rows="5" style="width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #ddd;"></textarea>
</div>
<button type="submit" class="btn" style="border: none; cursor: pointer;">Send Message</button>
</form>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2023 My Portfolio. All rights reserved.</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Header shadow on scroll
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});
</script>
</body>
</html>