first commit

assets/js/script.js

@@ -0,0 +1,53 @@
+function opencell(id) {
+    var x = document.getElementsByClassName("opened");
+    var url = window.location.toString();
+    url = url.split("#")[0]; 
+
+    if ( x.length !== 0) {
+
+        var w = x[0].getElementsByClassName("data");
+        w[0].classList.add("hidden");
+        w[0].classList.remove("display");
+        var currentid = x[0].id 
+//        x[0].classList.add("closed");
+        x[0].classList.remove("opened");
+        if (currentid !== id){
+            var y = document.getElementById(id);
+//            y.classList.remove("closed");
+            y.classList.add("opened");
+            var z = y.getElementsByClassName("hidden");
+            z[0].classList.add("display");
+            z[0].classList.remove("hidden");
+            url = url.concat("#",id);
+        }
+        
+        
+    }
+    else
+    {
+        var y = document.getElementById(id);
+//        y.classList.remove("closed");
+        y.classList.add("opened");
+        var z = y.getElementsByClassName("hidden");
+        z[0].classList.add("display");
+        z[0].classList.remove("hidden");
+        url = url.concat("#",id);
+    }
+
+    history.pushState({}, null, url);
+}
+function init() { 
+    if(window.location.hash) {
+        var anchor = window.location.hash.substring(1);
+        var x = document.getElementById("jobs");
+        console.log(x.children[anchor] );
+        var w = x.children[anchor]
+        if ( w !== undefined) {
+    //        w.classList.remove("closed");
+            w.classList.add("opened");
+            var z = w.getElementsByClassName("hidden");
+            z[0].classList.add("display");
+            z[0].classList.remove("hidden");
+        }
+    }
+}

assets/style/style.css

@@ -0,0 +1,171 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('/assets/style/Roboto-Regular.woff2') format('woff2'),
+        url('/assets/style/Roboto-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+#core {
+    padding-top:50px; 
+    max-width: 914px;
+    margin: auto;
+    font-family: 'Roboto', sans-serif;
+
+}
+
+h1 {
+    margin-top: 50;
+    width: 100%;
+    float: left;
+}
+
+h2 svg {
+    transform: translateY(15%);
+}
+
+#pp {
+    width: 100%;
+    text-align: center;
+
+}
+
+.coordonnes {
+    float:left;
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+}
+
+@media (min-width: 600px) {
+    #pp {
+        width: auto;
+        float: right;
+
+    }
+    #pp img {
+        display: inherit;
+        transform: translateY(-80px);
+    }
+    .coordonnes {
+        width: auto;
+    }
+}
+
+#pp img {
+    clear: both;
+    display: block;
+    max-width: 200px;
+/*  min-width: 150px;
+    min-height: 200px;*/
+    max-height: 250px;
+
+    width: auto;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    background-color: whitesmoke;
+}
+
+
+.infos {
+    padding-top: 5px;
+    clear: both;
+}
+.anchor {
+    color: inherit;
+    text-decoration: inherit;
+}
+#jobs {
+    width: auto;
+    height: auto;
+    text-align: center;
+    border-style: solid;
+    border-width: 1px;
+
+}
+
+.cell {
+    white-space: nowrap;
+    display: inline-block;
+    border-style: solid;
+    border-width: 1px;
+    width : 150px;
+    height: 150px;
+    cursor: pointer;
+    transition: width  0.5s;
+    
+}
+
+.opened {
+    width: 100%;
+    height: auto;
+    white-space: pre-line;
+    
+}
+
+.logo {
+    width : 150px;
+    height: 150px;
+    border-style: solid;
+    border-width: 1;
+
+    display: table-cell;
+    float: right;
+
+}
+
+.logo img {
+    max-width:100%;
+    max-height:100%;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50.5%);
+    vertical-align: middle;
+}
+.data {
+    text-align: left;
+    margin: 10px;
+}
+.hidden {
+    overflow: hidden;
+    opacity: 0; 
+    height: 0;
+
+}
+.hidden h2 {
+    overflow: hidden;
+    opacity: 0; 
+    height: 0;
+}
+.hidden h3 {
+    overflow: hidden;
+    opacity: 0; 
+    height: 0;
+}
+.hidden p {
+    overflow: hidden;
+    opacity: 0; 
+    height: 0;
+}
+
+
+.display  h2 {
+    opacity: 1;
+    transition: opacity 1s ease-out;
+    transition-delay: 0.2s;
+}
+.display  h3 {
+    opacity: 1;
+
+    transition: opacity 1s ease-out;
+    transition-delay: 0.3s;
+}
+.display  p {
+    opacity: 1;
+    transition: opacity 1s ease-out;
+    transition-delay: 0.6s;
+}
+
+