Ein Code von lebdev

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

24 February 2025

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

<header class="hero">
    <div class="overlay"></div>
    <div class="hero-content">
      <h1>Hello, I'm <span>Your Name</span></h1>
      <p>Creative Developer & Designer</p>
      <a href="#portfolio" class="cta-btn">View My Work</a>
    </div>
  </header>

<section id="about" class="section">
    <div class="container">
      <h2>About Me</h2>
      <p>I design and build beautiful websites with passion and precision. My goal is to make digital experiences that are engaging and effective.</p>
    </div>
  </section>

<section id="portfolio" class="section">
    <div class="container">
      <h2>My Work</h2>
      <div class="grid">
        <div class="card"><img src="https://source.unsplash.com/600x400/?web" alt=""><div class="card-text">Project One</div></div>
        <div class="card"><img src="https://source.unsplash.com/601x400/?design" alt=""><div class="card-text">Project Two</div></div>
        <div class="card"><img src="https://source.unsplash.com/602x400/?code" alt=""><div class="card-text">Project Three</div></div>
      </div>
    </div>
  </section>

<section id="contact" class="section">
    <div class="container">
      <h2>Let's Work Together</h2>
      <p>Have a project in mind? Let's build something amazing.</p>
      <a href="mailto:your@email.com" class="cta-btn">Get in Touch</a>
    </div>
  </section>

<footer>
    <p>© 2025 Your Name. All rights reserved.</p>
  </footer>

</body>
</html>

CSS

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

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f9f9f9;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  position: relative;
  height: 100vh;
  background: url('https://source.unsplash.com/1600x900/?technology,abstract') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero h1 span {
  color: #00c9a7;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.cta-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #00c9a7;
  color: white;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s;
}

.cta-btn:hover {
  background: #00b197;
}

.section {
  padding: 80px 0;
  text-align: center;
}

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #222;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 40px;
}

.card {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  background: white;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
}

.card img {
  width: 100%;
  display: block;
}

.card-text {
  padding: 15px;
  font-weight: 600;
  font-size: 1.1rem;
}

footer {
  text-align: center;
  padding: 20px 0;
  background: #222;
  color: #eee;
}

Ein Code von lebdev

Empfohlen

Ein Code von securearray494

Ein Code von Liamgilles76

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von securearray494

Ein Code von Liamgilles76

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS