Página de inicio para desarrolladores de HTML y CSS

1,511 securearray494

Abrir en el editor Publica tu código

Página de inicio para desarrolladores de HTML y CSS

Recomendado

20 June 2025

Plantilla de panel de administración HTML

14 January 2026

Fragmento de cargador animado CSS

16 January 2026

Plantilla HTML de reproductor de juegos Flash (Ruffle)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Developer</title>
    <style>
        /* --- Reset & Basic Styling --- */
        body, h1, h2, p, ul, li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto Mono', monospace; /* Modern, techy font */
        }

body {
            background-color: #1a1a2e; /* Dark, techy background */
            color: #ffffff; /* Light text */
            line-height: 1.6;
        }

.container {
            width: 80%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

/* --- Header & Navigation --- */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 2px solid #4e4e8e; /* Subtle, futuristic border */
        }

.logo {
            font-size: 2rem;
            font-weight: bold;
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s ease;
        }
        .logo:hover{
            color:#9067c6
        }

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

nav ul li {
            margin-left: 2rem;
        }

nav a {
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s ease;
            position: relative;
            display: inline-block; /* Needed for the underline effect */
            padding-bottom: 3px;  /* Space for the underline */
        }

nav a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px; /* Thickness of the underline */
            background-color: #9067c6; /* Underline color */
            transform: scaleX(0);  /* Initially hidden */
            transform-origin: right;
            transition: transform 0.3s ease;
        }

nav a:hover::after {
            transform: scaleX(1); /* Show on hover */
            transform-origin: left;
        }

/* --- Hero Section --- */
        .hero {
            text-align: center;
            padding: 6rem 0;
            position: relative; /* For the background effect */
            overflow: hidden;    /* Clip the background circles */

}

.hero-title {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            position: relative; /* For z-index */
            z-index: 2;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.hero-subtitle {
            font-size: 1.5rem;
            color: #cccccc;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */

}

.hero-bg-element {
            position: absolute;
            border-radius: 50%; /* Make them circles */
            opacity: 0.1;   /* Subtle */
            z-index: 1;     /* Behind the text */
        }

.circle-1 {
            width: 300px;
            height: 300px;
            background-color: #9067c6;
            top: -100px;
            left: -100px;
             animation: moveCircle1 15s infinite alternate ease-in-out;
        }
        .circle-2 {
            width: 200px;
            height: 200px;
            background-color: #4e4e8e;
            bottom: -50px;
            right: 100px;
            animation: moveCircle2 12s infinite alternate ease-in-out;

}

.btn {
            display: inline-block;
            padding: 1rem 2rem;
            background-color: #9067c6;
            color: #ffffff;
            text-decoration: none;
            border-radius: 30px; /* Rounded corners */
            transition: background-color 0.3s ease, transform 0.2s ease;  /* Smooth transition */
            border: none; /* Remove default button border */
            font-size: 1.1rem;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
        }

.btn:hover {
            background-color: #734b9f;
            transform: translateY(-3px); /* Slight lift on hover */
        }

/* --- About Section --- */
        .about {
            padding: 4rem 0;
            background-color: #24243e; /* Slightly different background */
        }

.about h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-align: center;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.about p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

.about-content{
          display:flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap:wrap;
          gap:2rem;
        }

.about-text{
          flex:1 1 300px;
        }
        .skills-list{
          flex:1 1 250px;
          display:flex;
          flex-wrap:wrap;
          gap:10px;
          justify-content: flex-start;
        }
        .skill-tag{
          background-color:#9067c6;
          color:white;
          padding: 5px 10px;
          border-radius: 5px;
          font-size:0.9rem
        }

/* --- Projects Section --- */
       .projects {
            padding: 4rem 0;
            text-align: center;
        }

.projects h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.project {
            background-color: #24243e;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Hover effects */
        }

.project:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
        }

.project h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color:#9067c6
        }

.project p {
           color: #cccccc;
           margin-bottom:1rem
        }
        .project-tech-stack{
            font-size:0.9rem;
            color:#888888;
            margin-bottom: 1rem;
        }
        .project-links a{
           display: inline-block;
           margin-right:10px;
           color:#9067c6;
           text-decoration: none;

}
        .project-links a:hover{
          text-decoration:underline;
        }

/* --- Contact Section --- */
        .contact {
            padding: 4rem 0;
            background-color: #24243e;
            text-align: center;
        }

.contact h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.contact p {
          margin-bottom: 1.5rem;
        }

.contact-links a {
            display: inline-block;
            margin: 0 1rem;
            font-size: 1.5rem;
            color: #ffffff;
            transition: color 0.3s ease, transform 0.3s ease; /* Add transform to transition */
            text-decoration: none;
        }

.contact-links a:hover {
            color: #9067c6;
            transform: scale(1.2);  /* Enlarge on hover */

}

/* --- Footer --- */
    footer {
      padding:1rem 0;
      text-align:center;
      border-top: 2px solid #4e4e8e; /* Subtle, futuristic border */
      color:#888
    }

/* --- Keyframes for Background Animations --- */
        @keyframes moveCircle1 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(50px, 30px);
            }
            100%{
                transform: translate(0,0)
            }
        }

@keyframes moveCircle2 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-40px, -20px);
            }
             100%{
                transform: translate(0,0)
            }
        }

/* --- Media Queries for Responsiveness --- */

@media (max-width: 768px) {
            .container {
                width: 90%;
            }

header {
                flex-direction: column;
                align-items: center;
            }

nav ul {
                margin-top: 1rem;
                flex-direction: column;
                align-items:center;
            }
            nav ul li{
              margin:0.5rem 0;
            }

.hero-title {
                font-size: 2.5rem;
            }

.hero-subtitle {
                font-size: 1.2rem;
            }

.about-content{
              flex-direction:column;
            }

.project-grid{
              grid-template-columns: 1fr;
            }

}
    </style>

<section class="hero">
            <div class="hero-bg-element circle-1"></div>
            <div class="hero-bg-element circle-2"></div>
            <h1 class="hero-title">Hello, I'm [Your Name]</h1>
            <p class="hero-subtitle">Full-Stack Developer | Problem Solver | Code Enthusiast</p>
            <a href="#projects" class="btn">View My Work</a>
        </section>

<section class="about" id="about">
          <div class="container">
            <h2>About Me</h2>
            <div class="about-content">
              <div class="about-text">
                <p>I'm a passionate developer with a love for building things with code.  I specialize in [Your Specialization - e.g., web development, mobile apps, etc.] and have experience with [List key technologies/languages - e.g., JavaScript, React, Node.js, Python, etc.].</p>
                <p>My goal is to create efficient, user-friendly, and impactful applications. I'm always eager to learn new technologies and tackle challenging problems.</p>
                <p> I am currently looking for a job as [your desired job title]. </p>
              </div>
              <div class="skills-list">
                <span class="skill-tag">JavaScript</span>
                <span class="skill-tag">React</span>
                <span class="skill-tag">Node.js</span>
                <span class="skill-tag">HTML</span>
                <span class="skill-tag">CSS</span>
                <span class="skill-tag">Python</span>
                <span class="skill-tag">SQL</span>
                <span class="skill-tag">Git</span>
                 </div>
            </div>
          </div>
        </section>

<section class="projects" id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project">
                    <h3>Project Title 1</h3>
                    <p class="project-tech-stack">React, Node.js, MongoDB</p>
                    <p>A brief description of the project and what it does. Highlight key features and your contributions.</p>
                    <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>

<div class="project">
                    <h3>Project Title 2</h3>
                     <p class="project-tech-stack">Python, Django, PostgreSQL</p>
                    <p>Description of the second project. Keep it concise and engaging.</p>
                     <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>

<div class="project">
                    <h3>Project Title 3</h3>
                     <p class="project-tech-stack">HTML, CSS, Javascript</p>
                    <p>Description of the second project. Keep it concise and engaging.</p>
                     <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>
                </div>
        </section>

<section class="contact" id="contact">
            <h2>Contact Me</h2>
            <p>I'm always open to new opportunities and collaborations.  Feel free to reach out!</p>
            <div class="contact-links">
                <a href="mailto:your.email@example.com"><i class="fas fa-envelope"></i></a> <a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i></a> <a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i></a> </div>
        </section>
    </div>
    <footer>
      <p>© 2023 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

CSS