Un código de Landingpage1

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

5 July 2025

Ejemplo de selector de fecha HTML

5 August 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Learning Platform</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            color: #333;
        }

header {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
            padding: 20px 0;
            text-align: center;
        }

header h1 {
            margin: 0;
            font-size: 2.5rem;
        }

nav {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

nav a {
            color: white;
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.3s;
        }

nav a:hover {
            color: #d0f4ff;
        }

.hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px;
            background-color: #f8f8f8;
        }

.hero .content {
            max-width: 50%;
        }

.hero h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

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

.hero button {
            padding: 10px 20px;
            font-size: 1rem;
            background: #4facfe;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

.hero button:hover {
            background: #00f2fe;
        }

.hero img {
            max-width: 45%;
            border-radius: 10px;
        }

.courses {
            padding: 50px;
            text-align: center;
            background: #eef7fc;
        }

.courses h3 {
            margin-bottom: 30px;
        }

.course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

.course {
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s;
        }

.course img {
            max-width: 100%;
        }

.course:hover {
            transform: scale(1.05);
        }

.course h4 {
            margin: 10px 0;
        }

.course p {
            color: #777;
            margin: 0 0 10px;
        }

.testimonials {
            padding: 50px;
            text-align: center;
        }

.testimonials h3 {
            margin-bottom: 30px;
        }

.testimonial {
            max-width: 600px;
            margin: 0 auto 20px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 20px;
        }

.testimonial p {
            font-style: italic;
            color: #555;
        }

.testimonial h4 {
            margin: 10px 0 0;
        }

.features {
            padding: 50px;
            text-align: center;
            background: #f8f8f8;
        }

.features h3 {
            margin-bottom: 30px;
        }

.feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

.feature {
            text-align: center;
            padding: 20px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
        }

footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

footer p {
            margin: 0;
        }
    </style>
</head>
<body>

<header>
    <h1>Learnify</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#courses">Courses</a>
        <a href="#features">Features</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<section class="hero">
    <div class="content">
        <h2>Unlock Your Potential</h2>
        <p>Learn new skills, advance your career, and achieve your goals with our top-rated online courses.</p>
        <button>Browse Courses</button>
    </div>
    <img src="https://via.placeholder.com/400" alt="Learning Illustration">
</section>

<section id="courses" class="courses">
    <h3>Popular Courses</h3>
    <div class="course-grid">
        <div class="course">
            <img src="https://via.placeholder.com/200" alt="Course 1">
            <h4>Web Development</h4>
            <p>Master HTML, CSS, and JavaScript</p>
        </div>
        <div class="course">
            <img src="https://via.placeholder.com/200" alt="Course 2">
            <h4>Data Science</h4>
            <p>Learn Python and Machine Learning</p>
        </div>
        <div class="course">
            <img src="https://via.placeholder.com/200" alt="Course 3">
            <h4>Graphic Design</h4>
            <p>Adobe Photoshop and Illustrator</p>
        </div>
        <div class="course">
            <img src="https://via.placeholder.com/200" alt="Course 4">
            <h4>Marketing</h4>
            <p>Digital Marketing Strategies</p>
        </div>
    </div>
</section>

<section id="features" class="features">
    <h3>Why Choose Us</h3>
    <div class="feature-grid">
        <div class="feature">
            <h4>Expert Instructors</h4>
            <p>Learn from industry leaders with years of experience.</p>
        </div>
        <div class="feature">
            <h4>Flexible Learning</h4>
            <p>Access courses anytime, anywhere, on any device.</p>
        </div>
        <div class="feature">
            <h4>Certification</h4>
            <p>Earn certificates to showcase your skills.</p>
        </div>
        <div class="feature">
            <h4>Community Support</h4>
            <p>Join a community of learners and grow together.</p>
        </div>
    </div>
</section>

<section id="testimonials" class="testimonials">
    <h3>What Our Students Say</h3>
    <div class="testimonial">
        <p>"Learnify helped me land my dream job! The courses are well-structured and the instructors are amazing."</p>
        <h4>- Sarah M.</h4>
    </div>
    <div class="testimonial">
        <p>"The flexibility of learning at my own pace was perfect for my busy schedule. Highly recommended!"</p>
        <h4>- John D.</h4>
    </div>
</section>

</body>
</html>

Un código de Landingpage1

Recomendado

Ejemplo de selector de fecha HTML

Lámpara de calle interactiva

Un código de Metehan

HTML

CSS

JS

Recomendado

Ejemplo de selector de fecha HTML

Lámpara de calle interactiva

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS