• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Czy ten kod jest poprawnie napisany ?

VPS Starter Arubacloud
0 głosów
162 wizyt
pytanie zadane 21 lipca 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
zmienione kategorie 21 lipca 2019 przez Arkadiusz Waluk
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,400&display=swap" rel="stylesheet">


    <script src="https://kit.fontawesome.com/d1c838dcd7.js"></script>







</head>

<body>


    <nav>

        <ul class="clearfix">
            <li><a href="#">our offer</a></li>
            <li><a href="#">our technology</a></li>
            <li><a href="#">our community</a></li>
            <li><a href="#">our creations</a></li>
            <li><a href="#">login</a></li>
            <li><a href="#">register</a></li>

        </ul>
        <div class="kreska"></div>

    </nav>



    <header>

        <div class="logo"><img src="img/1.png"> </div>

        <div class="firstphoto"><img src="img/photo1.jpg"> </div>
        <div class="naglowek1">
            <h1>Enter the world</h1>
            <button>our offer</button>
        </div>



        <div class="twophoto"> </div>
        <div class="naglowek2">
            <h1>The walk</h1>

            <a href="#">
                <p> meet the gentleman</p>
            </a>

        </div>



        <div class="threephoto"></div>
        <div class="naglowek3">
            <h1>FEATURED ON THE VH1 STREAMY AWARDS</h1>
            <h2>"Cheerleader"</h2>

            <a href="#">
                <p> Watch now</p>
            </a>
        </div>



        <div class="fourphoto"></div>
        <div class="naglowek4">
            <h1>HAUNTINGLY BEAUTIFUL.</h1>
            <h2>"STAY WITH ME"</h2>

            <a href="#">
                <p> Watch now</p>
            </a>
        </div>



        <div class="fivephoto"></div>
        <div class="naglowek5">
            <h1>FEATURED ON MTV AND BILLBOARD

            </h1>
            <h2>"FOUR-FIVE SECONDS"

            </h2>

            <a href="#">
                <p> Watch now</p>
            </a>
        </div>
    </header>

    <footer></footer>
    <div class="naglowek6 clearfix">
        <a href="#">Newsletter</a>
        <a href="#">Contact</a>
    </div>

    <div class="ikony"><a href="#"><i class="fab fa-facebook"></a></i>

    </div>
</body></html>
* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-size: 0;
    font-family: 'Source Sans Pro', sans-serif;
 }

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

ul {}

ul li {
    display: inline-block;
    margin-top: 35px;
    list-style: none;
    width: 12%;
    margin-left: 2%;
    text-align: center;
    float: left;



}


li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: white;
    padding-top: 20px;
    padding: 5px;



}

li:nth-of-type(1)::after,
li:nth-of-type(2)::after,
li:nth-of-type(3)::after,
li:nth-of-type(4)::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width .3s;
    opacity: 1;
}

li:hover::after {
    width: 100%;
    transition: width .3s;
}


li:nth-of-type(5) {
    margin-left: 10%;
    border: 1px solid white;
    transition: 1s;
}

li:nth-of-type(5):Hover {
    background-color: white;

}

li:nth-of-type(5):Hover a {
    transition: 1s;
    color: black;

}

li:nth-of-type(6) {
    border: 1px solid white;

}

li:nth-of-type(6):Hover {
    background-color: white;

}

li:nth-of-type(6):Hover a {
    transition: 1s;
    color: black;

}




/* HEADER HEADER HEADER */


.logo img {
    width: 5%;
    position: absolute;
    top: 0;
    left: 93%;
}

.kreska {
    border-bottom: 1px solid white;
    height: 4vh;
    opacity: 0.3;
}



.firstphoto {
    position: absolute;
    top: 0;
    z-index: -1;
}

.firstphoto img {
    display: block;
    width: 100%;
    height: 100vh;
    filter: brightness(80%);

}

.naglowek1 {}

.naglowek1 h1 {
    font-size: 100px;
    color: white;
    text-align: center;
    margin-top: 10vh;
    font-weight: lighter;


}


.naglowek1 button {
    position: absolute;
    display: block;
    width: 200px;
    height: 50px;
    left: 43%;
    background-color: transparent;
    border: 2px solid white;
    margin-top: 200px;
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: .6s;
    overflow: hidden;



}



button:hover {
    color: black;
}

button:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;



}

button:hover:before {

    Left: 0;
}

.twophoto {
    position: absolute;
    top: 100%;
    height: 100%;

    width: 100%;
    background-position: center;
    background-attachment: fixed;
    background-image: url(img/photo2.jpg);
    filter: brightness(90%);
        background-repeat: no-repeat;



}

.naglowek2 h1 {
    width: 100%;
    font-weight: lighter;
    font-size: 100px;
    color: white;
    position: absolute;
    text-align: center;
    top: 125%;
    text-transform: uppercase;

}




.naglowek2 a {
    width: 200px;
    height: 50px;
    top: 150%;
    left: 43%;
    padding: 10px;
    font-weight: lighter;
    font-size: 20px;
    color: white;
    position: absolute;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    z-index: 1;
    overflow: hidden;
    margin-top: 200px;

}

.naglowek2 a:hover {
    color: black;
    transition: 1s;
}

.naglowek2 a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;


}

.naglowek2 a:hover:before {

    Left: 0;
}

.threephoto {

    position: absolute;
    top: 200%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url(img/photo3.jpg);
    background-attachment: fixed;
    filter: brightness(80%);

}

.naglowek3 h1 {
    font-weight: lighter;
    font-size: 60px;
    color: white;
    position: absolute;
    top: 225%;
    width: 100%;
    text-align: center;
}

.naglowek3 h2 {

    font-weight: lighter;
    font-size: 30px;
    color: white;
    position: absolute;
    top: 240%;
    width: 100%;
    text-align: center;
    letter-spacing: 3px;

}

.naglowek3 a {
    width: 200px;
    height: 50px;
    top: 250%;
    left: 43%;
    padding: 10px;
    font-weight: lighter;
    font-size: 20px;
    color: white;
    position: absolute;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    z-index: 1;
    overflow: hidden;
    margin-top: 200px;


}

.naglowek3 a:hover {
    color: black;
    transition: 1s;
}

.naglowek3 a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;


}

.naglowek3 a:hover:before {

    Left: 0;
}


.fourphoto {
    background-image: url(img/photo4.jpg);
    background-attachment: fixed;
    position: absolute;
    top: 300%;
    height: 100vh;
    width: 100%;

}

.naglowek4 h1 {

    font-weight: lighter;
    font-size: 60px;
    color: white;
    position: absolute;
    top: 325%;
    width: 100%;
    text-align: center;


}

.naglowek4 h2 {

    font-weight: lighter;
    font-size: 30px;
    color: white;
    position: absolute;
    top: 340%;
    width: 100%;
    text-align: center;
    letter-spacing: 3px;

}



.naglowek4 a {
    width: 200px;
    height: 50px;
    top: 350%;
    left: 43%;
    padding: 10px;
    font-weight: lighter;
    font-size: 20px;
    color: white;
    position: absolute;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    z-index: 1;
    overflow: hidden;
    margin-top: 200px;


}

.naglowek4 a:hover {
    color: black;
    transition: 1s;
}

.naglowek4 a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;


}

.naglowek4 a:hover:before {

    Left: 0;
}


.fivephoto {

    background-image: url(img/photo5.jpg);
    background-attachment: fixed;
    background-position: center;
    filter: brightness(70%);
    position: absolute;
    top: 400%;
    height: 100vh;
    width: 100%;

}

.naglowek5 h1 {

    font-weight: lighter;
    font-size: 60px;
    color: white;
    position: absolute;
    top: 425%;
    width: 100%;
    text-align: center;


}

.naglowek5 h2 {

    font-weight: lighter;
    font-size: 30px;
    color: white;
    position: absolute;
    top: 440%;
    width: 100%;
    text-align: center;
    letter-spacing: 3px;

}



.naglowek5 a {
    width: 200px;
    height: 50px;
    top: 450%;
    left: 43%;
    padding: 10px;
    font-weight: lighter;
    font-size: 20px;
    color: white;
    position: absolute;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    z-index: 1;
    overflow: hidden;
    margin-top: 200px;


}

.naglowek5 a:hover {
    color: black;
    transition: 1s;
}

.naglowek5 a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;


}

.naglowek5 a:hover:before {

    Left: 0;
}

footer {
    height: 30vh;
    width: 100%;
    top: 500%;
    position: absolute;
    background-attachment: fixed;
    background-color: #1e272e;
    overflow: hidden;


}

.naglowek6 {
    width: 20%;
    top: 510%;
    left: 41%;
    position: absolute;
    text-align: center;


}

.naglowek6 a {
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 50%;
    font-size: 15px;
    text-decoration: none;
    color: #d2dae2;
    float: left;


}

.naglowek6 a:hover {

    color: gray;
}

.ikony i {
    font-size: 30px;
    color: white;
    position: absolute;
    top: 520%;
    left: 50%;
    transition: .3s;

}

.ikony i:hover {
    color: gray;

}


@media {}

 

1 odpowiedź

0 głosów
odpowiedź 22 lipca 2019 przez Mariusz08 Maniak (62,300 p.)
Nie. Pusty tag footer, mieszanie nazw klas, puste elementy <i>, parę nagłówków <h1> (dozwolony jeden/strona), skrypty js ładowane w headzie strony.

Podobne pytania

0 głosów
2 odpowiedzi 463 wizyt
pytanie zadane 6 kwietnia 2017 w HTML i CSS przez Kumixx Początkujący (250 p.)
0 głosów
2 odpowiedzi 234 wizyt
pytanie zadane 31 marca 2017 w HTML i CSS przez Skimax Początkujący (270 p.)
0 głosów
1 odpowiedź 317 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...