Witam, chce stworzyć identyczny projekt jak w odcinku 3 z nauki HTML. Już tam troszeczkę popisałem, stworzyłem sobie przykładowe kafelki, lecz mam problem z wyśrodkowaniem wszystkiego.
Prosił bym o wyszukanie tekstu i wytłumaczenie mi gdzie popełniłem błąd. Dziękuję!
<!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Pinecha - Portfolio</title> <meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." /> <meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet" type="text/css"> </head> <body> <div id="container"></div> <div class="rectangle"> <div id="logo"> <left><h1>Bartosz "Pinecha"</h1></left></div> <div id="zegar"> <h1>12:00:00</h1></div> <div style="clear:both;"></div> </div> <div class="square"> <div class="title1">1</div> <div class="title1">1</div> <div style="clear:both;"></div> <div class="title2">2</div> <div class="title3">3</div> <div style="clear:both;"></div> <div class="title4">4</div> </div> <div class="square"> <div class="title5">5</div> </div> <div style="clear:both;"></div> <div class="rectangle"></div> </div> </body>
CSS:
body
{
background-color: #696969;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}
#container
{
width:1000px;
margin-left: auto;
margin-right: auto;
}
.retangle
{
width: 960px;
margin: 20px;
}
.square
{
width: 50%;
float: left;
}
#logo
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70 px;
width: 600px;
}
#zegar
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70 px;
}
.title1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #9ACD32;
float: left;
}
.title2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #1E90FF;
float: left;
}
.title3
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #FFD700;
float: left;
}
.title4
{
margin: 10px;
width: 480px;
height: 142px;
background-color: #B22222;
}
.title5
{
margin: 10px;
width: 480px;
height: 304px;
background-color: #666666;
}// Dodałem kod CSS, który autor pokazał komentarzu