0
\$\begingroup\$

I'm new in HTML and CSS, but finally I managed to create something that looks quite nice. Of course I had some problems and I think I resolved all of them, because site looks like I wanted. But I have still some doubts about my CSS and HTML. So I wonder if there is any chance that you can provide me some feedback for my code. What is wrong, or what should be done differently.

/* ---- reusable ---- 
font color: color: rgb(88, 88, 88);
background color background-color: rgba(255, 203, 59, 0.925);

*/


*{
    margin: 0;
    padding: 0;
    border: 0;
}

html{
    font-size: 20px;
    text-rendering: optimizeLegibility;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: rgb(88, 88, 88);
}
body{
  overflow-x: hidden;
  overflow-y: scroll;
}


/*---- WSPÓLNE ---- */
.kontener{
    width: 100%;
    margin: auto;
}
.row {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}
h1,h2,h3,h4,h5,h6{
    text-transform: uppercase;
}
h2,h3{
     letter-spacing: 2px;
    text-align: center;
}
h1{
    margin:0;
    font-size: 200%;
    color: rgb(83, 83, 83);
    letter-spacing: 4px;
}
h2{
    padding-top: 45px;
    padding-bottom: 45px;
    font-size: 160%;
}
h3{
    font-size: 120%;
    padding-bottom: 10px;
}
h2::after{
    display: block;
    content: "";
    background-color: #000000;
    width:150px;
    height:2px;
    margin:0 auto;
    margin-top: 40px;
}
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* .vl{
    height: 0 auto;
    border-right: 3px solid #00000067;
    padding-left: 5px;
    margin-left: -5px;
} */

/* ---- ANIMACJE ---- */
@keyframes shake{
     0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
    from {background-color: rgba(51, 51, 51, 0.897);}
    to {background-color: rgb(129, 129, 129);}
    from{color: #fff;}
    to{color:rgb(88, 88, 88); }
}

/* ---- NAWIGACJA ---- */

.kontener-nav{
    max-height: 85px;
    background-color: rgba(255, 203, 59, 0.925);
    border-bottom: 5px solid rgba(51, 51, 51, 0.664);

}
.naglowek-top{
   text-align: right;
   padding-bottom: 3px;
}
.naglowek-top-text{
    font-size: 60%;
    margin-right: 15px;
    padding-top: 5px;

}
.naglowek-top{
    height: 20px;
    background-color: #ffffff;
}
.nav-glowna{
    font-size: 80%;
    text-transform: uppercase;
    list-style: none;
}
.nav-glowna-lewa{
    float: left;
}
.nav-glowna-prawa{
    float: right;
}
.nav-glowna-lewa li,
.nav-glowna-prawa li{
    display: inline-block;
    padding: 10px;
    padding-bottom:15px;
    /* margin-top:15px; */
}
.nav-glowna-lewa li{
    /* padding-left: 10px; */
    margin-left: 80px;
}
.nav-glowna-prawa li{
    margin-right: 80px;
}
.nav-glowna-lewa li:first-child{
    padding-left: 150px;
}
/* .nav-glowna-lewa li:last-child{
    padding-left: 50px;
} */
.nav-glowna-prawa li:first-child{
    padding-left: 10px;
}
.nav-glowna-prawa li:last-child{
    margin:0;
    padding-right: 40px;
}
.nav-glowna-lewa li a:link,
.nav-glowna-lewa li a:visited,
.nav-glowna-prawa li a:link,
.nav-glowna-prawa li a:visited{
        text-decoration: none;
        color:rgb(88, 88, 88);
        padding-bottom: 20px;
        border-bottom: 5px solid rgba(51, 51, 51, 0);
        transition: border-bottom 0.5s;
}
.nav-glowna-lewa li a:hover,
.nav-glowna-prawa li a:hover{
    border-bottom:5px solid #fff;
    transition: border-bottom 0.5s;
}
.nav-srodek{
    margin-left: 45px;
    margin-right: 50px;
    /* margin-top: 10px; */
    padding: 20px 85px;
    height: 0 auto;
    width:0 auto;
    background-color: rgba(51, 51, 51, 0.897);
    color: #fff;
    border-radius: 0 55px;
}
.nav-srodek:hover{
    animation: shake 0.5s ease-in-out infinite; 
}
/* ---- HERO ---- */

.hero1,
.hero2{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero1-text,
.hero2-text{
    width: 1140px;
    top:50%;
    left:60%;
    transform: translate(-50%, -50%);
    position: absolute;
}
.hero1{
    background-image: url(img/hero_3.jpg);
    height: 650px;
}
.hero2{
    background-image: url(img/hero_1.jpg);
    height: 350px;
}
.hero1-text{
    position: absolute;
}
.hero2-text{
    position: relative;
}
.btn-strona1,
.btn-kontkat{
    display: inline-block;
    margin-top:190px;
    margin-left: 280px;
}
.btn-kontkat:last-child{
    margin-left:10px;
}
.btn{
    text-decoration: none;
    color:rgb(88, 88, 88);
    background-color: rgba(253, 234, 62, 0.774);
    border-radius: 25%;
    padding:25px;
}

/* ---- about ---- */
.ld{
    width: 50%;
    border-radius: 100%;
}
.o-mnie-text{
    margin-right: 20px;
    text-align: justify;
}
.o-mnie-div{
    margin-top: 55px;
}

/* ---- TECHNOLOGIA ----*/
.technologia{
    background-color: rgb(250, 250, 250);
}
.text-ikony{
    height: 0 auto;
    width: 175px;
    padding-left: 245px;
    display: block; 
}
.ikony-duze{
    font-size: 450%;
    display: block;
    text-align: center;
    padding-bottom: 8px;
    padding-top:10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous" />
    <link rel= "stylesheet" type="text/css" media="screen" href="normalize.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="grid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="strona_3.css" />

</head>
<body>
    <header><!-- pocztek nagłówka-->
        <div class="section kontener kontener-nav">
            <nav>
                <div class="naglowek-top">
                    <p class="naglowek-top-text">Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.</p>
                </div>
                <div class="row">
                    <div class="col span_1_of_3">
                        <ul class="nav-glowna-lewa nav-glowna">
                            <li><a href="index.html">Home</a></li> 
                            <li><a href="#">About</a></li>
                        </ul>
                    </div>
                    <div class="col span_1_of_3">
                        <p class="nav-srodek">
                            <span clas="text-logo">logologologo logologo</span>
                        </p>
                    </div>
                    <div class="col span_1_of_3">
                        <ul class="nav-glowna-prawa nav-glowna">
                            <li><a href="#">strona1</a></li>
                            <li> <a href="#">blog</a></li>
                            <li><a href="#">kontakt</a></li>
                        </ul>
                    </div>
                 </div><!--koniec row-->
            </nav><!-- koniec nav -->
        </div><!-- koniec sektion oraz kontener -->
    </header><!-- koniec nagłówka-->
    <section class="hero1"><!-- sekcja hero-->
        <div class="kontener">
            <div class="hero1-text">
                <h1>Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.</h1>
            </div>
        </div><!-- koniec sektion oraz kontener -->
    </section><!-- koniec hero-->
    <section class="about">
        <div class="kontener">
            <div class="row">
                <h2>Twych świątyń progi iść za rarogiem zazdroszczono domowi, przed oczy wkoło pali.</h2>
            </div>
            <div class="row">
                <div class="col span_1_of_2 vl">
                    <img src="img/person.jpg" alt="phota of a person" class="ld">
                </div>
                <div class="col span_1_of_2 o-mnie-div">
                    <h3>Tymczasem na to mówiąc, że tytuły przychodzą z rana</h3>
                    <p class="o-mnie-text para">Tadeuszem idą pod strażą. Dziś piękność twą w miechu. Starzy na tem, Że gościnna i dwie twarze w bliskiej wiosce
                        na miejsce jest armistycjum, to mówiąc, że przymiotów jego proszę Pana Mówiąc, Podkomorzemu ścisnął za domem
                        urządzał wieczerzę. on lubił gesta)</p>
                </div>
            </div><!-- koniec row-->
        </div><!-- koniec sektion oraz kontener -->
    </section><!-- koniec about-->
    <section class="technologia"><!-- technologia pocztek-->
        <div class="kontener">
            <div class="row">
                <h2>Rumienił się, toczył zdumione źrenic gorzały przeciw czarów. Raz w klasztorze.</h2>
            </div>
            <div class="row">
                <div class="col span_2_of_4">
                    <i class="fab fa-html5 ikony-duze"></i>
                    <p class="text-ikony para">Ciszę przerywał ale nigdzie nie jest obrazów wspaniałych zarysem</p>
                </div>
                <div class="col span_2_of_4">
                    <i class="fab fa-css3 ikony-duze "></i>
                    <p class="text-ikony para">Wyczha! poszli, a starzy mówili myśliwi widząc, że przeszkadza kulturze,</p>
                </div>
            </div>
            <div class="row">
                <div class="col span_2_of_4">
                    <i class="fab fa-js-square ikony-duze"></i>
                    <p class="text-ikony para">Żaden pan Rejent, na Ojczyzny łono. Tymczasem na nim się nie mogą</p>
                </div>

                <div class="col span_2_of_4">
                    <i class="fas fa-code ikony-duze"></i>
                    <p class="text-ikony para">Francuzów sto wozów sieci w ziemstwie, potem cały las drogi i znowu je w bitwie, gdzie usłyszał głos zabierać</p>
                </div>
            </div>
        </div>
    </section><!-- technologia koniec-->
    <section class="hero2"><!--sekcja hero2-->
        <h4 class="hero2-text">Uciszcie się! woła. Marząc i pan Wojski z palcami ruch chartów tym obrazem.</h4>
        <a href="#" class="btn btn-strona1">strona1</a>
        <a href="#" class="btn btn-kontkat">kontakt</a>
    </section><!--sekcja hero 2 koniec-->

    <script src="main.js"></script>
</body>
</html>

\$\endgroup\$
-1
\$\begingroup\$

Try to use:

This might help you to fix all mistakes (if there are any).

Also, I like to use HEX colors because designers and developers use HEX colors in web design. It is just a tip, you can stick to RGB if you want.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.