Plantilla de sitio web de cartera de desarrolladores HTML CSS

Abrir en el editor Publica tu código

Recomendado

3 January 2025

Un código de alexandrestelmaszyk

1 June 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<header>
    <div class="logo">My Portfolio</div>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

<section class="hero">
    <div>
      <h1>Hello, I'm a Developer</h1>
      <p>Specialized in creating beautiful, functional web applications</p>
    </div>
  </section>

<section id="about" class="about">
    <h2>About Me</h2>
    <p>I'm a passionate developer with experience in building dynamic and responsive websites. I love learning new technologies and constantly improving my skills.</p>
  </section>

<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skills-list">
      <div class="skill-card">
        <h3>HTML</h3>
      </div>
      <div class="skill-card">
        <h3>CSS</h3>
      </div>
      <div class="skill-card">
        <h3>JavaScript</h3>
      </div>
      <div class="skill-card">
        <h3>React</h3>
      </div>
      <div class="skill-card">
        <h3>Node.js</h3>
      </div>
    </div>
  </section>

<section id="projects" class="projects">
    <h2>Projects</h2>
    <div class="projects-grid">
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?website" alt="Project">
        <h3>Project 1</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?app" alt="Project">
        <h3>Project 2</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?design" alt="Project">
        <h3>Project 3</h3>
      </div>
    </div>
  </section>

<section id="contact" class="contact">
    <h2>Contact Me</h2>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <input rows="4" placeholder="Your Message" />
      <button type="submit">Send Message</button>
    </form>
  </section>

<footer>
    © 2024 My Portfolio. All Rights Reserved.
  </footer>

</body>
</html>

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Poppins', sans-serif;
      color: #333;
      background-color: #f4f6f9;
      scroll-behavior: smooth;
    }

/* Navbar */
    header {
      position: fixed;
      width: 100%;
      padding: 20px 40px;
      background-color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

header .logo {
      font-size: 24px;
      font-weight: 600;
      color: #222;
    }

header nav a {
      margin: 0 15px;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s ease;
    }

header nav a:hover {
      color: #007BFF;
    }

/* Hero Section */
    .hero {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-image: url('https://source.unsplash.com/featured/?code,developer');
      background-size: cover;
      color: #fff;
      text-align: center;
      padding: 0 20px;
      position: relative;
    }

.hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }

.hero h1 {
      font-size: 3em;
      font-weight: 600;
    }

.hero p {
      font-size: 1.2em;
      margin-top: 10px;
    }

/* About Section */
    .about {
      padding: 100px 40px;
      background-color: #fff;
      text-align: center;
    }

.about h2 {
      font-size: 2.5em;
      font-weight: 600;
      color: #007BFF;
    }

.about p {
      font-size: 1.1em;
      margin-top: 20px;
      color: #555;
      line-height: 1.6;
      max-width: 800px;
      margin: 20px auto;
    }

/* Skills Section */
    .skills {
      padding: 100px 40px;
      background-color: #f9fafc;
    }

.skills h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.skills .skills-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 50px auto;
      gap: 20px;
    }

.skills .skill-card {
      background-color: #fff;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 10px;
      width: 200px;
      text-align: center;
    }

.skills .skill-card h3 {
      color: #333;
      margin: 10px 0;
      font-size: 1.3em;
    }

/* Projects Section */
    .projects {
      padding: 100px 40px;
      background-color: #fff;
    }

.projects h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.projects-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 1200px;
      margin: 50px auto;
      justify-content: center;
    }

.project-card {
      background-color: #f4f6f9;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease;
    }

.project-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

.project-card:hover {
      transform: scale(1.05);
    }

.project-card h3 {
      font-size: 1.5em;
      color: #333;
      padding: 20px;
    }

/* Contact Section */
    .contact {
      padding: 100px 40px;
      background-color: #f9fafc;
      text-align: center;
    }

.contact h2 {
      font-size: 2.5em;
      color: #007BFF;
      font-weight: 600;
    }

.contact form {
      max-width: 600px;
      margin: 50px auto;
    }

.contact input, .contact textarea {
      width: 100%;
      padding: 15px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1em;
    }

.contact button {
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      background-color: #007BFF;
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.contact button:hover {
      background-color: #0056b3;
    }

/* Footer */
    footer {
      padding: 20px;
      text-align: center;
      background-color: #222;
      color: #fff;
      font-size: 0.9em;
    }

Plantilla de sitio web de cartera de desarrolladores HTML CSS

Recomendado

Un código de alexandrestelmaszyk

Animación de botones sin CSS

juego de serpiente

HTML

CSS

JS

Recomendado

Un código de alexandrestelmaszyk

Animación de botones sin CSS

juego de serpiente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS