diff --git a/index.html b/index.html index f4587c8..0244616 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + Jad Sarout | CV @@ -15,7 +15,7 @@ -
+
@@ -118,7 +118,6 @@

30 / - 12 / 1995 diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..6d2cac1 --- /dev/null +++ b/style/style.css @@ -0,0 +1,139 @@ +body{ + margin: 5%; +} +hgroup h1{ + border-bottom: 1px solid gray; + padding-bottom: 10px; +} +hgroup h2{ + display: none; +} +figure { + float: right; + position: absolute; + top: 5%; + right: 5%; +} +/* figure img { + max-width: 110px; +} */ +#about h3 { + display: none; +} +#about p { + margin-right: 20%; + text-align:justify; +} +section { + width: 100%; + display: table; +} + + /* 1 section */ +h3{ + float: left; + border-right: 1px solid black; + padding-right: 5%; + padding-bottom: 6%; +} + + /* BIG */ +.skills-primary{ + margin-top: 20px; +} +.skills-primary [data-skill="5"] span{ + background-color: rgb(37, 167, 167); + margin-left: 9px; + border: 3px solid rgb(37, 167, 167); + font-size: 25px; + color: white; + float: left; + display: table; + width: 150px; + + +} +.skills-primary [data-skill="5"] span::after{ + content: " ★★★"; +} +.skills-primary [data-skill="3"] span{ + background-color: rgb(37, 167, 167); + margin-left: 6px; + margin-right: 6px; + border: 3px solid rgb(37, 167, 167); + font-size: 25px; + color: white; + float: left; + display: table; + + width: 150px; +} +.skills-primary [data-skill="3"] span::after{ + content: " ★★"; +} +.skills-primary [data-skill="1"] span{ + background-color: rgb(37, 167, 167); + border: 3px solid rgb(37, 167, 167); + font-size: 25px; + color: white; + display: table; + + width: 150px; +} +.skills-primary [data-skill="1"] span::after{ + content: " ★"; +} + + /* SMULL */ +.skills-secondary{ + margin-top: 6px; +} +.skills-secondary [data-skill="9"] span{ + background-color: rgb(37, 167, 167); + + margin-left: 9px; + border: 3px solid rgb(37, 167, 167); + font-size: 15px; + color: white; + float: left; + display: table; + width: 150px; +} +.skills-secondary [data-skill="9"] span::after{ + content: " ★★★★★"; +} +.skills-secondary [data-skill="5"] span{ + background-color: rgb(37, 167, 167); + margin-left: 6px; + margin-right: 6px; + border: 3px solid rgb(37, 167, 167); + font-size: 15px; + color: white; + float: left; + display: table; + width: 150px; +} +.skills-secondary [data-skill="5"] span::after{ + content: " ★★★"; +} +.skills-secondary [data-skill="7"] span{ + background-color: rgb(37, 167, 167); + + border: 3px solid rgb(37, 167, 167); + font-size: 15px; + color: white; + display: table; + width: 150px; +} +.skills-secondary [data-skill="7"] span::after{ + content: " ★★★★"; +} + + /* 2 section */ +/* +#competencies h3{ + float: left; + border-right: 1px solid black; + padding-right: 5%; + padding-bottom: 6%; +} */ \ No newline at end of file diff --git a/style/style1.css b/style/style1.css new file mode 100644 index 0000000..f0bb04b --- /dev/null +++ b/style/style1.css @@ -0,0 +1,317 @@ +body{ + margin: 0px; + font-family: Sans-serif; +} + +header{ + background-color: gray; + min-height: 150px; + width:100%; + position: relative; + display: table; + +} +figure{ + float: left; + + +} +hgroup{ + float: left; + color: red; + margin-left: 20%; +} +section{ + width: 30%; + float: left; + display: table; + overflow: auto; +} +#about{ + margin-left: 20%; + min-height: 280px; +} +#competencies{ + margin-right: 20%; + min-height: 280px; +} +#experiences{ + margin-left: 20%; + min-height: 550px; +} +#education{ + margin-right: 20%; + min-height: 550px; +} +#hobbies{ + margin-left: 20%; +} +h3 { + padding-bottom: 10px; + border-bottom: 1px solid gray ; + +} +h3:before{ + content: "⬤"; + padding-right: 8px; + color: red; +} + +/* sections + +#about { + float: left; + height: 280px; + width: 450px; + padding: 20px 0px 5px 235px; +} +#about p{ + margin-right: 4px; +} +#competencies{ + float: left; + height: 280px; + width: 400px; + padding: 20px 50px 5px 0px; +} +#experiences { + float: left; + height: 550px; + width: 450px; + padding: 0px 0px 5px 235px; +} +#experiences p{ + margin-right: 4px; +} +#education { + float: left; + height: 550px; + width: 400px; + padding: 0px 50px 5px 0px; +} +#hobbies { + float: left; + height: 400px; + width: 400px; + padding: 20px 5px 5px 235px; + +} +h3 { + padding-bottom: 10px; + border-bottom: 1px solid gray ; + +} +h3:before{ + content: "⬤"; + padding-right: 8px; + color: red; +} + +*/ + +/* skill bar */ + +.skills-primary:before { + content: "Main"; +} +.skills-secondary:before { + content: "Other"; +} + + +.skill{ + background-color:rgb(185, 184, 184); + margin: 5px; + color: white; + height: 25px; + position: relative; + +} +.skills-primary [data-skill="5"] span{ + background-color: red; + width: 50%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} +.skills-primary [data-skill="3"] span{ + background-color: red; + width: 30%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} +.skills-primary [data-skill="1"] span{ + background-color: red; + width: 10%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} + + +.skills-secondary [data-skill="9"] span{ + background-color: rgb(243, 88, 88); + width: 90%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} +.skills-secondary [data-skill="5"] span{ + background-color: rgb(243, 88, 88); + width: 50%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} +.skills-secondary [data-skill="7"] span{ + background-color: rgb(243, 88, 88); + width: 70%; + display: block; + position: absolute; + top: 2.5px; + left: 2.5px; +} + + + +/* contacts */ + +#contact { + float: right; + margin-right: 0%; + margin: auto; + position: absolute; + right: 20%; + top: 0px; + display: block; +} +#contact a { + text-decoration: none; + color: red; +} +#contact h3 { + display: none; +} +dt { + color: white; + background-color: red; + width: 200px; + height: 100%; +} +dd { + color: red; + background-color: black; + width: 120%; + height: 100%; + position: absolute; + left: 95px; + top: 0px; +} +dl { + + margin-bottom: -16px; + position: relative; + + +} + +/* coloring and placing */ + +.experience-type{ + color: red; +} +.experience-institution{ + color: red; +} +.experience-date-separator{ + color: red; +} +.experience-location::before{ + content: "in"; + color: rgb(170, 170, 170); +} +.experience-details { + color: rgb(170, 170, 170); + padding-left: 7px; +} +h4{ + height: 0px; +} + + + + + +/* MEDIA */ + + + +@media screen and (max-width: 1080px){ + #contact { + position: static; + float: left; + display: inline-table; + width: 100%; + } + hgroup{ + margin-left: 10%; +} +} +@media screen and (max-width: 850px){ + section{ + width: 70%; + } + #about{ + margin-top: 10%; + margin-left: 20%; + margin-right: 20%; + } + #competencies{ + margin-left: 20%; + margin-right: 20%;; + } + #experiences{ + margin-left: 20%; + margin-right: 20%; + } + #education{ + margin-left: 20%; + margin-right: 20%; + } + #hobbies{ + margin-left: 20%; + margin-right: 20%; + } +} +@media screen and (max-width: 400px){ + section{ + width: 90%; + } + #about{ + margin-top: 20%; + margin-left: 5%; + margin-right: 5%; + } + #competencies{ + margin-left: 5%; + margin-right: 5%;; + } + #experiences{ + margin-left: 5%; + margin-right: 5%; + } + #education{ + margin-left: 5%; + margin-right: 5%; + } + #hobbies{ + margin-left: 5%; + margin-right: 5%; + } +} \ No newline at end of file