Un code de Landingpage1

2,442 Landing-page

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 July 2025

Modèle HTML CSS de carte de profil Neumorphic

16 January 2026

Code d'intégration du jeu Flash (Ruffle Player)

13 June 2024

DICTIONNAIRE ET PRONONCIATION DES MOTS

HTML

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

CSS