Cartera

2,006 idrisse2319

Abrir en el editor Publica tu código

Recomendado

21 May 2025

Página de inicio de la cartera

23 March 2025

Cartera de dinero

17 July 2024

Plantilla de sitio web de cartera HTML 2024

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name | Web Designer Portfolio</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

html {
            scroll-behavior: smooth;
        }

body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

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

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

.section {
            padding: 5rem 0;
        }

.section-title {
            font-size: 2.5rem;
            margin-bottom: 3rem;
            text-align: center;
            position: relative;
        }

.section-title:after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: #4a6cf7;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

.btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: #4a6cf7;
            color: white;
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.btn:hover {
            background: #3a5ad9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3);
        }

/* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

header.scrolled {
            padding: 0.5rem 0;
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #4a6cf7;
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-link {
            font-weight: 500;
            transition: color 0.3s ease;
        }

.nav-link:hover {
            color: #4a6cf7;
        }

.hamburger {
            display: none;
            cursor: pointer;
        }

.hamburger div {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 5px 0;
            transition: all 0.3s ease;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            position: relative;
            overflow: hidden;
        }

.hero:before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(74, 108, 247, 0.1);
            z-index: 0;
        }

.hero:after {
            content: '';
            position: absolute;
            bottom: -100px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(74, 108, 247, 0.05);
            z-index: 0;
        }

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

.hero-greeting {
            font-size: 1.2rem;
            color: #4a6cf7;
            margin-bottom: 1rem;
        }

.hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

.hero-subtitle {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 2rem;
        }

.hero-description {
            max-width: 600px;
            margin-bottom: 2rem;
            color: #666;
        }

.hero-cta {
            display: flex;
            gap: 1rem;
        }

.btn-secondary {
            background: transparent;
            color: #4a6cf7;
            border: 2px solid #4a6cf7;
        }

.btn-secondary:hover {
            background: #4a6cf7;
            color: white;
        }

/* Projects Section */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }

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

.project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.project-img {
            height: 200px;
            background-color: #eee;
            position: relative;
            overflow: hidden;
        }

.project-img-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #4a6cf7 0%, #6a89ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

.project-content {
            padding: 1.5rem;
        }

.project-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

.project-category {
            color: #4a6cf7;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

.project-description {
            color: #666;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
        }

.project-link {
            display: inline-block;
            color: #4a6cf7;
            font-weight: 500;
            transition: all 0.3s ease;
        }

.project-link:hover {
            color: #3a5ad9;
            transform: translateX(5px);
        }

/* About Section */
        .about {
            background-color: white;
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 4rem;
        }

.about-img {
            flex: 1;
            max-width: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.about-img-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(135deg, #4a6cf7 0%, #6a89ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

.about-text {
            flex: 1;
        }

.about-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

.about-title:after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: #4a6cf7;
            bottom: -10px;
            left: 0;
        }

.about-description {
            margin-bottom: 2rem;
            color: #666;
        }

/* Skills Section */
        .skills-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }

.skill-category {
            flex: 1;
            min-width: 250px;
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.skill-category-title {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            text-align: center;
            color: #4a6cf7;
            position: relative;
        }

.skill-category-title:after {
            content: '';
            position: absolute;
            width: 30px;
            height: 2px;
            background: #4a6cf7;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
        }

.skill-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

.skill-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.skill-name {
            font-weight: 500;
        }

.skill-bar {
            width: 100%;
            height: 8px;
            background-color: #eee;
            border-radius: 4px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

.skill-progress {
            height: 100%;
            background: linear-gradient(90deg, #4a6cf7, #6a89ff);
            border-radius: 4px;
        }

/* Contact Section */
        .contact {
            background-color: white;
        }

.contact-container {
            display: flex;
            gap: 4rem;
        }

.contact-info {
            flex: 1;
        }

.contact-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

.contact-title:after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: #4a6cf7;
            bottom: -10px;
            left: 0;
        }

.contact-description {
            margin-bottom: 2rem;
            color: #666;
        }

.contact-details {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
        }

.contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.contact-icon {
            width: 40px;
            height: 40px;
            background: rgba(74, 108, 247, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4a6cf7;
        }

.contact-form {
            flex: 1;
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: #4a6cf7;
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        footer {
            background-color: #2d2e32;
            color: white;
            padding: 3rem 0;
        }

.footer-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.footer-logo {
            font-size: 1.5rem;
            font-weight: 700;
        }

.footer-links {
            display: flex;
            gap: 1.5rem;
        }

.footer-link {
            transition: color 0.3s ease;
        }

.footer-link:hover {
            color: #4a6cf7;
        }

.footer-social {
            display: flex;
            gap: 1rem;
        }

.social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.social-icon:hover {
            background: #4a6cf7;
            transform: translateY(-3px);
        }

.copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background: #4a6cf7;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

.back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background: #3a5ad9;
            transform: translateY(-3px);
        }

/* Responsive Styles */
        @media (max-width: 991px) {
            .section-title {
                font-size: 2rem;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .about-content {
                flex-direction: column;
                gap: 2rem;
            }
            
            .about-img {
                max-width: 100%;
            }
            
            .contact-container {
                flex-direction: column;
            }
        }

@media (max-width: 768px) {
            .header-container {
                padding: 1rem;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background: white;
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                gap: 1.5rem;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                transform: translateY(-150%);
                transition: transform 0.3s ease;
                z-index: 999;
            }
            
            .nav-links.active {
                transform: translateY(0);
            }
            
            .hamburger {
                display: block;
            }
            
            .hamburger.active div:nth-child(1) {
                transform: rotate(45deg) translate(5px, 6px);
            }
            
            .hamburger.active div:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active div:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -6px);
            }
            
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                flex-direction: column;
                gap: 2rem;
                text-align: center;
            }
            
            .footer-links {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    
    <header id="header">
        <div class="header-container">
            <a href="#" class="logo">Your Name</a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#projects" class="nav-link">Projects</a></li>
                    <li><a href="#about" class="nav-link">About</a></li>
                    <li><a href="#skills" class="nav-link">Skills</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </nav>
        </div>
    </header>

<section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <p class="hero-greeting">Hello, I'm</p>
                <h1 class="hero-title">Your Name</h1>
                <h2 class="hero-subtitle">Web Designer & Developer</h2>
                <p class="hero-description">I create beautiful, functional, and user-friendly websites that help businesses grow and succeed online. With a passion for clean design and attention to detail, I deliver exceptional digital experiences.</p>
                <div class="hero-cta">
                    <a href="#projects" class="btn">View My Work</a>
                    <a href="#contact" class="btn btn-secondary">Contact Me</a>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="section">
        <div class="container">
            <h2 class="section-title">My Projects</h2>
            <div class="projects-grid">
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">E-Commerce Website</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">Web Design & Development</span>
                        <h3 class="project-title">Modern E-Commerce Platform</h3>
                        <p class="project-description">A fully responsive e-commerce website with a sleek design, intuitive navigation, and seamless checkout process.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">Restaurant Website</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">UI/UX Design</span>
                        <h3 class="project-title">Restaurant Website Redesign</h3>
                        <p class="project-description">A modern restaurant website featuring online reservations, menu display, and an elegant user interface.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">Portfolio Website</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">Web Development</span>
                        <h3 class="project-title">Photographer Portfolio</h3>
                        <p class="project-description">A minimalist portfolio website for a professional photographer with gallery features and contact form.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">Real Estate Website</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">Web Design & Development</span>
                        <h3 class="project-title">Real Estate Listings Platform</h3>
                        <p class="project-description">A comprehensive real estate website with property listings, search functionality, and agent profiles.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">Travel Blog</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">UI/UX Design</span>
                        <h3 class="project-title">Travel Blog Design</h3>
                        <p class="project-description">A visually stunning travel blog with a focus on photography, storytelling, and user engagement.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                
                
                <div class="project-card">
                    <div class="project-img">
                        <div class="project-img-placeholder">Fitness App</div>
                    </div>
                    <div class="project-content">
                        <span class="project-category">Web Application</span>
                        <h3 class="project-title">Fitness Tracking Dashboard</h3>
                        <p class="project-description">An interactive fitness tracking web application with progress charts, workout plans, and nutrition tracking.</p>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="section about">
        <div class="container">
            <h2 class="section-title">About Me</h2>
            <div class="about-content">
                <div class="about-img">
                    <div class="about-img-placeholder">Your Photo</div>
                </div>
                <div class="about-text">
                    <h3 class="about-title">Who I Am</h3>
                    <p class="about-description">I'm a passionate web designer and developer with over 5 years of experience creating beautiful, functional websites. I specialize in crafting user-friendly interfaces that not only look great but also deliver exceptional user experiences.</p>
                    <p class="about-description">My approach combines creative design thinking with technical expertise to build websites that help businesses achieve their goals. I believe that great design should be accessible to everyone, and I work closely with clients to understand their needs and deliver solutions that exceed expectations.</p>
                    <p class="about-description">When I'm not designing or coding, you can find me exploring new design trends, learning new technologies, or enjoying outdoor activities to stay inspired and creative.</p>
                    <a href="#contact" class="btn">Get In Touch</a>
                </div>
            </div>
        </div>
    </section>

<section id="skills" class="section">
        <div class="container">
            <h2 class="section-title">My Skills</h2>
            <div class="skills-container">
                
                <div class="skill-category">
                    <h3 class="skill-category-title">Design</h3>
                    <div class="skill-list">
                        <div class="skill-item">
                            <span class="skill-name">UI/UX Design</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Responsive Design</span>
                            <span>90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Wireframing</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Prototyping</span>
                            <span>80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%;"></div>
                        </div>
                    </div>
                </div>
                
                
                <div class="skill-category">
                    <h3 class="skill-category-title">Frontend</h3>
                    <div class="skill-list">
                        <div class="skill-item">
                            <span class="skill-name">HTML5</span>
                            <span>98%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 98%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">CSS3</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">JavaScript</span>
                            <span>90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Responsive Web Design</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                    </div>
                </div>
                
                
                <div class="skill-category">
                    <h3 class="skill-category-title">Tools & Others</h3>
                    <div class="skill-list">
                        <div class="skill-item">
                            <span class="skill-name">Figma</span>
                            <span>90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Adobe XD</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">Git & GitHub</span>
                            <span>80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%;"></div>
                        </div>
                        
                        <div class="skill-item">
                            <span class="skill-name">SEO Principles</span>
                            <span>75%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 75%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="section contact">
        <div class="container">
            <h2 class="section-title">Get In Touch</h2>
            <div class="contact-container">
                <div class="contact-info">
                    <h3 class="contact-title">Let's Talk</h3>
                    <p class="contact-description">Feel free to reach out if you're looking for a web designer, have a question, or just want to connect.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                </svg>
                            </div>
                            <span>+1 (123) 456-7890</span>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                    <polyline points="22,6 12,13 2,6"></polyline>
                                </svg>
                            </div>
                            <span>yourname@example.com</span>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                    <circle cx="12" cy="10" r="3"></circle>
                                </svg>
                            </div>
                            <span>San Francisco, CA</span>
                        </div>
                    </div>
                </div>
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" id="name" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" id="subject" class="form-control" placeholder="Subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea id="message" class="form-control" placeholder="Your Message" required>

CSS