add: added some songs

2 files changed, 29 insertions, 17 deletions

diff --git a/rec.html b/rec.html
index fd489e0..6e81e12 100644
--- a/rec.html
+++ b/rec.html
@@ -19,10 +19,18 @@
         <div class="audio-players">
             <div class="audio">
                 <img src="img/logosquare.png" alt="cover">
+                <h3>22/12/2023</h1>
                 <audio controls src="rec/Voix_018_sd.m4a" style="width: 100%;"></audio>
-                <div class="volume">
-                    <!--input type="range" id="volume-range" min="0" max="100" value="0"-->
-                </div>
+            </div>
+            <div class="audio">
+                <img src="img/logosquare.png" alt="cover">
+                <h3>22/12/2023</h1>
+                <audio controls src="rec/Voix_019_sd.m4a" style="width: 100%;"></audio>
+            </div>
+            <div class="audio">
+                <img src="img/logosquare.png" alt="cover">
+                <h3>22/12/2023</h1>
+                <audio controls src="rec/Voix_020_sd.m4a" style="width: 100%;"></audio>
             </div>
         </div>
         <div style="display: inline-block;">
diff --git a/style.css b/style.css
index 74dfd62..15978f7 100644
--- a/style.css
+++ b/style.css
@@ -26,26 +26,30 @@ abbr{
     width: 27%;
     padding: 20px;
     border-radius: 10px;
-    background-color: #beb096cc;
+    background: linear-gradient(45deg, #dbc562aa, #92878dbb);
+    box-shadow: #111 10px 20px 15px;
+    transition-property: box-shadow, transform;
+    transition-duration: .5s;
+    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.audio:hover {
     box-shadow: #111 15px 25px 30px;
+    transform: scale(100.5%);
 }
 
 .audio img {
-    background-color: #534e55aa;
-    box-shadow:  #020139 1px 1px 8px;
+    background-color: #534e5588;
+    box-shadow:  #111 1px 1px 8px;
     border-radius: 15px;
     width: 100%;
 }
 
-#volume-range {
-    appearance: none;
-}
-
-#volume-range ::-webkit-slider-thumb{
-    appearance: none;
-    background-color: red;
-}
-
-.volume {
-    margin-top: 1.5em;
+audio {
+    width: 100%;
+    border-radius: 10px;
+    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+    box-shadow: #111 2px 2px 10px;
 }
\ No newline at end of file