PDF No Limits by @mariobruz - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

widthImposta la larghezza di un elemento HTML
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<head>Tag primario di un documento HTML
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Users

Log in to search for users

Explore

Find inspiration

Blocco tasto destro mouse

noc-fisicas-reroll-parcial1

landing il colibri\\

Esercitazione 3

Banner_cercatutto

Esercizio 1 - 27/11

Éclat Couture - Alta Moda Artigia

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF No Limits</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <a href="#" class="brand">PDF No Limits</a>
        <nav class="menu">
            <a href="#">Unisci PDF</a>
            <a href="#">Dividi PDF</a>
            <a href="#">Comprimi PDF</a>
        </nav>
    </header>

    <main class="content">
        <h1>Benvenuto su PDF No Limits</h1>
        <p>Seleziona un’operazione e carica il tuo file PDF per iniziare.</p>
        <form action="#" method="post" enctype="multipart/form-data">
            <label for="pdf_file">Carica il tuo PDF:</label>
            <input type="file" name="pdf_file" id="pdf_file" required>
            
            <label for="operation">Seleziona Operazione:</label>
            <select name="operation" id="operation">
                <option value="compress">Comprimi PDF</option>
                <option value="merge">Unisci PDF</option>
                <option value="extract">Estrai Pagine</option>
            </select>
            
            <button type="submit">Esegui Operazione</button>
        </form>
    </main>

    <footer class="footer">
        <p>&copy; 2024 PDF No Limits. Tutti i diritti riservati.</p>
    </footer>
</body>
</html>

/* Reset di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fb;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #0073e6;
    padding: 10px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    font-size: 1.5em;
    color: white;
    text-decoration: none;
}

.menu a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

.content {
    flex: 1;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    font-size: 2em;
    color: #0073e6;
}

form {
    margin-top: 20px;
}

label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

input[type="file"], select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #0073e6;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

button:hover {
    background-color: #005bb5;
}

.footer {
    text-align: center;
    padding: 10px;
    background-color: #0073e6;
    color: white;
}