Davide Donati by @CHOKOPOWER - Codewith.it

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

Referenze

maxImposta il valore numerico o temporale massimo per un elemento input
selectedPre-seleziona un elemento di input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<a>Inserisce link e collegamenti ipertestuali
<b>Formatta il testo in grassetto
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione a cazzo a casa

UFFICIALE SITO REGIONI

Mundane Monday\\

JS Oggetti ed eventi es1

La mia prima pagina HTML

X-Dsigner (Blu Eletric)– Web & U

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Davide Donati</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <div class="header">
            <img src="Foto Davide Donati - profilo.jpeg" alt="Davide Donati" class="profile-pic">
            <h1>Davide Donati</h1>
            <p>DESIGNER TECNICO MULTIDISCIPLINARE: Disegno Tecnico, Grafica e Web Designer</p>
        </div>
        <div class="contact-info">
            <div class="contact-item">
                <img src="phone-icon.png.png" alt="Chiama" class="icon">
                <a href="tel:+393282841148" class="contact-link">
                    <span>CHIAMA</span>
                </a>
                
            </div>
            <div class="contact-item">
                <img src="mail-icon.png.png" alt="Email" class="icon">
                <a href="mailto:davide.donati@tecnosr.it" class="contact-link">
                    <span>EMAIL</span>
                </a>
                
            </div>
        </div>
            <div class="dati">
                <p>P.Iva: 04184421206</p>
                <p>C.F.: DNTDVD86M31H199D</p>
                <p>SDI: M5UXCR1</p>
            <hr class="thin-line">
            </div>
            <div class="details">
            <div class="group-padding"></div>
            <div class="detail-item">
                <img src="telefono-lolosport.png" alt="Icona" class="detail-icon" style="width: 24px;height: 24px;float: left;">
                <p>+39 328 2841148</p>
            </div>
            <div class="group-padding"></div>
            <div class="detail-item">
                <img src="email-lolosport.png" alt="Icona" class="detail-icon" style="width: 24px;height: 24px;float: left;">
                <p>davide.donati@tecnosr.it</p>
            </div>
            <div class="group-padding"></div>
            <div class="detail-item">
                <img src="gear-setting-icon-png.webp" alt="Icona" class="detail-icon" style="width: 24px;height: 24px;float: left;">
                <p>Libero professionista</br>
            DESIGNER TECNICO MULTIDISCIPLINARE:</br>Disegno Tecnico, Grafica e Web Designer</p>
            </div>
            <div class="group-padding"></div>
            <div class="detail-item">
                <img src="dove-siamo-lolosport.png" alt="Icona" class=".detail-icon" style="width: 24px;height: 24px;float: left;">
            <p>Via della Fornace</br>Molinella, 40062 - Bologna (BO) - Italia</p>
        </div>
        <div class="group-padding"></div>
        <div class="actions">
            <a href="#" class="action-link"> <img src="share.png" alt="Condividi" class="icon"> </a>
            <a href="#" class="action-link"> <img src="contacts-icon-png.png" alt="Aggiungi Contatto" class="icon"> </a>
        </div>
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #1e3c72;
    background: linear-gradient(to bottom, #1e3c72, #2a5298);
    color: white;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.card {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    margin: 20px;
}

.header {
    margin-bottom: 20px;
    padding-top: 30px;
}

.profile-pic {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
    width: 45%;
}

.contact-link {
    text-decoration: none;
    color: white;
    font-size: 14px;
    margin-top: 5px;
}

.icon {
    width: 24px;
    height: 24px;
}

.thin-line {
    border: none;
    height: 1px;
    background-color: white;
    width: 100%;
    margin: 10px 0 0 0;
}

.details {
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.5;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.detail-item img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    margin-left: 70px;
}

.details p {
    margin: 5px 0;
}

.group-padding {
    height: 15px;
}

.actions {
    display: flex;
    justify-content: space-around;
}

.action-link {
    text-decoration: none;
    color: white;
}

.action-link .icon {
    width: 32px;
    height: 32px;
}

@media screen and (max-width: 600px) {
    .contact-info {
        flex-direction: column;
    }

    .contact-item {
        width: 80%;
        margin-bottom: 15px;
    }
}