<div id="draw-css">
<!-- START Background - sky, sun, clouds, ground -->
<div id="background">
<div class="sky"></div>
<div class="sun"></div>
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="ground"></div>
</div>
<!-- END Background - sky, sun, clouds, ground -->
<!-- START Front part - all of the square, and circle of front part -->
<div id="spaceship">
<div id="front">
<div class="shadow"></div>
<div id="dust1">
<div class="dust1-part1"></div>
<div class="dust1-part2"></div>
</div>
<div id="dust2">
<div class="dust2-part1"></div>
<div class="dust2-part2"></div>
</div>
<div id="dust3">
<div class="dust3-part1"></div>
</div>
<div id="dust4">
<div class="dust4-part1"></div>
<div class="dust4-part2"></div>
<div class="dust4-part3"></div>
</div>
<div class="front-part"></div>
<div class="main-front2"></div>
<div class="protectPart-front"></div>
<div class="protectPart-front2"></div>
<div class="protectPart-front2"></div>
<div class="front"></div>
<div class="front1"></div>
<div class="main-front"></div>
<div class="reactor-support1-3"></div>
<div class="reactor-support1-4"></div>
<div class="reactor-support1-2"></div>
<div class="reactor-support1"></div>
<div class="reactor-support2"></div>
<div class="footer-of-spaceship"></div>
<div class="hide-reactor"></div>
<div class="main-front-2-b"></div>
<div class="exhaust-front1"></div>
<div class="exhaust-front2"></div>
<div class="exhaust-front3"></div>
<div class="square-front"></div>
<div class="square-front1"></div>
<div class="square-front2"></div>
<div class="square-front3"></div>
<div class="square-front4"></div>
<div class="square-front5"></div>
<div class="square-front6"></div>
<div class="square-front7"></div>
<div class="square-front8"></div>
<div class="aerator-front-b"></div>
<div class="aerator-front1"></div>
<div class="aerator-front2"></div>
<div class="aerator-front3"></div>
<div class="aerator-front4"></div>
<div class="aerator-front5"></div>
<div class="aerator-front6"></div>
<div class="glass-front"></div>
<div class="glass-protect-front"></div>
<div class="m-b-left7"></div>
<div class="m-b-left8"></div>
<div class="m-b-left9"></div>
<div class="chassis"></div>
<div class="m-b-left5"></div>
<div class="m-b-left6"></div>
<div class="shoes-support"></div>
<div class="shoes-support2"></div>
<div class="m-b-left1"></div>
<div class="m-b-left4"></div>
<div class="cylinder1"></div>
<div class="m-b-left2"></div>
<div class="cylinder"></div>
<div class="m-b-left3"></div>
<div class="missile"></div>
<div class="weapon"></div>
<div class="weapon2"></div>
<div class="weapon3"></div>
<div class="weapon4"></div>
<div class="weapon5"></div>
<div class="weapon6"></div>
</div>
<!-- END Front part - all of the square, and circle of front part
<!-- START Middle part - all of the square, and circle of middle part -->
<div class="middle">
<div class="middle-bottom"></div>
<div class="m-b-right"></div>
<div class="m-b-middle"></div>
</div>
<!-- END Middle part - all of the square, and circle of middle part -->
<!-- START Character part - all of the square, and circle of character part -->
<div class="perso">
<div class="knee-protection"></div>
<div class="shoes"></div>
<div class="leg"></div>
<div class="shoes2"></div>
<div class="shoes3"></div>
<div class="pants2"></div>
<div class="pants"></div>
<div class="pants3"></div>
<div class="armright"></div>
<div class="face"></div>
<div class="face2"></div>
<div class="mask"></div>
<div class="beanny"></div>
<div class="beanny2"></div>
<div class="shirt"></div>
<div class="shirt2"></div>
<div class="shirt4"></div>
<div class="shirt5"></div>
<div class="shirt6"></div>
<div class="shirt7"></div>
<div class="shirt3"></div>
<div class="armleft2"></div>
<div class="armleft"></div>
<div class="shoulder"></div>
<div class="backpant"></div>
<div class="belt"></div>
<div class="bag"></div>
<div class="bag2"></div>
</div>
<!-- END Character part - all of the square, and circle of character part -->
<!-- START Back part - all of the square, and circle of back part -->
<div class="back">
<div class="flam"></div>
<div class="vis1"></div>
<div class="vis2"></div>
<div class="reactor1"></div>
<div class="reactor1-2"></div>
<div class="reactor2"></div>
<div class="reactor2-2"></div>
<div id="reactor-projector-top">
<div class="reactor-projector-t"></div>
<div class="reactor-projector1-t"></div>
<div class="reactor-projector2-t"></div>
<div class="reactor-projector3-t"></div>
</div>
<div id="reactor-projector-bottom">
<div class="reactor-projector-b"></div>
<div class="reactor-projector1-b"></div>
<div class="reactor-projector2-b"></div>
<div class="reactor-projector3-b"></div>
</div>
</div>
</div>
<!-- END Back part - all of the square, and circle of back part -->
<!-- START Overlay part - overlay to add old texture at the creation -->
<div id="overlay"></div>
<!-- END Overlay part - overlay to add old texture at the creation -->
</div>
<!-- START Credits part - nav and credits -->
<div id="nav">
<a class="op-menu op" href="#">Open Credits</a>
<a class="op-menu cl hidden" href="#">Close Credits</a>
</div>
<div class="menu vhidden">
<div class="credits">
<p>
The first part, Star Wars Title was inspired by this <a class="dribbble" href="https://dribbble.com/shots/1303800-Star-Wars" target="_blank">Dribbble</a>, made with SVG and CSS animations
</p>
<p>
The second part, the spaceship, was inspired by this <a class="dribbble" href="https://dribbble.com/shots/1827287-The-Force-Awakens" target="_blank">Dribbble</a>, made in full css, no js, no svg, just one picture, the overlay for add some texture.
</p>
<p> Made by <a href="http://www.guillaumelebelt.fr" class="gl" target="_blank">Guillaume LEBELT</a> for an <a href="http://hetic.net" class="hetic" target="_blank">HETIC</a> Project, date : 17/10/2015.</p>
</div>
</div>
<!-- END Credits part - nav and credits -->
hết html
post sau sẽ là css
[TẶNG BẠN] TRỌN BỘ Bí kíp học tốt 08 môn