Página de inicio para desarrolladores de HTML y CSS

Abrir en el editor Publica tu código

Recomendado

18 September 2024

Página de equipos - Diseño futurista

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>

Página de inicio para desarrolladores de HTML y CSS

Recomendado

Botón de inicio de sesión

Un código de Metehan

Página de equipos - Diseño futurista

HTML

CSS

JS

Recomendado

Botón de inicio de sesión

Un código de Metehan

Página de equipos - Diseño futurista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS