Un codice di lebdev

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

20 April 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;
}

Un codice di lebdev

Consigliato

Un codice di Metehan

Un codice di gherhz

bandiera nazionale

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di gherhz

bandiera nazionale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS