+
CSS
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..f4ed3d3
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,280 @@
+
+#wrapper{
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+}
+
+header{
+ position: relative;
+ bottom: 25px;
+ background-color: rgba(100,100,100,0.5);
+ height: 150px;
+
+}
+
+
+hgroup{
+ float: left;
+ color: red;
+ padding-left: 130px;
+ position: relative;
+ top: 10px;
+ right: 10px;
+}
+figure{
+ position: relative;
+ top: 25px;
+ left: 10px;
+}
+.content{
+ width: 100%;
+ padding-left: 10px;
+ background-color: red;
+}
+section{
+
+ float: left;
+ width:45%;
+ padding-left: 4%;
+
+
+}
+
+/*section::after{
+ content: '';
+ display: block;
+ border-bottom: 1px solid #999;
+ margin-right: 100px;
+}*/
+
+h3{
+ border-bottom: 1px solid #999;
+ width: 1000px;
+}
+h3::before{
+ content: ' ';
+ background-color: red;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ display: inline-block;
+
+}
+
+.skill{
+ width: 100%;
+ background-color: rgba(100,100,100,0.5);
+ margin-top: 5px;
+ display: block;
+ height: 30px;
+ position: relative;
+}
+
+/*.skill span{
+ background-color:red;
+}*/
+
+[data-skill = "5" ] span{
+
+ width: 80% ;
+ background-color: red;
+ display: block;
+ position: absolute;
+ top: 5px;
+ left:3px;
+}
+[data-skill = "3" ] span{
+ position: absolute;
+ top: 5px;
+ left: 3px;
+ width: 30% ;
+ background-color: red;
+ display: block;
+}
+[data-skill = "1" ] span{
+ width: 40%;
+ background-color: red;
+ display: block;
+ position: absolute;
+ top: 5px;
+ left: 3px;
+}
+
+[data-skill = "9" ] span{
+ position: absolute;
+ top: 5px;
+ left: 3px;
+ width: 13% ;
+ background-color: red;
+ display: block;
+}
+[data-skill = "2" ] span{
+ position: absolute;
+ top: 5px;
+ left: 3px;
+ width: 25% ;
+ background-color: red;
+ display: block;
+}
+
+[data-skill = "7" ] span{
+ position: absolute;
+ top: 5px;
+ left: 3px;
+ width: 70% ;
+ background-color: red;
+ display: block;
+}
+.skills-primary::before{
+ content: 'Main';
+ display: block;
+ margin: 10px 0px;
+}
+
+.skills-secondary::before{
+ content: 'Other';
+ display: block;
+ margin: 10px 0px;
+}
+
+h4{
+ color: red;
+
+}
+.experience-institution::before{
+ content: ' @ ';
+ display: inline;
+
+}
+.experience-institution{
+ font-size: 13px;
+ color: rgba(255,0,0,0.9);
+}
+
+.experience-details::before{
+ content: 'In ';
+ display: inline;
+ margin-left:10px;
+}
+
+.experience-details{
+ color: rgba(100,100,100,0.6);
+ position: relative;
+ bottom: 20px;
+}
+.experience-date-separator{
+ color: red;
+}
+
+
+#contact{
+ position: absolute;
+ top: 25px;
+ left:400px;
+
+
+
+ display: inline-block;
+
+ }
+
+dl{
+ position: relative;
+ bottom: 15px;
+ margin-bottom: -16px;
+ left: 300px;
+}
+
+dt{
+ background-color: blue;
+ position: absolute;
+ background-color: red;
+ float: left;
+ height: 20px;
+ width: 120px;
+ color: white;
+ font-size:13px;
+}
+dd{
+ color: red;
+ font-size:13px;
+ height: 20px;
+ padding-left: 82px;
+ width: 600px;
+ background-color: black;
+
+}
+
+dd a{
+ color: red;
+}
+
+#contact h3{
+ display: none;
+
+}
+
+
+@media only screen and (max-width: 800px) {
+
+ section{
+ width: 46%;
+ padding-bottom: 10px;
+ float: left;
+ }
+ #experiences{
+ width: 100%;
+ }
+ figure{
+ position: absolute;
+ top: 1900px;
+ }
+
+ #contact{
+ position: static;
+ top: auto;
+ left: auto;
+ padding: auto;
+ width: 100%;
+ display: inline-block;
+ }
+ dl{
+ position: static;
+ top: auto;
+ left: auto;
+ padding: auto;
+ }
+ dt{
+ position: static;
+ top: auto;
+ left: auto;
+ padding: auto;
+ }
+
+
+
+
+}
+
+
+@media only screen and (max-width: 500px) {
+ figure {
+ position: absolute;
+ top: 2100px;
+
+ }
+ section{
+ width: 100%;
+
+ }
+ #contact{
+ position: relative;
+ display: inline-block;
+
+ }
+ h3{
+ border-bottom: 1px solid #999;
+ width: 450px;
+}
+}
\ No newline at end of file
diff --git a/style/style2.css b/style/style2.css
new file mode 100644
index 0000000..3884639
--- /dev/null
+++ b/style/style2.css
@@ -0,0 +1,299 @@
+#wrapper{
+ margin-left: 50px;
+ margin-right: 30px;
+}
+
+hgroup::after{
+ content: '';
+ display: block;
+ border-bottom: 1px solid #999;
+}
+
+hgroup h2 {
+ display: none;
+}
+
+#about h3{
+ display: none;
+}
+#about p{
+ color: #999;
+ width: 70%;
+}
+figure{
+ float: right;
+ width: 20%;
+ transform: rotate(-15deg);
+ position: relative;
+ bottom: 100px;
+
+}
+#about{
+ margin-bottom: 100px;
+}
+#competencies{
+ margin-bottom: 30px;
+}
+
+#competencies .skill{
+ float: left;
+ width: 33%;
+ position: relative;
+ left: 12%;
+ bottom: 100px;
+ padding: 0px;
+ color: white;
+}
+
+#competencies h3{
+ /* content: '';
+ */
+ position: relative;
+ display: inline-block;
+ width: 10%;
+ border-right: 3px solid #999;
+ height: 90px;
+
+}
+
+ [data-skill= "5"] {
+ background-color: #006666;
+ max-width: 12%;
+ margin-right: 30px;
+ height: 30px;
+}
+
+ [data-skill= "3"] {
+ background-color:#006666;
+ max-width: 12%;
+ margin-right: 30px;
+ height: 30px;
+}
+ [data-skill= "1"] {
+ background-color: #006666;
+ max-width: 12%;
+ margin-right: 50%;
+ height: 30px;
+}
+[data-skill= "9"] {
+ background-color:#006666;
+ max-width: 12%;
+ margin-right: 30px;
+ height: 25px;
+ margin-top: 10px;
+}
+[data-skill= "2"] {
+ background-color: #006666;
+ max-width: 12%;
+ margin-right: 30px;
+ height: 25px;
+ margin-top: 10px;
+}
+
+[data-skill= "7"] {
+ background-color: #006666;
+ max-width: 12%;
+ margin-right: 120px;
+ height: 25px;
+ margin-top: 10px;
+}
+
+.skills-secondary{
+ font-size: 13px;
+}
+#experiences{
+ width: 100%;
+ display: inline-block;
+ position: relative;
+
+}
+
+
+#experiences h3{
+ position: relative;
+ margin: 0px;
+ padding: 0px;
+ display: inline-block;
+ width: 10%;
+ border-right: 3px solid #999;
+ height: 300px;
+
+}
+
+#experiences .experience{
+ /* display: block; */
+ position: absolute;
+ display: inline-block;
+ width: 80%;
+ margin-left: 1%;
+}
+
+.experience-type{
+ color: rgb(37, 135, 165);
+}
+.experience-institution{
+ display: none;
+}
+.experience-details{
+ float: right;
+ position: relative;
+ bottom: 30px;
+ color: #999;
+}
+
+#experiences .experience:nth-child(2){
+ position: absolute;
+ top:50%;
+ display: inline-block;
+ width: 80%;
+ margin-left: 1%;
+}
+
+
+#education{
+ width: 100%;
+ display: inline-block;
+ position: relative;
+ margin-top: 50px;
+}
+
+
+#education h3{
+ position: relative;
+ margin: 0px;
+ padding: 0px;
+ display: inline-block;
+ width: 10%;
+ border-right: 3px solid #999;
+ height: 300px;
+
+}
+
+#education .experience{
+ /* display: block; */
+ position: absolute;
+ display: inline-block;
+ width: 80%;
+ margin-left: 1%;
+}
+
+
+#education .experience:nth-child(2){
+ position: absolute;
+ top:50%;
+ display: inline-block;
+ width: 80%;
+ margin-left: 1%;
+}
+
+
+
+
+
+#hobbies{
+ width: 100%;
+ display: inline-block;
+ position: relative;
+ margin-top: 50px;
+}
+
+
+#hobbies h3{
+ position: relative;
+ margin: 0px;
+ padding: 0px;
+ display: inline-block;
+ width: 10%;
+ border-right: 3px solid #999;
+ height: 100px;
+
+}
+
+#hobbies ul{
+ /* display: block; */
+ position: absolute;
+ display: inline-block;
+ width: 80%;
+
+ margin-left: 1%;
+}
+
+#contact h3{
+ display: none;
+}
+
+#contact{
+ margin-left: 160px;
+ width: 100%;
+ display: inline-block;
+ position: relative;
+ margin-top: 50px;
+}
+
+.contact{
+ margin-right: 30px;
+}
+
+.contact-email{
+ display: block;
+ background: url("../images/email.png");
+ width: 20%;
+ height: 100px;
+ float: left;
+ /* background-repeat: no-repeat;
+ background-position: left top;
+ padding-top:68px;
+ margin-bottom:50px; */
+}
+
+.contact-skype{
+ display: none;
+}
+
+.contact-phone{
+ /* background-color: red; */
+ display: block;
+ background: url("../images/phone.png");
+ width: 200px;
+ height: 100px;
+ float: left;
+ /* background-repeat: no-repeat;
+ background-position: left top;
+ padding-top:68px;
+ margin-bottom:50px; */
+}
+
+
+.contact-github{
+ /* background-color: red; */
+ display: block;
+ background: url("../images/github.png");
+ width: 200px;
+ height: 100px;
+ float: left;
+ /* background-repeat: no-repeat;
+ background-position: left top;
+ padding-top:68px;
+ margin-bottom:50px; */
+}
+
+.contact-facebook{
+ /* background-color: red; */
+ display: block;
+ background: url("../images/facebook.png");
+ width: 200px;
+ height: 100px;
+ float: left;
+ /* background-repeat: no-repeat;
+ background-position: left top;
+ padding-top:68px;
+ margin-bottom:50px; */
+}
+
+dd {
+ display: none;
+}
+
+dt{
+ display: none;
+}