clean, responsive personal website landing page templates...

You can easily copy the HTML code shown here by clicking the "Copy Code" button. This will copy the entire HTML code to your clipboard, so you can quickly paste it into your own project without manually selecting the text. Just click the button once, and the code is ready to use!

HTML 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 | Personal Website</title>

</head>

<body>

  <div class="container">

    <div class="bg-image">

      <div class="logo">JK</div> <!-- Your initials/logo -->

    </div>

    <div class="content">

      <div class="main-text">

        <h1>Hello, I'm [Your Name]</h1>

        <p>

          Creative professional specializing in web development and design. 

          Passionate about building beautiful, functional digital experiences.

        </p>

      </div>

      <div class="contact-info">

        <div class="contact-item">

          <i class="fas fa-envelope"></i>

          <p>your.email@example.com</p>

        </div>

        <div class="contact-item">

          <i class="fas fa-phone"></i>

          <p>(123) 456-7890</p>

        </div>

        <div class="contact-item">

          <i class="fas fa-map-marker-alt"></i>

          <p>New York, USA</p>

        </div>

      </div>

      <footer>

        <p>&copy; 2023 Your Name. All rights reserved.</p>

      </footer>

    </div>

  </div>

</body>

</html>

You can easily copy the CSS code shown here by clicking the "Copy Code" button. This will copy the entire CSS code to your clipboard, so you can quickly paste it into your own project without manually selecting the text.

CSS Code 
/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  overflow-x: hidden;
}

/* Fullscreen Layout */
.container {
  display: flex;
  min-height: 100vh;
}

/* Left Side - Background Image */
.bg-image {
  flex: 1;
  background: url('/1000079847.gif') center/cover no-repeat;
  position: relative;
}

.logo {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 24px;
  color: #333;
}

/* Right Side - Content */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10%;
  background: #f9f9f9;
}

/* Center Text */
.main-text {
  text-align: center;
  margin-bottom: 60px;
}

.main-text h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #333;
}

.main-text p {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.6;
}

/* Contact Info */
.contact-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}

.contact-item {
  text-align: center;
}

.contact-item i {
  font-size: 1.5rem;
  color: #555;
  margin-bottom: 10px;
}

.contact-item p {
  color: #777;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .bg-image {
    min-height: 40vh;
  }

  .content {
    padding: 40px 20px;
  }

  .contact-info {
    flex-direction: column;
    gap: 20px;
  }
}

You can easily copy the Font Awesome stylesheet link by clicking the "Copy Link" button. This will copy the exact HTML code needed to include Font Awesome icons in your project. Just paste it into the <head> section of your HTML file.

Font Awesome Link

Info 
The background image used here is just an example. 
You can easily replace it with your own image by changing the URL 
inside background: url('your-image-path'). 
This lets you personalize the design with any image you like.

Key Features:

  1. Split Screen Layout
    • Left side: Fullscreen background image
    • Right side: Content area with light background
  2. Logo Placement
    • Positioned in top-left corner of the image
    • Circular design (customizable)
  3. Centered Main Text
    • Your name as heading
    • Short bio/description paragraph
  4. Contact Information
    • Email, phone, and location
    • Font Awesome icons for visual appeal
  5. Footer
    • Copyright notice
    • Sticks to bottom of content area
  6. Responsive Design
    • Stacks vertically on mobile devices
    • Adjusts padding and spacing

Customization Tips:

  1. Replace Placeholders
    • Change background image URL
    • Update logo initials/text
    • Add your personal information
  2. Color Scheme
    • Modify background colors in CSS
    • Change text colors for better contrast
  3. Add More Sections
    • Insert social media links
    • Add a "Projects" or "Skills" section
    • Include a call-to-action button
  4. Enhancements
    • Add smooth scroll effects
    • Include a navigation menu
    • Implement dark mode toggle