Tutorial
HTML Șabloane gratis pentru website
Layout-urile sau sabloanele web avansate pot fi realizate folosind o combinație de HTML și CSS. Iată o imagine de ansamblu.
Majoritatea site-urilor și blogurilor moderne constau într-un antet, baza, si cateva coloane, poate o altă bară laterală și să nu uităm, zona principală de conținut. Ceva de genul:
Exemplu sablon cu antet, trei coloane si o baza, fluide.
<!DOCTYPE html>
<title>My Example</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
/* redimensionarea pagini pentru site */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
#pageAntet {
grid-area: header;
background-color: #DFDFDF;
}
#pageFooter {
grid-area: footer;
background-color: #E1E1E1;
height: 70px;
}
#textPrincipal {
grid-area: article;
background-color: #CCFFFF;
}
#parteaStanga {
grid-area: nav;
background-color: #FFFFCC;
}
#parteaDreapta {
grid-area: ads;
background-color: #FFFFCC;
}
header, footer, article, nav, div {
padd ing: 16px;
}
</style>
<body>
<header id="pageAntet">Logoul Dumneavoastra - Header </header>
<article id="textPrincipal">Textul site-ului, cutiile in care adaugati paragraful
</article>
<nav id="parteaStanga">Partea din stanga <br />
la care puteti adauga<br />
linkuri ale site-ului<br />
dumneavoastra</nav>
<div id="parteaDreapta">Publicitatea pe care<br />
doriti sa o adaugati.</div>
<footer id="pageFooter">Linkuri partenere<br />
Despre site<br />
Contact
</footer>
</body>
</html>
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.