Portfolio Website HTML CSS

Open In Editor Video Publish Your Code

<!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;
}

Portfolio Website HTML CSS

Recommended

CSS Card Layout with Gradient Background

Neomorphism Login Form HTML CSS Code

HTML Light Effects Container with CSS

HTML

CSS

JS

Recommended

CSS Card Layout with Gradient Background

Neomorphism Login Form HTML CSS Code

HTML Light Effects Container with CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS