Witam serdecznie, po dłuższej przerwie chciałbym na poważnie powrócić do tematu kodowania stron www, troszkę poczytałem troszkę sobie przypomniałem i postanowiłem coś napisać.
Chciał bym oddać to wam do oceny, chodzi mi głównie o kod, tok myślenia ponieważ dużo się zmieniło w HTML5 i nie chciał bym uczyć się źle, rozumiem przez to utrwalanie błędów które za pewne robię.
http://bartlomiej-dalek.bl.ee/web/
<!doctype html>
<html class="no-js" lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Strona internetowa</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="center"> <a href="#"> <img src="img/logo.png" alt="" class="logo" /></a> </div>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> News </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</nav>
<div class="slogan">
<h2> Think. Define. Desing.</h2>
<div class="border"></div>
<p> We design solutions for digital interactions.
With its approach, our team generates extraordinary value for brands through innovative design.</p>
</div>
</header>
<section class="offer">
<h2 class="center1"> SERVICE WE OFFER </h2>
<hr/>
<p class="center1">Buzz analytics business-to-consumer. Partner network ramen social media freemium iteration.</p>
<div class="info1">
<img src="img/box.jpg" alt="" class="trav" />
<img src="img/ico1.png" alt="" class="ic" />
<p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p>
</div>
<div class="info1 t">
<img src="img/box.jpg" alt="" class="trav" />
<img src="img/ico2.png" alt="" class="ic" />
<p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p>
</div>
</section>
<section class="kontakt">
<h2> Kontakt </h2>
<hr />
<div class="contact-group">
<div class="localization">
<img src="img/facebook30.png" alt="" />
<p>Zduńska Wola Ul.Kwadratowa 15/22</p>
</div>
<div class="email">
<img src="img/mail3.png" alt="" />
<p>gibekrecords@gmail.com</p>
</div>
<div class="phone">
<img src="img/phone325.png" alt="" />
<p>600 - 151 - 388</p>
</div>
<div class="clear-both"></div>
<p class="center1 contact-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur orci eget risus suscipit vestibulum in non lectus. Suspendisse sollicitudin ut leo id lacinia. Praesent maximus rhoncus ipsum a hendrerit. Donec tempor, dui et lobortis pulvinar, elit neque rhoncus arcu, ac feugiat purus lorem in felis. Etiam ac massa in ipsum ornare pharetra eu non lorem.</p>
</div>
</section>
<footer> <p> Bartłomiej Dałek 2015 © </p> </footer>
</body>
</html>
.clear-both {clear: both;}
.center1 { text-align: center;}
nav { width:980px; margin:0 auto;}
nav ul { margin:0; padding: 15px 0; text-align: center; }
nav ul li { display:inline-block; padding:25px; }
nav ul li a { text-decoration:none; color:#d2d5db; transition-duration: 1s; font-family: 'Roboto Condensed', sans-serif; font-size: 18px;}
nav ul li a:hover { color: white; font-weight: bold;}
header { background: url("../img/1.jpg") center; opacity: 0.9; height: 470px; width: 100%; background-size: cover;}
.logo { position: absolute; padding: 20px;}
.slogan { color: white; padding-top: 50px;}
.slogan h2 { width: 980px; margin: 0 auto;}
.slogan p { width: 980px; margin: 0 auto; margin-top: 10px; }
.border { border:rgba(255,255,255,0.3) 1px solid; width: 77%; float: right; }
.trav { }
.offer hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image:
-webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-ms-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
.info1 {width: 980px; margin: 0 auto; }
.ic { padding-left: 50px;}
.ic1-txt { width: 300px; margin-left: 510px; margin-top: -180px; text-align: center;}
.t {padding-top: 50px;}
.kontakt { padding-top: 220px;}
.kontakt h2 { text-align: center; font-size: 30px; padding-top: 20px; color: #666;}
.kontakt hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image:
-webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-ms-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image:
-o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
.localization { float: left; text-align: center; width: 320px; }
.email {float: left; text-align: center; width: 320px;}
.phone { float: left; text-align: center; width: 320px;}
.contact-group {width: 980px; margin: 0 auto;}
.contact-text { line-height: 30px;}
footer {background: #2b2b2b; color: whitesmoke; text-align: center; font-size: 17px; height: 60px; margin-top: 100px; }
footer p { padding-top: 15px; font-family: 'Roboto Condensed', sans-serif; }
@media screen and (max-width:1000px) {
nav { width: auto;}
.logo { position: relative; padding: 25px 0px 0px 0px;}
.center {text-align: center;}
.border { display: none;}
.slogan { padding-top: 65px;}
.slogan h2 { width: auto; position: relative; text-align: center; border:rgba(255,255,255,0.3) 1px solid; padding: 40px 0px 40px 0px;}
.slogan p { width: auto; position: relative; text-align: center; padding-top: 50px; }
header { height: 600px; }
.contact-group {width: auto; margin: 0;}
.localization {width: 99%; }
.email {width: 99%;}
.phone { width: 99%;}
.trav {display: none;}
.info1 {width: auto; margin: 0;}
.ic1-txt { width: 99%; margin-left: 0; margin-top: 0; text-align: center;}
.ic {padding-left: 45%; }
.kontakt {padding-top: 50px;}
}
Także czekam na opinię czego nie powinienem robić co jest nie tak wykonane lub może jest ok.
