4. Secțiunile

section { margin-bottom: 700px; padding-top: 150px; float: left; }

-fiecare element de tip <section> are o margine de 700px în partea de jos, 150px fața de marginea de sus și se așează la stânga;

#intro a img { border: 5px solid rgba(122, 192, 0, 0.15); -webkit-border-radius: 5px; margin-top: 40px; margin-bottom: 5px; }
#intro a img:hover, #portfolio .work a img:hover, input:hover, textarea:hover { border: 5px solid rgba(122, 192, 0, 1); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); }
#intro a img:active, #portfolio .work a img:active { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }

-se personalizează îmaginile din secțiunea intro care sunt ancore în felul următor: contur de 5px solid colorat;

-se personalizează modul de afișare la hover și la click al imaginilor din secțiunea intro care sunt ancore, al imaginilor din secțiunea portofolio din clasa work sau imaginile care sunt ancore, al elementelor de tip input și textarea, schimbându-li-se cularea și adăugându-li-se umbre;

#portfolio ul.work a { border-bottom: none; }
#portfolio ul.work a img { border: 5px solid rgba(122, 192, 0, 0.15); -webkit-border-radius: 5px; }
#portfolio ul.work { float: left; margin-left: -15px; width: 975px;  }
#portfolio ul.work li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }

-se personalizează elementele din lista din secțiunea portofoliu;

#contact { margin-bottom: 0px; }

-secțiunii contact i se elimină marginea față de următorul element. Se dorește acest spațiu între secțiuni pentru a crea iluzia deplasării la o altă pagină atunci când se acționează un link din meniu. Cum secțiunea contact e ultima, nu mai are nevoie de spațiu inutil sub ea.

footer { float: left; margin-top: 50px; width: 100%; }
footer ul { margin-bottom: 150px; }
footer ul li { display: inline; margin-right: 50px; }
footer ul li a { font-size: 24px; margin-left: 10px; }
footer ul li img { vertical-align: bottom; position: relative; top: 2px; }

-se personalizează și footerul într-un mod asemănător;

În acest moment site-ul ar trebui să arate în felul următor:

This slideshow requires JavaScript.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: