first commit

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;
+}
+
+