initial commit

2024-04-26 16:24:36 +02:00
commit 3a337bb41e
12 changed files with 946 additions and 0 deletions
--- a/Css/style.css
+++ b/Css/style.css
@ -0,0 +1,160 @@
+
+* {
+    margin: 0;
+}
+
+
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;;
+}
+
+
+body{
+    background-image: url("../img/91657.jpg");
+    background-size: cover;
+}
+
+.header{
+    position: relative;
+}
+
+
+.topbar{
+     background-image: url("../img/91657.jpg");
+    background-color: black;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 2px purple;
+}
+
+.topbar a{
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    margin: 0 10px 0 0;
+    font-weight: 900;
+    font-size: 17px;
+}
+
+
+.topbar a:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+}
+
+
+.topbar .titre{
+    font-size: 17px;
+    padding: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+     color: pink;
+}
+
+.topbar .titre:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+
+}
+
+ 
+.container{
+    position: absolute;
+    width: 100%;
+    height: 841px;
+    box-sizing: border-box;
+}
+
+
+.section{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    width: 30%;
+}
+
+.section .titre-h3{
+    color: white;
+}
+
+.play{
+    background-color: pink;
+    padding: 20px;
+    border-radius: 30px;
+    display: inline-block;
+    text-align: center;
+    width: 100px;
+    height: 15px;
+    text-decoration: none;
+    margin-top: 60px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #0d134b;
+    border: solid 5px purple;
+
+}
+
+.play:hover{
+    background-color: purple;
+    border: solid 5px pink;
+    color: white;
+
+}
+
+
+
+    
+
+@media (max-width: 522px){
+    .topbar {
+        background-color: #1a237e;
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .topbar .titre {
+        margin-bottom: 18px;
+        font-size: 22px;
+    }
+    
+    .nav {
+        display: flex;
+        flex-direction: column;  
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+
+    .nav a{
+        text-align: center;
+        margin-top: 5px;
+        padding: 7px;
+    }
+
+    .topbar{
+        position: relative;
+        text-align: center;
+    }
+
+    .topbar a{
+        text-align: center;
+    }
+      
+      .section {
+        margin-top: 80px;
+        width: 310px;
+
+      }
+  
+ }
+