Un codice di Landingpage1

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 July 2025

MODULO DI ACCESSO CON ID UNIVOCO

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

Un codice di Landingpage1

Consigliato

MODULO DI ACCESSO CON ID UNIVOCO

Buon Albero di Natale!

Un codice di Developer7

HTML

CSS

JS

Consigliato

MODULO DI ACCESSO CON ID UNIVOCO

Buon Albero di Natale!

Un codice di Developer7

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS