reverted l'intent del flex

intent de canviar el headertab per un flex tal com sugeria el chatgpt pero al posar el maleit max-height deixa d'alinear-se correctament a l'esquerra, tremenda F
logo no surt del div, idioma short alineat dreta
2023-09-19 16:56:00 +02:00 · 2023-09-19 16:48:34 +02:00 · 2023-09-19 14:07:54 +02:00 · 2023-09-19 12:46:03 +02:00 · 2023-08-17 21:15:38 +02:00
3 changed files with 462 additions and 757 deletions
--- a/background_2.svg
+++ b/background_2.svg
--- a/estils.css
+++ b/estils.css
@ -49,8 +49,9 @@ body{
    position: relative;
    color: #3c3c3b;
    font-family: 'Open Sans', sans-serif;
+    background-color: #f7d36e;
+    background-image: url(background_2.svg);
    background-size: cover;
-    background-image: url(fondu.svg);
 }

 div{
@ -111,31 +112,65 @@ a:hover{
    color: #fff;
 }

+/* img{
+    display: block;
+    width: 100%;
+    margin: auto;
+} */
+
 footer{
    padding: 30px 16px 30px 16px;
    background-color: #3c3c3b;
    color: #f5f0ed;
 }

-.logo img{
+/* .header{
+    max-height: 405px;
+    padding: 16px; */
+    /* background-image: url(fondu.svg);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover; */
+    /* color: #f5f0ed;
+    position: relative;
+} */
+
+.headerbar{
+    /*amb això la imatge em queda dins del div, segurament no és lo millor... */
+    /* height: 100px; */
+    height: 5vh;
+    padding: 16px 16px;
+}
+
+.logo{
+    /* float: left;
+    width: 160px; */
+
+    /* position: relative; */
+    /* min-height: 465px; */
+    /* padding: 16px; */
+    /* background-size: cover;
+    background-image: url(Imgs/Fondo1.jpg); */
+    /* object-fit: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center; */
+    /* z-index: -1;
+    color: #f5f0ed; */
+
+    height: 100%;
    float: left;
-    width: 160px;
 }  

 .imatge_centrada{
    display: block;
    margin-left: auto;
    margin-right: auto;
-    width: 400px;
+    width: 50%;
    /* text-align: center; */
 }

-img{
-    display: block;
-    width: 60%;
-    margin: auto;
-}
-
 .caixa1{
    /* min-height: 465px; */
    padding: 16px;
@ -157,116 +192,14 @@ img{
    max-height: 280px;
 }

-.caixa3{
-    background-color: #ded6c0;
-    color: #d03b40;
-    padding: 50px 16px 50px 16px;
-    max-height: 280px;
+#languageShortname{
+    text-align: right;
 }

-.header{
-    max-height: 405px;
-    padding: 16px;
-    /* background-image: url(fondu.svg);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: center;
-    background-size: cover; */
-    color: #f5f0ed;
-    position: relative;
+#comingSoonImg{
+    width: 100%
 }

-.paquet{
-    margin-top: 22%;
-    margin-bottom: 22%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.contentillo{
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-.lanzador-menu{
-    text-decoration: none;
-    color: #fff;
-    padding: 8px;
-    background-color: #d03b40;
-    border-radius: 5px;
-    float: right;
-    margin-top: 10px;
-}
-
-.navegacion a{
-    display: block;
-    text-decoration: none;
-}
-
-.boto2{
-    display: block;
-    text-decoration: none;
-    font-size: 14px;
-    border: 3px solid #f5f0ed;
-    margin-top: 30px;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    padding-left: 20px;
-    padding-right: 20px;
-    color: #f5f0ed;
-}
-
-.rodona{
-    width: 100px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.producto{
-    padding: 40px 16px 0px 16px;
-    text-align: left;
-}
-
-#productoFinal{
-    padding: 40px 16px 40px 16px;
-    text-align: left;
-}
-
-.bloc1{
-    padding: 65px 16px 65px 16px;
-    background-color: #ded6c0;
-    color: #d03b40;
-    max-height: 280px;
-}
-
-.bloc2{
-    padding: 65px 16px 65px 16px;
-    background-color: #d03b40;
-    color: #f5f0ed;
-    max-height: 280px;
-}
-
-#barrota{
-    width: 90px;
-    margin-top: 20px;
-    margin-bottom: 30px;
-    border-top: 1px solid;
-}
-
-#sangria{
-    margin-top: 20px;
-}
-
-#negreta{
-    font-weight: 700;
-}
-
-#hamburger{
-    width: 20px;
-}
 /*MediaQueries*/
@media screen and (max-width:600px){
    .js .navegacion{
@ -516,232 +449,3 @@ img{
    }

 }
-
-@media screen and (min-width:1101px){
-   
-    h1{
-        font-size: 44px;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        width: 500px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    h2{
-        font-size: 28px;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        width: 350px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    h3{
-        font-size: 24px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    p{
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    footer{
-    padding: 0px;
-    float: left;
-    min-height: 170px;
-    width: 100%;
-    position: relative;
-    }
-
-    footer p{
-    position:absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding-left: 25px;
-    }
-
-    .lanzador-menu{
-        display: none;
-    }
-    
-    .navegacion{
-        position: relative;
-        float:right;
-    }
-    
-    .navegacion li{
-        display: inline-block;
-        margin-right: 15px;
-        
-    }
-
-    .navegacion a{
-        color: #f5f0ed;
-        font-weight: bold;
-        font-size: 14px;
-    }
-
-    .caixa1{
-        padding: 25px 0px 25px 25px;
-        min-height: 663px;
-    }
-
-    .textos{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        margin-top: 0px;
-    }
-    
-    .textos p{
-        width: 525px;
-    }
-
-    .caixa2{
-        min-height: 400px;
-        width: 50%;
-        float: left;
-        box-sizing: border-box;
-        display: grid;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .caixa2 p{
-        width: 415px;
-    }
-
-    .caixa3{
-        min-height: 400px;
-        width: 50%;
-        float: left;
-        box-sizing: border-box;
-        display: grid;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .caixa3 p{
-        width: 415px;
-    }
-
-    .header{
-        min-height: 550px;
-        padding: 0px;
-        position: relative;
-        width: 100%;
-        float: left;
-        display: grid;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .productes{
-        padding-left: 25px;
-        padding-right: 25px;
-    }
-
-    .producto{
-        padding: 0px;
-        float: left;
-        box-sizing: border-box;
-        width: 50%;
-        min-height: 200px;
-        margin-top: 10px;
-        margin-bottom: 30px;
-        position: relative;
-    }
-
-    .producto p{
-        width: 550px;
-    }
-
-    #productoFinal{
-        padding: 0px;
-        margin-bottom: 60px;
-    }
-
-    #productoInicial{
-        padding: 0px;
-        margin-top: 60px;
-    }
-
-    .rodona{
-        width: 140px;
-        display: block;
-        float: left;
-        margin-right: 20px;
-        margin-left: 40px;
-        margin-bottom: 40px;
-    }
-    .contacte{
-        float: left;
-        width: 100%;
-    }
-
-    .bloc1{
-        padding: 0px;
-        min-height: 400px;
-        float: left;
-        width: 50%;
-        box-sizing: border-box;
-        display: grid;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .bloc2{
-        padding: 0px;
-        min-height: 400px;
-        float: left;
-        width: 50%;
-        box-sizing: border-box;
-        display: grid;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .bloc1 p{
-        width: 450px;
-    }
-    .paquet{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        margin-top: 0px;
-    }
-
-    .paquet p{
-        width: 525px;
-    }
-
-    .header a{
-        width: 250px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    
-    #barrota{
-        margin-bottom: 30px;
-        margin-top: 30px;
-    }
-
-    #frase1{
-        position: absolute;
-    }
-
-    #frase2{
-        padding-left: 180px;
-    }
-}
-
--- a/index.html
+++ b/index.html
@ -6,27 +6,27 @@
    <meta charset="utf-8">
    <link rel="stylesheet" href="estils.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
+    <!-- <style>
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');
-    </style>
+    </style> -->
 </head>

 <body>
    <header>
-        <div class="logo">
-            <div class="logo">
-                <img src="header_kinnikustudios_logo_black.svg" alt="Kinniku Studios Logo">
-            </div>
-        </div>
+        <!-- <h1>bon dia</h1> -->
    </header>    
+    <div class="headerbar">
+        <img class="logo" src="header_kinnikustudios_logo_black.svg" alt="Kinniku Studios Logo">
+        <h3 id="languageShortname">EN</h3>
+    </div>
    <div class="imatge_centrada">
-        <img src="ComingSoon.png" alt="TankTop Coming Soon">
+        <img id="comingSoonImg" src="ComingSoon.png" alt="TankTop Coming Soon">
    </div>
    <footer>
        <p id="frase1">Septiembre 2015</p>
        <p id="frase2">Todos los derechos reservados</p>
    </footer>
-    <script src="javascript.js"></script>
+    <!-- <script src="javascript.js"></script> -->
 </body>

 </html>
Author	SHA1	Message	Date
marccane	03b210d8b1	reverted l'intent del flex	2023-09-19 16:56:00 +02:00
marccane	b7bc69f8f9	intent de canviar el headertab per un flex tal com sugeria el chatgpt pero al posar el maleit max-height deixa d'alinear-se correctament a l'esquerra, tremenda F	2023-09-19 16:48:34 +02:00
marccane	f0afa1b992	logo no surt del div, idioma short alineat dreta	2023-09-19 14:07:54 +02:00
marccane	95fdf71ac3	logo with padding	2023-09-19 12:46:03 +02:00
marccane	0ea2ab6d39	liada amb el background	2023-08-17 21:15:38 +02:00