Ehi , Abbiamo una pagina Facebook, Metti mi piace alla pagina per restare aggiornato su Natnox.com! (Clicca qui).

BETA

Tag: Layout, Home, blog, Responsive,

Scrivi nuovo codice

Commenta

877 Visite

Layout Home blog [Responsive]

30/07/2020, 16:26

Natnox

Valutazione:

HTML

Salva Codice HTML

<!DOCTYPE html>
<html lang="it">

<head>
    <title>MyCinema - Esercizio open lab</title>
    <meta name="description" content="Esercizio open lab" />
    <meta name="keywords" content="esercizio, open lab, open, lab" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6e3bfb6082.js" ></script>
    <link href="./css/style.css" rel="stylesheet">
    <style>

</style>

</head>

<body>
    <div id="login" class="overlay">
        <div class="popup">
            <a class="chiudi" href="#!" title="Chiudi">&times;</a>
            <span style=" font-weight: 600;   font-size: 20px;">Accedi</span>
            <br /><br />
            <form method="post" action="login.php">
                <label for="email">E-mail:</label>
                <input type="text" id="email" size="40" maxlength="85" placeholder="es.login@esempio.com..." />
                <br />
                <label for="password">Password:</label>
                <input type="password" id="password" placeholder="Inserisci una password..." />
                <input type="submit" class="buttonform" value="Invia" />

</form>
        </div>
    </div>

<div class="topheader">
        <h1 id="logo">MyCinema</h1>
        <div class="banner">
            <p class="bannertesto">Banner Pubblicitario</p>
        </div>
    </div>

<nav class="headermenu">
            <div class="menu left">
                <li><a href="./index.html" class="menulink attivo" title="Home"><i class="fas fa-home"></i></a></li>
                <li><a href="#" class="menulink">Film <i class="fas fa-caret-down" style="font-size: 16px;"></i></a></li>
                <li><a href="#" class="menulink">Serie TV <i class="fas fa-caret-down" style="font-size: 16px;"></i></a></li>
                <li><a href="#" class="menulink">Cinema</a></li>
            </div>
            <div class="menu right">
                <li><a href="#login" class="login">Login</a></li>

</div>

</nav>

</header>

<div class="container">
        <div class="post">
            <div class="card-wrap">
                <div class="card" style="color: #333333; text-decoration: none">
                    <img class="card-img" src="https://via.placeholder.com/150" alt="Esempio" />
                    <a href="#" class="card-header" title="Da dove viene?">Da dove viene?</a>
                    <br /><span class="card-data">Pubblicato: 25 Luglio 2020, 23:47 </span><br /><br />
                    <span class="card-info">Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri. Risale ad un classico della letteratura latina del 45 AC, cosa che lo rende vecchio di 2000 anni...</span>
                </div>

<div class="card " style="color: #333333; text-decoration: none ">
                    <img class="card-img " src="https://via.placeholder.com/150" alt="box office" />
                    <a href="#" class="card-header " title="Dove posso trovarlo?"> Dove posso trovarlo?</a>
                    <br /><span class="card-data">Pubblicato: 20 Luglio 2020, 08:47 </span> <br /><br />
                    <span class="card-info ">Esistono innumerevoli variazioni dei passaggi del Lorem Ipsum, ma la maggior parte hanno subito delle variazioni del tempo, a causa dell’inserimento di passaggi ironici...</span>
                </div>

<div class="card " style="color: #333333; text-decoration: none ">
                    <img class="card-img " src="https://via.placeholder.com/150" alt="box office" />
                    <a href="#" class="card-header " title="Il passaggio standard del Lorem Ipsum, utilizzato sin dal sedicesimo secolo"> Il passaggio standard del Lorem Ipsum, utilizzato sin dal sedicesimo secolo</a>
                    <br /><span class="card-data">Pubblicato: 05 Luglio 2020, 09:47 </span> <br /><br />
                    <span class="card-info ">Lorem ipsum dolor sit amet, consectetur adipiscing elit... </span>
                </div>

</div>

<img class="left image_article2 " src="https://via.placeholder.com/150 " alt="articolo " />
                    <div class="testo2 right ">
                        <h3>Cos’è Lorem Ipsum?</h3>
                        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare
                        un testo campione.
                    </div>
                    <br style="clear: both; " />

</article>
            </section>

<section>
                <article>
                    <img class="right image_article2 " src="https://via.placeholder.com/150 " alt="articolo " />
                    <div class="testo2 left ">
                        <h3>Perchè lo utilizziamo?</h3>
                        È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di
                        quanto avviene se si utilizzano brevi frasi
                    </div>
                    <br style="clear: both; " />
                </article>
            </section>

<section>
                <article>
                    <img class="left image_article2 " src="https://via.placeholder.com/150 " alt="articolo " />
                    <div class="testo2 right ">
                        <h3>Cos’è Lorem Ipsum?</h3>
                        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare
                        un testo campione.
                    </div>
                    <br style="clear: both; " />
                </article>
            </section>

</div>

<section>
                <article>
                    <img class="left image_article " src="https://via.placeholder.com/150 " alt="articolo " />
                    <div class="testo right ">
                        <h3>Cos’è Lorem Ipsum?</h3>
                        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa...
                    </div>
                    <br style="clear: both; " />
                </article>
            </section>

<section>
                <article>
                    <img class="right image_article " src="https://via.placeholder.com/150 " alt="articolo " />
                    <div class="testo left ">
                        <h3>Perchè lo utilizziamo?</h3>
                        È universalmente riconosciuto che un lettore che osserva...
                    </div>
                    <br style="clear: both; " />
                </article>
            </section>

<section>
                <h3 style="text-align: center; ">Articoli più visti</h3>
                <article>
                    <div class="article ">
                        <li>Cos’è Lorem Ipsum?</li>
                        <hr />
                        <li>Perchè lo utilizziamo?</li>

</div>
                </article>
            </section>

<section>
                <h3 style="text-align: center; ">Nuovi Trailer</h3>
                <article style="background: none; ">
                    <div class="article ">
                        <li><img class="locandina " src="https://dummyimage.com/1000x1428/000/fff" alt="Acquaman " />
                        </li>

</div>
        <br style="clear: both;" />

</div>
    <footer>
        <footer>
            <nav class="footermenu left">
                <li><a href="#" class="footerlink">Home</a></li>

<li><a href="#" class="footerlink">Contattaci</a></li>
                <li><a href="#" class="footerlink">RSS</a></li>
                <li><a href="#" target="_blank" class="footerlink">Privacy Policy</a></li>
            </nav>
            <span class="footerdestra right">&copy; Tutti i diritti riservati a ...</span>
            <br style="clear:both;" />
        </footer>
    </footer>
</body>

</html>

CSS

Salva Codice CSS

body {
    background: #ddd;
    padding-top: 30px;
    font-family: 'Recursive', sans-serif;
}

.menu,
li {
    list-style-type: none;
    text-decoration: none;
    display: inline;
}

.menu li {
    margin-top: 8px;
}

.menu {
    margin-top: 8px;
}

.article li {
    list-style-type: none;
    text-decoration: none;
    display: block;
    text-align: center;
}

hr {
    border: 1px solid rgb(202, 202, 202);
}

.right {
    float: right;
}

.left {
    float: left;
}

.menulink {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0);
}

.menulink:hover {
    background: rgba(223, 16, 16, 0.534);
    padding: 10px;
    border: 1px solid rgba(255, 102, 0, 0.425);
    border-radius: 5px;
}

a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}

a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.headermenu {
    background: rgb(255, 104, 3);
    position: relative;
    padding: 10px;
    top: 0px;
    left: 0px;
    height: 40px;
    opacity: 0.7;
    width: 80%;
    margin: 0px auto;
}

#logo {
    float: left;
    color: rgb(255, 153, 0);
    font-weight: 900;
    width: 30%;
    text-shadow: 2px 0 0 rgb(250, 8, 8), -2px 0 0 rgb(250, 8, 8), 0 2px 0 rgb(250, 8, 8), 0 -2px 0 rgb(250, 8, 8), 1px 1px rgb(250, 8, 8), -1px -1px 0 rgb(250, 8, 8), 1px -1px 0 rgb(250, 8, 8), -1px 1px 0 rgb(250, 8, 8);
}

.topheader {
    background: #fff;
    margin: 0px auto;
    padding: 10px;
    width: 80%;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

.topheader::after {
    clear: both;
    content: "";
    display: table;
}

h1 {
    color: #363636;
    text-align: center;
}

article {
    background: #eeeeee;
    padding: 10px;
    color: #363636;
    border-radius: 5px;
    margin-top: 10px;
}

.attivo {
    background-color: #ff00008a;
    border-radius: 5px
}

input[type="text"],
input[type="password"] {
    border: none;
    border-radius: 2px;
    width: 95%;
    padding: 10px;
    font-size: 15px;
    background: #ddd;
    margin-bottom: 10px;
}

label {
    font-weight: 900px;
}

.buttonstyle {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    border-radius: 90px;
}

.login {
    background: rgb(250, 8, 8);
    padding: 18px;
    margin-right: -10px;
}

.buttonform {
    border-radius: 2px;
    background: rgb(250, 8, 8);
    padding: 5px 8px;
    border: 1px solid rgb(255, 104, 3);
    color: #fff;
    text-transform: uppercase;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    margin-top: 5px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
}

label {
    font-size: 15px;
    padding: 5px;
    font-weight: 600;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 200ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 75px auto;
    padding: 20px;
    background: #fff;
    border: none;
    width: 331px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
    border-radius: 3px;
}

.popup .chiudi {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 9px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #101010;
}

.popup .chiudi:hover {
    opacity: 1;
}

.banner {
    width: 60%;
    background: rgb(226, 226, 226);
    height: 70px;
    float: right;
    margin-top: 5px;
    border: 3px solid rgb(212, 212, 212);
}

.bannertesto {
    padding: 23px;
    color: rgb(177, 177, 177);
    font-size: 20px;
    margin: 0px auto;
    text-align: center;
}

.container {
    background: #fff;
    margin: 0px auto;
    padding: 10px;
    width: 80%;
}

.image_article {
    padding: 6px;
    width: 40%;
}

.sidebar {
    float: right;
    width: 20%;
    padding: 10px;
}

.post {
    float: left;
    width: 73%;
    padding: 10px;
}

h3 {
    color: #333;
}

.testo {
    width: 50%;
}

.locandina {
    min-width: 100px;
    max-width: 60%;
}

.bannerimage {
    min-height: 300px;
    max-width: 80%;
    padding: 10px;
    display: block;
    margin: auto;
    background-image: url(https://dummyimage.com/1000x300/eb1515/ffffff&text=Banner);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0px;
    margin: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .card-wrap .card {
        flex: 0 0 46%;
        width: 33.33333333%;
    }
}

@media screen and (min-width: 900px) {
    .card-wrap .card {
        flex: 0 0 30%;
        width: 33.33333333%;
    }
    .testo {
        width: 100%;
    }
    .image_article {
        padding: 0px;
        width: 100%;
    }
}

@media screen and (max-width: 425px) {
    .sidebar {
        float: none;
        width: 100%;
        padding: 10px;
        margin-left: -14px;
    }
    .post {
        float: none;
        width: 100%;
        padding: 10px;
        margin-left: -15px;
    }
    .banner {
        width: 100%;
        height: 40px;
        float: none;
    }
    .bannertesto {
        padding: 10px;
        font-size: 15px;
    }
    #logo {
        float: none;
        width: 100%;
    }
    .headermenu {
        height: 215px;
    }
    .menu,
    li {
        display: block;
        text-align: center;
        padding-bottom: 10px;
    }
    .left {
        float: none;
    }
    .right {
        float: none;
    }
    .attivo {
        font-size: 17px;
        padding: 6px;
    }
    .login {
        padding: 10px;
        margin-right: 0px;
    }
    .popup {
        width: 222px;
    }
    .testo {
        width: 100%;
    }
    .image_article {
        padding: 0px;
        width: 100%;
    }
    section {
        margin-left: 9px;
    }
    .image_article2 {
        padding: 0px;
        width: 100%!important;
    }
    .testo2 {
        width: 100%!important;
    }
}

.card {
    background: rgb(235, 235, 235);
    padding: 5px;
    width: 200px;
    margin-top: 5px;
    color: #333;
    margin-right: 5px;
    flex: 0 0 100%;
}

.card a:link {
    color: #333;
}

.card-info a:link {
    color: #333;
}

.card-img {
    width: 100%;
    height: 200px;
}

.card-header {
    color: #333;
}

.card-data {
    color: rgb(228, 114, 8);
}

.image_article2 {
    padding: 0px;
    width: 15%;
}

.testo2 {
    width: 80%;
}

footer {
    background: rgb(37, 37, 37);
    color: #fff;
    padding: 10px;
    width: 80%;
    font-size: 15px;
    margin: 0px auto;
}

.footerdestra {
    margin: 2px auto;
}

.footermenu {
    margin: 0px 15px;
}

.footerlink {
    color: #fff;
    text-decoration: none;
    margin-right: 5px;
    padding: 5px;
}

.footerlink:hover {
    color: #ddd;
    background: rgb(12, 12, 12);
    padding: 5px;
    border-radius: 90px;
}

JavaScript

Salva Codice JS

Anteprima Anteprima intero

Aggiorna il tuo account per nascondere gli annunci pubblicitari. Commento: Ecco un layout in responsive per una home di un blog.

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

Utenti che stanno guardando questa discussione: 1 Ospite(i)