diff --git a/index.html b/index.html
index f4587c8..8cfea1e 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
Jad Sarout | CV
-
+
diff --git a/style/style.1.css b/style/style.1.css
new file mode 100644
index 0000000..f984532
--- /dev/null
+++ b/style/style.1.css
@@ -0,0 +1,224 @@
+@import "normalize.css";
+
+
+/** MAIN STUFF **/
+
+body{
+ font:16px Helvetica, Sans-Serif;
+ padding:50px 20px 20px 20px;
+}
+
+header > div{
+ max-width:960px;
+ margin:0 auto;
+ position: relative;
+}
+
+hgroup{
+ float:left;
+ margin:0;
+ border-bottom:1px solid #ccc;
+ width:100%
+}
+
+header figure{
+ position: absolute;
+ right:20px;
+}
+
+header h2{
+ display: none;
+}
+
+header figure img{
+ transform: rotate(-13deg);
+ width:200px;
+ height:200px;
+}
+
+.content{
+ padding:20px;
+ margin:0 auto;
+ max-width:960px;
+}
+
+section{
+ float:left;
+ padding-left:160px;
+ position:relative;
+ margin-bottom: 50px;
+}
+
+h3{
+ position: absolute;
+ top:0;
+ left:0;
+ width:150px;
+ margin-right:10px;
+ font-style: italic;
+ height:100%;
+ border-right:1px solid black;
+}
+
+/** SKILLS STUFF **/
+
+#competencies{
+
+}
+
+.skills{
+ padding-top:15px;
+}
+
+.skill{
+ width:130px;
+ margin:5px;
+ float:left;
+ padding:10px;
+ background:teal;
+ color:white;
+}
+
+.skill span{
+ width: 130px;
+ display:inline-block;
+}
+
+.skill span::after{
+ content:"";
+ color:white;
+ display:block;
+ float:right;
+}
+
+.skill[data-skill="1"] span::after {content:"★";}
+.skill[data-skill="1"] span::after {content:"★";}
+.skill[data-skill="2"] span::after {content:"★★";}
+.skill[data-skill="3"] span::after {content:"★★";}
+.skill[data-skill="4"] span::after {content:"★★★";}
+.skill[data-skill="5"] span::after {content:"★★★";}
+.skill[data-skill="6"] span::after {content:"★★★★";}
+.skill[data-skill="7"] span::after {content:"★★★★";}
+.skill[data-skill="8"] span::after {content:"★★★★★";}
+.skill[data-skill="9"] span::after {content:"★★★★★";}
+.skill[data-skill="10"]span::after {content:"★★★★★";}
+
+
+.skills-primary .skill{
+ font-size: 1.2em;
+}
+
+.skills-secondary .skill{
+ font-size: .7em;
+}
+
+/** ABOUT STUFF **/
+
+#about{
+ max-width:640px;
+ text-align: justify;
+ margin-bottom:100px;
+ font-style: italic;
+ color:#999;
+ padding-left:0;
+}
+
+#about h3{
+ display: none;
+}
+
+/** EXPERIENCES STUFF **/
+
+.experience h4{
+ color:teal;
+ margin-bottom:3px;
+ float:left;
+}
+
+.experience p{
+ margin-top:30px;
+ float:left;
+}
+
+.experience-details{
+ color:#999;
+ float: right;
+ margin-top:18px;
+}
+.experience-type{
+ font-weight:bold;
+}
+.experience-institution{
+ display:none;
+}
+
+.experience-date-separator{
+ color:teal;
+}
+
+/** CONTACTS STUFF **/
+
+#contact h3{
+ display: none;
+}
+
+.contact{
+ margin:0;
+ width:130px;
+ height:130px;
+ background-repeat: no-repeat;
+ background-size:80%;
+ background-position: 50% 50%;
+ float:left;
+ display: block;
+ margin:3px;
+}
+
+.contact:hover{
+ background-color:teal;
+}
+
+.contact-type,.contact-value{
+ display:block;
+ float:left;
+ margin:0;
+ width:100%;
+ height:100%;
+ text-align: center;
+}
+
+.contact-type{
+ display: none;
+}
+
+.contact-value a{
+ display:block;
+ width:100%;
+ height:100%;
+ font-size: 0;
+}
+
+.contact-skype{
+ display: none;
+}
+
+.contact-phone{background-image:url("../images/phone.png");}
+.contact-email{background-image:url("../images/email.png");}
+.contact-github{background-image:url("../images/github.png");}
+.contact-facebook{background-image:url("../images/facebook.png");}
+
+/** MEDIA QUERIES **/
+
+@media only screen and (max-width: 650px) {
+ header figure{
+ display: none;
+ }
+ section{
+ padding-left:0;
+ }
+ h3{
+ position: static;
+ border-right:none;
+ border-bottom:1px solid black;
+ }
+}
\ No newline at end of file
diff --git a/style/style.2.css b/style/style.2.css
new file mode 100644
index 0000000..70a260c
--- /dev/null
+++ b/style/style.2.css
@@ -0,0 +1,196 @@
+@import "normalize.css";
+
+
+/** MAIN STUFF **/
+
+body{
+ font-family:'DroidSansBold', Arial, sans-serif;
+}
+
+header{
+ width:100%;
+ background:#999;
+ position: fixed;
+ top:0;
+ height:150px;
+ z-index: 2;
+ color:red;
+}
+
+header > div{
+ max-width:960px;
+ margin:0 auto;
+}
+
+hgroup{
+ float:left;
+ margin:0 30px;
+}
+
+
+.content{
+ padding:200px 20px 20px 20px;
+ margin:0 auto;
+ max-width:960px;
+}
+
+h3{
+ border-bottom:1px solid #ccc;
+ padding-bottom:10px;
+ margin-bottom:10px;
+}
+
+h3::before{
+ content:"";
+ display:inline-block;
+ width:20px;
+ height:20px;
+ background:red;
+ margin-right:5px;
+ border-radius: 50%;
+}
+
+section{
+ width:50%;
+ float:left;
+ box-sizing: border-box;
+}
+
+
+/** SKILLS STUFF **/
+
+.skill{
+ background:#ccc;
+ margin:3px;
+ padding:5px;
+}
+
+.skill span{
+ width:0;
+ background:red;
+ display:block;
+ padding:5px;
+ color:white;
+ line-height: 1;
+}
+
+.skill[data-skill="1"] span{width:10%;}
+.skill[data-skill="2"] span{width:20%;}
+.skill[data-skill="3"] span{width:30%;}
+.skill[data-skill="4"] span{width:40%;}
+.skill[data-skill="5"] span{width:50%;}
+.skill[data-skill="6"] span{width:60%;}
+.skill[data-skill="7"] span{width:70%;}
+.skill[data-skill="8"] span{width:80%;}
+.skill[data-skill="9"] span{width:90%;}
+.skill[data-skill="10"] span{width:100%;}
+
+.skills-primary::before, .skills-secondary::before{
+ margin-top:10px;
+ display: inline-block;
+}
+
+.skills-primary::before{
+ content:"Main"
+}
+
+.skills-secondary::before{
+ content:"Other"
+}
+
+.skills-secondary .skill{
+ opacity: .7
+}
+
+/** EXPERIENCES STUFF **/
+
+.experience h4{
+ color:red;
+ margin-bottom:3px;
+}
+.experience-details{
+ color:#999;
+ margin-left:10px;
+}
+.experience-type{
+ font-weight:bold;
+}
+.experience-institution{
+ font-weight: normal;
+}
+.experience-institution::before{
+ content:"@ ";
+}
+.experience-location::before{
+ content:"In"
+}
+.experience-date::before{
+ content:" on "
+}
+.experience-date-separator{
+ color:red;
+}
+
+/** CONTACTS STUFF **/
+
+#contact{
+ position:fixed;
+ top:10px;
+ right:10px;
+ z-index: 3;
+ background: black;
+}
+
+#contact h3{
+ display: none;
+}
+
+.contact{
+ margin:0;
+}
+
+.contact-type,.contact-value{
+ display:inline-block;
+ margin:0;
+ padding:3px;
+}
+
+.contact-type{
+ width:120px;
+ background:red;
+ color:white;
+}
+
+.contact-value a{
+ text-decoration: none;
+ color:red;
+}
+
+/** MEDIA QUERIES **/
+
+@media only screen and (max-width: 960px) {
+ section{
+ width:100%;
+ }
+}
+
+@media only screen and (max-width: 450px) {
+ header{
+ height:300px;
+ }
+ hgroup{
+ width:100%;
+ }
+ .content{
+ padding-top:350px;
+ }
+ #contact{
+ position:static;
+ top:auto;
+ right:auto;
+ background:transparent;
+ }
+ #contact h3{
+ display:block;
+ }
+}
\ No newline at end of file