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>
