Fix issue with gitignore and static files

.gitignore

@@ -1,8 +1,8 @@
 # ---> Python
 
 padelclub_backend/settings_local.py
-./static/
-static/
+/static
+!/tournaments/static
 
 myenv/
 

tournaments/static/tournaments/css/basics.css

@@ -0,0 +1,125 @@
+/* ALIGNMENT */
+
+.right {
+    text-align: right;
+}
+
+/* PADDING */
+
+.padding20 {
+    padding: 20px;
+}
+
+/* MARGIN */
+
+.margin10 {
+    margin: 10px;
+}
+
+.topmargin5 {
+    margin-top: 5px;
+}
+
+.topmargin10 {
+    margin-top: 10px;
+}
+
+.topmargin20 {
+    margin-top: 20px;
+}
+
+.topmargin40 {
+    margin-top: 40px;
+}
+
+.topmargin80 {
+    margin-top: 80px;
+}
+
+.topmargin100 {
+    margin-top: 100px;
+}
+
+.topmargin150 {
+    margin-top: 150px;
+}
+
+/* WIDTH PERCENTAGE */
+
+.w15 {
+    width: 15%;
+}
+
+.w20 {
+    width: 20%;
+}
+
+.w25 {
+    width: 25%;
+}
+
+.w30 {
+    width: 30%;
+}
+
+.w40 {
+    width: 40%;
+}
+
+.w50 {
+    width: 50%;
+}
+
+.w60 {
+    width: 60%;
+}
+
+.w70 {
+    width: 70%;
+}
+
+.w80 {
+    width: 80%;
+}
+
+.w100 {
+    width: 100%;
+}
+
+/* WIDTH PIXELS */
+
+.w20px {
+    width: 20px;
+}
+
+.w30px {
+    width: 30px;
+}
+
+.w40px {
+    width: 40px;
+}
+
+.w60px {
+    width: 60px;
+}
+
+.w70px {
+    width: 7px;
+}
+
+.w80px {
+    width: 80px;
+}
+
+.w100px {
+    width: 100px;
+}
+
+.w200px {
+    width: 200px;
+}
+
+.w300px {
+    width: 300px;
+}

tournaments/static/tournaments/css/blue_style.css

@@ -0,0 +1,272 @@
+@font-face {
+    font-family: "Montserrat-Regular";
+    src: url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat-SemiBold";
+    src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Anybody-ExtraBold";
+    src: url("../fonts/Anybody/Anybody-ExtraBold.ttf") format("truetype");
+}
+
+html,
+body {
+    background: #1b223a;
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0px;
+}
+
+body {
+    height: 125vh;
+    background-image: url("../images/main_background@2x.png"); /* Replace with your image path */
+    background-repeat: no-repeat; /* Prevents the image from repeating */
+    background-size: cover; /* Scales the image to cover the container */
+}
+
+.wrapper {
+    margin: 0px 15px;
+}
+
+@media print, screen and (min-width: 40em) {
+    .wrapper {
+        margin: 0px 60px;
+    }
+}
+
+@media print, screen and (min-width: 80em) {
+    .wrapper {
+        margin: 0px 150px;
+    }
+}
+
+h1,
+h2,
+h3,
+h4 {
+    font-family: "Anybody-ExtraBold";
+}
+
+@media print, screen and (min-width: 80em) {
+    nav {
+        padding: 10px;
+    }
+}
+
+nav a {
+    color: white;
+    padding: 10px 15px;
+    margin: 0px 5px;
+    background-color: #f39200;
+    border-radius: 15px;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+nav a:hover {
+    color: #1b223a;
+}
+
+a {
+    color: white;
+}
+
+a:hover {
+    color: #f39200;
+}
+
+li::marker {
+    font-size: 26px; /* Change the size of the marker */
+    line-height: 1;
+}
+
+footer {
+    margin: 40px 0px;
+}
+
+p {
+    font-family: "Montserrat-Regular";
+    margin-top: 20px;
+}
+
+#main {
+    line-height: 1.8;
+}
+
+.red {
+    background-color: red;
+}
+.green {
+    background-color: green;
+}
+
+.orange {
+    color: #f39200;
+}
+
+.topblock {
+    margin-top: 20px;
+}
+
+.my-block {
+    padding: 10px 10px;
+}
+.simple {
+    font-size: 16px;
+}
+
+.simple a {
+    color: white;
+}
+
+.simple a:hover {
+    color: #f39200;
+}
+
+.bold {
+    font-family: "Montserrat-SemiBold";
+    font-weight: 800;
+}
+
+.main-phone-pic {
+    width: 450px;
+}
+@media print, screen and (min-width: 80em) {
+    .main-phone-pic {
+        width: 450px;
+    }
+}
+
+.large-top-margin {
+    margin-top: 60px;
+}
+@media print, screen and (min-width: 80em) {
+    .large-top-margin {
+        margin-top: 150px;
+    }
+}
+
+.phone {
+    width: 300px;
+}
+
+.download-pic {
+    width: 200px;
+}
+
+.bubble {
+    padding: 20px;
+    background-color: white;
+    border-radius: 24px;
+    box-shadow: 0 0 0px 0px #fbead6;
+    color: #1b223a;
+}
+
+.logo {
+    height: 80px;
+    /* padding: 5px 10px; */
+}
+
+.container {
+    display: grid;
+    place-items: center; /* Center items horizontally and vertically */
+}
+.container img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.img-center {
+    text-align: center;
+    margin: 0 auto;
+}
+
+.img-picto {
+    height: 50px;
+}
+
+.blue-bubble {
+    padding: 40px;
+    color: white;
+    background-color: #233876;
+    font-size: 16px;
+    font-weight: 600;
+    height: 230px;
+}
+.blue-bubble p {
+    font-family: "Montserrat-SemiBold";
+}
+.comment {
+    font-size: 20px;
+    font-family: "Anybody-ExtraBold";
+}
+.comment p {
+    font-family: "Anybody-ExtraBold";
+}
+.comment-details {
+    font-size: 18px;
+}
+.price-title {
+    font-family: "Anybody-ExtraBold";
+    font-size: 16px;
+}
+@media print, screen and (min-width: 80em) {
+    .price-title {
+        font-family: "Anybody-ExtraBold";
+        font-size: 18px;
+    }
+}
+
+.price {
+    font-family: "Anybody-ExtraBold";
+    font-size: 36px;
+    color: #f39200;
+}
+
+.flex {
+    display: flex;
+    align-items: center;
+}
+
+.flex-left {
+    flex: 1;
+    text-align: left;
+    padding: 5px 0px;
+}
+
+.flex-right {
+    flex: initial;
+    text-align: right;
+    vertical-align: middle;
+    padding: 5px 0px;
+}
+
+.inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.center {
+    text-align: center;
+    /* margin: 0 auto; */
+}
+
+.topmargin40 {
+    margin-top: 40px;
+}
+
+.price-padding {
+    padding: 5px;
+}
+
+@media print, screen and (min-width: 80em) {
+    .price-padding {
+        padding: 20px;
+    }
+}