Jestem początkującym i chciałbym wiedzieć, czy w miarę dobrze napisałem kod html i css. Uczę się nowych znaczników i chyba źle je napisałem. Potrzebny mi jest ktoś, kto powie mi co źle zrobiłem i jak to należy poprawić.Proszę o wyrozumiałość i z góry dziękuję za pomoc.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins|Source+Sans+Pro" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header class="glowny">
<div id="menu">
<div class="foto">
<a href="#" class="link">
<img src="img/logo.png" width="400px;"/> </a>
</div>
<div id="ciasta">
<a href="#" class="link">Ciasta</a>
</div>
<div id="dania">
<a href="#" class="link">Dania</a>
</div>
</div>
</header>
<aside>
<div class="reklama">
<img src="img/reklama.jpg" width="160px" height="600px"/>
</div>
</aside>
<main>
<header>
<div id="wstep">
<h1>Sprawdzone, proste i tanie przepisy</h1>
<p>Ta strona pokaże ci najlepsze przepisy tanie i smaczne idealne dla studenta.Nie trzeba mieć dużych umiejętnośći,<br>ponieważ wszytko jest bardzo proste i wytłumaczone krok po kroku co i jak.</p>
</div>
</header>
<div class="linia"></div>
<div id="ostatniododane">Ostatnio dodane</div>
<article> <!--ostatnio dodane-->
<div id="dodane">
<figure class="obraz">
<img src ="img/tort.jpg" width="420px" height="320px"/>
<figcaption class="nazwa">Tort orzechowy</figcaption>
<figcaption class="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nam pharetra vitae ipsum quis maximus. Pellentesque elementum est nec scelerisque fermentum. Etiam ut sagittis ligula, in placerat mauris. Nulla volutpat convallis lacinia. Donec non ipsum euismod, aliquet.</figcaption>
</figure>
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px"/>
<figcaption class="nazwa">Tort orzechowy</figcaption>
<figcaption class="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nam pharetra vitae ipsum quis maximus. Pellentesque elementum est nec scelerisque fermentum. Etiam ut sagittis ligula, in placerat mauris. Nulla volutpat convallis lacinia. Donec non ipsum euismod, aliquet.</figcaption>
</figure>
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px"/>
<figcaption class="nazwa">Tort orzechowy</figcaption>
<figcaption class="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nam pharetra vitae ipsum quis maximus. Pellentesque elementum est nec scelerisque fermentum. Etiam ut sagittis ligula, in placerat mauris. Nulla volutpat convallis lacinia. Donec non ipsum euismod, aliquet.</figcaption>
</figure>
<div style="clear:both"></div>
</div>
</article>
<div class="linia"></div>
<div id="proponowanetytul">Proponowane</div>
<article> <!--proponowane-->
<!--rzad 1-->
<div id="proponowane">
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<div style="clear:both"></div>
<!--rzad 2-->
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<figure class="obraz">
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<figure class="obraz"s>
<img src="img/tort.jpg" width="420px" height="320px" />
<figcaption class="nazwa">Tort orzechowy</figcaption>
</figure>
<div style="clear:both"></div>
</div>
</article>
</main>
<div class="linia"></div>
<footer>
<div id="info">
Wszelkie prawa zastrzeżone © 2018 Dziękuję za wizytę!
</div>
</footer>
</body>
</html>
body
{
background-image: url("img/tło.png");
font-family: 'Open Sans', sans-serif;
margin: 0 !important;
/* Background pattern from Toptal Subtle Patterns */
}
h1
{
margin:0px;
}
header.glowny
{
background-image: url("img/tlo.png")
}
#menu
{
height:80px;
width:100%;
border-bottom: 1px solid #c0c0c0;
}
.foto
{
display:block;
margin-top:5px;
margin-left: 150px;
float:left;
}
#ciasta
{
width:200px;
height:41px;
margin-top:19.5px;
font-size:30px;
text-align:center;
border-radius: 100px;
border: 1px dotted #2A2A2A;
background-image: url("img/przyciski.png");
float:left;
margin-left:160px;
}
#ciasta:hover
{
background-color: #CDCDCD;
}
#dania
{
width:200px;
height:41px;
margin-top:19.5px;
font-size:30px;
text-align:center;
border-radius: 100px;
border: 1px dotted #2A2A2A;
background-image: url("img/przyciski.png");
float:left;
margin-left:140px;
}
#dania:hover
{
background-color: #CDCDCD;
}
.link
{
text-decoration:none;
color: #000;
display:block;
}
main
{
width:1400px;
margin-left:auto;
margin-right:auto;
}
#wstep
{
color:#D7D7D7;
text-align:center;
margin-top:25px;
margin-bottom:40px;
}
aside
{
margin-top:168px;
margin-right:40px;
float:right;
}
.linia
{
border-bottom:1px solid #cc181e;
}
#ostatniododane
{
margin-top:50px;
font-size:23px;
color: #D7D7D7;
}
#dodane
{
margin-top: 10px;
margin-left:40px;
margin-right:40px;
margin-bottom:60px;
}
figure.obraz
{
float:left;
margin-left:10px;
margin-right:10px;
}
figcaption.nazwa
{
font-family: 'Source Sans Pro', sans-serif;
color:#D7D7D7;
text-align:center;
font-size:25px;
padding-bottom:12px;
}
figcaption.opis
{
height:150px;
width:420px;
font-family: 'Poppins', sans-serif;
color:#D7D7D7;
text-align:justify;
font-size:16px;
}
#proponowanetytul
{
margin-top:50px;
margin-bottom:35px;
font-size:23px;
color: #D7D7D7;
}
#proponowane
{
margin-top: 10px;
margin-left:40px;
margin-right:40px;
margin-bottom:60px;
}
#info
{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}