A więc ukończyłem projektować moją pierwszą stronkę www, oczywiście pomijając aspekty "ortograficzne" i wizualne , skupiłem się bardziej na samym kodzie.
Jeżeli znajdzie się ktoś mający "5 min" na przeanalizowanie moich wypocin, będe wdzięczny. (Wg walidatora w3c jest ok)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Luka Modric vs Adners Iniesta</title>
<meta name="keywords" content="Modric, Iniesta...etc">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main-container">
<nav class="menu">Modric vs Iniesta</nav>
<div class="first-content">
<article>
<header>
<h1>Luka Modric </h1>
</header>
<p>Luka is Real Madrid's best middlefielder, he was born in Croatia</p>
<section>
<h3>Luka's Modric team's</h3>
<ul class="site-nav">
<li class="site-nav-item">2003 - 2008 Dinamo Zagrzeb 112(31)</li>
<li class="site-nav-item">2003 - 2004 ->Zrinjski Mostar(wyp.) 22(8)</li>
<li class="site-nav-item">2004 - 2005 ->Inter apresić(wyp.) 18(4)</li>
<li class="site-nav-item">2008 - 2012 Tottenham Hotspur 127 (13)</li>
<li class="site-nav-item">2012 - currently Real Madrid 115(7)</li>
</ul>
</section>
</article>
</div>
<div class="second-content">
<article>
<header>
<h1>Anders Iniesta</h1>
</header>
<p>Don Anders Iniesta is the best left middlefielder from Barcelona</p>
<section>
<h3>Anders Iniesta team's</h3>
<ul class="site-nav">
<li class="site-nav-item">2002 - currently Fc Barcelona team</li>
</ul>
</section>
</article>
</div>
<div class="footer">Stopka strony</div>
</div>
</body>
</html>
CSS
.main-container
{
width: 1000px;
background-color: blue;
margin: auto;
height: 960px;
}
.main-container .menu
{
text-align: center;
letter-spacing: 2px;
word-spacing: 7px;
text-shadow: 1px 1px 5px blue;
text-transform: uppercase;
}
.menu
{
width: 800px;
background-color: LightCyan;
height: 60px;
margin-left: 100px;
margin-right: 100px;
}
.first-content
{
width: 400px;
background-color: grey;
height: 600px;
float: left;
margin-left: 100px;
margin-top: 10px;
}
.second-content
{
width: 400px;
background-color: green;
height: 600px;
float: left;
margin-right: 100px;
margin-top: 10px;
}
.footer
{
clear: both;
padding-top: 10px;
text-align: center;
letter-spacing: 3px;
text-decoration: overline;
}
.main-container .first-content
{
text-align: center;
}
.main-container .second-content
{
text-align: center;
}
.site-nav
{
background-image: linear-gradient(to left, gold, transparent, gold),
linear-gradient(45deg, white, green, white);
text-align: left;
width: 300px;
margin: auto;
box-shadow: 3px 3px 6px 4px black;
}
.site-nav-item
{
color: black;
}
- W która stronę teraz ukierunkować moją naukę? Rozwijać bardziej skillsy w css, tworzyć więcej i więcej róznych layout-ów, konfiguracji witryn czy powoli powoli ruszać w kierunku RWB, box-model, css framework?
- Ma ktoś pomysł w jaki sposób napis który znajduję sie (Modric vs Iniesta) w main-container -> menu ,ustawić na środku diva? Za każdym razem jak kombinuje z margin-top/bottom, padding - ustawia mi "całą stronę" powiedzmy 10px ale od samej góry zamiat od "góry diva main-container".