HTML Problema con funzioni HTML5

OROX · 13 Novembre 2020

ciao è da poco che ho iniziato a programmare html e css, mi potete aiutare a modificare questo codice mi servirebbe che ognuna di quelle opzioni faccia la funzione scritta tipo la prima che porta alla posta la seconda che avvia la chiamata e l'ultima che apre il navigatore. spero di essermi spiegato bene.

HTML:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
    <div class="contact-info">
        <div class="card">
            <i class="icon fas fa-envelope"></i>
            <div class="card-content">
                <h3>Email</h3>
                <span>[email protected]</span>
            </div>
        </div>

        <div class="card">
            <i class="icon fas fa-phone"></i>
            <div class="card-content">
                <h3>Phone Number</h3>
                <span>+00000000000</span>
            </div>
        </div>

        <div class="card">
            <i class="icon fas fa-map-marker-alt"></i>
            <div class="card-content">
                <h3>Location</h3>
                <span>United States</span>
            </div>
        </div>
    </div>
    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}

body{
    height: 100vh;
    background: url(bg.jpg) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.contact-info{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card{
    position: relative;
    flex: 1;
    max-width: 300px;
    height: 140px;
    background-color: #444;
    margin: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon{
    font-size: 32px;
    color: #ea8685;
    transition: .3s linear;
}

.card:hover .icon{
    transform: scale(4);
    opacity: 0;
}

.card-content h3,
.card-content span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
}

.card-content h3{
    top: 20px;
    text-transform: uppercase;
    color: #ea8685;
}

.card-content span{
    bottom: 20px;
    color: #fff;
    font-weight: 500;
}

.card:hover h3{
    opacity: 1;
    top: 46px;
    transition: .3s linear .3s;
}

.card:hover span{
    opacity: 1;
    bottom: 46px;
    transition: .3s linear .3s;
}


@media screen and (max-width:900px){
    .card{
        flex: 100%;
        max-width: 500px;
    }
}
    </style>
</body>
</html>

Dazorn · 13 Novembre 2020

orox ha detto:

ciao è da poco che ho iniziato a programmare html e css, mi potete aiutare a modificare questo codice mi servirebbe che ognuna di quelle opzioni faccia la funzione scritta tipo la prima che porta alla posta la seconda che avvia la chiamata e l'ultima che apre il navigatore. spero di essermi spiegato bene.

HTML:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
    <div class="contact-info">
        <div class="card">
            <i class="icon fas fa-envelope"></i>
            <div class="card-content">
                <h3>Email</h3>
                <span>[email protected]</span>
            </div>
        </div>

        <div class="card">
            <i class="icon fas fa-phone"></i>
            <div class="card-content">
                <h3>Phone Number</h3>
                <span>+00000000000</span>
            </div>
        </div>

        <div class="card">
            <i class="icon fas fa-map-marker-alt"></i>
            <div class="card-content">
                <h3>Location</h3>
                <span>United States</span>
            </div>
        </div>
    </div>
    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}

body{
    height: 100vh;
    background: url(bg.jpg) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.contact-info{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card{
    position: relative;
    flex: 1;
    max-width: 300px;
    height: 140px;
    background-color: #444;
    margin: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon{
    font-size: 32px;
    color: #ea8685;
    transition: .3s linear;
}

.card:hover .icon{
    transform: scale(4);
    opacity: 0;
}

.card-content h3,
.card-content span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
}

.card-content h3{
    top: 20px;
    text-transform: uppercase;
    color: #ea8685;
}

.card-content span{
    bottom: 20px;
    color: #fff;
    font-weight: 500;
}

.card:hover h3{
    opacity: 1;
    top: 46px;
    transition: .3s linear .3s;
}

.card:hover span{
    opacity: 1;
    bottom: 46px;
    transition: .3s linear .3s;
}


@media screen and (max-width:900px){
    .card{
        flex: 100%;
        max-width: 500px;
    }
}
    </style>
</body>
</html>

Ciao @orox , in primis ti consiglio di non utilizzare il termine programmare quando parli di HTML o CSS, in quanto pur trattandosi di linguaggi informatici non sono propriamente dei linguaggi di programmazione, bensì dei linguaggi di markup legati al contenuto ed all'apparenza estetica di una pagina web.
Per quanto riguarda il tuo problema, mi sembra di capire che tu debba implementare delle funzioni legate ad HTML5, cioè invio di email, chiamate telefoniche e posizionamento GPS. Puoi aprire automaticamente un client di posta qualunque, impostando contenuto e titolo del messaggio (più varie opzioni), segui pure questo articolo per maggiori informazioni. Similarmente puoi avviare chiamate telefoniche dal client in utilizzo tramite attributi appositi, leggi pure qua.
Infine, per quanto riguarda la questione navigatore, dovresti fare appoggio alle API di Google Maps, in quanto non vi è un'applicazione standardizzata per aprire link di questa tipologia ed i sistemi operativi in commericio sono veramente vari. Puoi comunque provare con le metodologie descritte qui.
Fammi sapere

P.S.: Non ti ho fornito codice pronto all'uso, perchè preferisco tu impara da te come risolvere il problema. Questo è lo spirito di Inforge.

OROX · 13 Novembre 2020

Dazorn ha detto:
Ciao @orox , in primis ti consiglio di non utilizzare il termine programmare quando parli di HTML o CSS, in quanto pur trattandosi di linguaggi informatici non sono propriamente dei linguaggi di programmazione, bensì dei linguaggi di markup legati al contenuto ed all'apparenza estetica di una pagina web.
Per quanto riguarda il tuo problema, mi sembra di capire che tu debba implementare delle funzioni legate ad HTML5, cioè invio di email, chiamate telefoniche e posizionamento GPS. Puoi aprire automaticamente un client di posta qualunque, impostando contenuto e titolo del messaggio (più varie opzioni), segui pure questo articolo per maggiori informazioni. Similarmente puoi avviare chiamate telefoniche dal client in utilizzo tramite attributi appositi, leggi pure qua.
Infine, per quanto riguarda la questione navigatore, dovresti fare appoggio alle API di Google Maps, in quanto non vi è un'applicazione standardizzata per aprire link di questa tipologia ed i sistemi operativi in commericio sono veramente vari. Puoi comunque provare con le metodologie descritte qui.
Fammi sapere

P.S.: Non ti ho fornito codice pronto all'uso, perchè preferisco tu impara da te come risolvere il problema. Questo è lo spirito di Inforge.

sta sera ci smanetterò un po grazie mille

Messaggio unito automaticamente: 13 Novembre 2020

Dazorn ha detto:
Ciao @orox , in primis ti consiglio di non utilizzare il termine programmare quando parli di HTML o CSS, in quanto pur trattandosi di linguaggi informatici non sono propriamente dei linguaggi di programmazione, bensì dei linguaggi di markup legati al contenuto ed all'apparenza estetica di una pagina web.
Per quanto riguarda il tuo problema, mi sembra di capire che tu debba implementare delle funzioni legate ad HTML5, cioè invio di email, chiamate telefoniche e posizionamento GPS. Puoi aprire automaticamente un client di posta qualunque, impostando contenuto e titolo del messaggio (più varie opzioni), segui pure questo articolo per maggiori informazioni. Similarmente puoi avviare chiamate telefoniche dal client in utilizzo tramite attributi appositi, leggi pure qua.
Infine, per quanto riguarda la questione navigatore, dovresti fare appoggio alle API di Google Maps, in quanto non vi è un'applicazione standardizzata per aprire link di questa tipologia ed i sistemi operativi in commericio sono veramente vari. Puoi comunque provare con le metodologie descritte qui.
Fammi sapere

P.S.: Non ti ho fornito codice pronto all'uso, perchè preferisco tu impara da te come risolvere il problema. Questo è lo spirito di Inforge.

@Dazorn ci sono riuscito solo che funziona solo se clicchi il testo volevo sapere se cera modo di farlo funzionare anche io io clicco l'angolo del riquadro.
comunque grazie lo stesso se non ce modo mi va bene anche così

Cerca

HTML Problema con funzioni HTML5

OROX

Dazorn

OROX

DISCUSSIONI SIMILI