Ein Code von Landingpage1

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

26 December 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>

Ein Code von Landingpage1

Empfohlen

Ein Code von pan4o

Ein Code von JEBJEB

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von pan4o

Ein Code von JEBJEB

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS