initial commit

fidelelukeka · May 18, 2024 · aa7a799 · aa7a799
commit aa7a799
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Loader</title>
+  </head>
+  <body>
+    <section class="section">
+      <span class="loader loader-quart"></span>
+      Chargement . . .
+    </section>
+
+    <section class="section-2">
+      <span class="loader-2 loader-quart-2">
+        <span class="loader-3 loader-quart-3"></span>
+      </span>
+
+      Chargement . . .
+    </section>
+  </body>
+</html>
diff --git a/multiplication.py b/multiplication.py
@@ -0,0 +1,6 @@
+a = input("Entrez un nombre à multiplier :")
+b = 1
+
+for i in range(10):
+    print(f"{a} x {b} = {int(a)*b}")
+    b += 1
diff --git a/style.css b/style.css
@@ -0,0 +1,96 @@
+body
+{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 50px;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    text-align: center;
+    line-height: 3em;
+}
+
+.section
+{
+    height: 200px;
+    background-color: green;
+}
+
+
+.loader
+{
+    height: 50px;
+    width: 50px;
+    position: relative;
+    border-radius: 50%;
+    border: 10px solid rgba(255, 255, 255, 0.5);
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.loader-quart
+{
+    border: 10px solid rgba(255, 255, 255, 0.5);
+    border-top-color: #fff;
+    animation: spin 1s linear infinite;
+
+}
+
+@keyframes spin {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%
+    {
+        transform: rotate(360deg);
+    }
+
+}
+
+
+.section-2
+{
+    height: 200px;
+    background-color: violet;
+}
+.loader-2
+{
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    border: 10px solid transparent;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+
+    border-top-color: #fff;
+    border-bottom-color: #fff;
+    animation: spin 3s linear infinite;
+}
+
+.loader-3
+{
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    border: 10px solid transparent;
+    border-left-color: #fff;
+    border-right-color: #fff;
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}
+
+
+
+
+
+
+
+
+
+