aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJesús <heckyel@hyperbola.info>2020-11-30 19:03:15 -0500
committerJesús <heckyel@hyperbola.info>2020-11-30 19:03:15 -0500
commit17bf8112c470a69f2b8df29d02efc7d768787e44 (patch)
tree8cfbec19e7bc9b6bb2d6125c514d78dcb63fb3bf
parent9b163cde41184bbb0cb0a19175e2d897bfb33cbf (diff)
downloadweb-base-17bf8112c470a69f2b8df29d02efc7d768787e44.tar.lz
web-base-17bf8112c470a69f2b8df29d02efc7d768787e44.tar.xz
web-base-17bf8112c470a69f2b8df29d02efc7d768787e44.zip
Refactoring design
Diffstat
-rw-r--r--grid.css188
-rw-r--r--index.html118
-rw-r--r--styles.css403
3 files changed, 475 insertions, 234 deletions
diff --git a/grid.css b/grid.css
deleted file mode 100644
index 9c39c90..0000000
--- a/grid.css
+++ /dev/null
@@ -1,188 +0,0 @@
-:root {
- --background: #555ED5;
- --text: #000;
- --secondary-text: #FFF;
- --secondary-background: #102027;
- --h1: #FFF;
- --h2: #d5dce2;
- --h3: #bbc6ce;
- --h4: #a2afb9;
- --h5: #8a99a3;
- --h6: #73828c;
- --header-bg: #555ED5;
-}
-
-h1, h2, h3, h4, h5, h6, div, button {
- margin: 0;
- padding: 0;
-}
-
-h1 {
- color: var(--h1);
-}
-
-html {
- font-family: "liberation serif", "times new roman", calibri, carlito, serif;
- color: var(--text);
-}
-
-body {
- display: grid;
- grid-template-columns: 1fr;
- grid-template-rows: auto 1fr 1fr;
- gap: 0px 0px;
- grid-template-areas:
- "header"
- "main"
- "footer";
- /* Fix height */
- height: 100vh;
- /* grid-template-rows: auto 1fr auto; */
-}
-
-img {
- width: 100%;
- height: auto;
-}
-
-video {
- width: 100%;
- height: auto;
-}
-
-.text-center {
- text-align: center;
-}
-
-.header {
- display: grid;
- grid-template-columns: 0.3fr auto auto;
- grid-template-rows: auto auto;
- gap: 0px 0px;
- grid-template-areas:
- "navbar-burger logo-name ."
- "navbar-menu navbar-menu .";
- grid-area: header;
-
- background: var(--header-bg);
-}
-
-.header {
- position: sticky;
- top: 0px;
-}
-
-.navbar-menu {
- grid-area: navbar-menu;
-
- display: none;
-}
-
-/* ---------- Menu Mobile sin JS ------------ */
-/* --------- End Menu Mobile sin JS ----------- */
-/* input hidden */
-#navbar-toggle-cbox {
- display: none;
-}
-
-label[for=navbar-toggle-cbox] {
- cursor: pointer;
-}
-
-#navbar-toggle-cbox:checked ~ .navbar-menu {
- display: block;
-}
-
-/* --------- Menu Mobile JS ------------ */
-.navbar-burger.is-active {
- display: flex;
- cursor: pointer;
- position: relative;
- justify-content: center;
- width: 100%;
- height: auto;
-}
-
-.navbar-burger.is-active span {
- display: block;
- position: absolute;
-}
-
-.navbar-burger.is-active span:nth-child(1) {
- transform: translateY(5px) rotate(45deg);
- top: calc(50% - 6px);
-}
-
-.navbar-burger.is-active span:nth-child(2) {
- opacity: 0;
-}
-
-.navbar-burger.is-active span:nth-child(3) {
- transform: translateY(-5px) rotate(-45deg);
- top: calc(50% + 4px);
-}
-/* --------- End Menu Mobile JS ----------- */
-
-.navbar-menu > ul > li {
- list-style: none;
-}
-
-ul.list-item > li > a {
- color: var(--secondary-text);
- text-decoration: none;
-}
-
-.navbar-burger {
- grid-area: navbar-burger;
- margin: auto;
-
- display: grid;
- grid-row-gap: .25rem;
- grid-template-columns: 1fr;
- grid-template-rows: 1fr 1fr 1fr;
-}
-
-.navbar-burger span {
- background-color: var(--secondary-text);
- display: block;
- height: 2px;
- transform-origin: center;
- transition-duration: 86ms;
- transition-property: background-color,opacity,transform;
- transition-timing-function: ease-out;
- width: 16px;
-}
-
-.logo-name {
- grid-area: logo-name;
- justify-self: center;
- align-self: center;
-
- text-decoration: none;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-.main { grid-area: main; }
-
-.footer {
- grid-area: footer;
-
- display: grid;
- grid-template-columns: 1fr;
- grid-template-rows: auto auto;
- grid-template-areas:
- "footer-info"
- "copy-info";
- margin: auto;
-}
-
-.footer-info {
- grid-area: footer-info;
-}
-.copy-info {
- grid-area: copy-info;
-}
-
-.copy-info > address > p {
- margin: 0px;
-}
diff --git a/index.html b/index.html
index 885a0a9..4f4031d 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,36 @@
-<!doctype html>
-<html lang="zxx">
+<!Doctype html>
+<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
- <title>Web base</title>
+ <title>Kastter</title>
<link href="normalize.css" rel="stylesheet"/>
- <link href="grid.css" rel="stylesheet"/>
+ <link href="styles.css" rel="stylesheet"/>
</head>
<body>
<header class="header">
<!-- Input for menu-mobile with checkbox-->
<input id="navbar-toggle-cbox" role="button" type="checkbox">
<!-- End Input for menu-mobile with checkbox-->
+
+ <!-- controler search-mobile -->
+ <input id="cm-search" role="button" type="checkbox">
+ <!-- end-controler -->
+
<label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</label>
<a class="logo-name" href="#" rel="home">
- <h1 class="title">Name</h1>
+ <span class="logotype">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
+ <g transform="matrix(3.7795276,0,0,3.7795572,0,-1072.5285)">
+ <path style="fill:currentColor;stroke-width:0.16136923" d="m 17.239538,295.76796 0.003,-1.3058 0.241644,0.57012 c 0.641218,1.51282 2.05759,2.18567 3.260851,1.54904 0.744777,-0.39405 1.15132,-1.47937 0.852545,-2.27598 -0.12289,-0.32765 -0.924111,-0.74732 -2.328967,-1.21987 -1.338964,-0.45041 -1.8793,-1.03225 -1.878431,-2.02274 0.0012,-1.72057 1.804996,-2.79082 3.495537,-2.07438 0.393182,0.16663 0.540757,0.16777 0.73168,0.005 0.208759,-0.17726 0.237412,-0.0605 0.225443,0.91868 -0.0098,0.79883 -0.04938,1.00154 -0.13756,0.70416 -0.337444,-1.13777 -0.961001,-1.62271 -2.086563,-1.62271 -1.256768,0 -2.079774,1.45195 -1.257811,2.21904 0.183254,0.17102 0.990245,0.5313 1.793317,0.80062 1.24563,0.41774 1.51515,0.57359 1.83474,1.06096 0.307139,0.46839 0.362407,0.72686 0.306849,1.43499 -0.157482,2.00709 -2.118924,3.09489 -3.859481,2.14043 l -0.623635,-0.34199 -0.287778,0.3828 c -0.284491,0.37841 -0.287747,0.36789 -0.285076,-0.92302 z m 32.056677,1.06522 c -0.480919,-0.11957 -0.775559,-0.87118 -0.788669,-2.01187 -0.01591,-1.38438 -0.571874,-2.07301 -1.673631,-2.07301 h -0.568859 v 1.94835 1.94836 l 0.518488,0.0658 c 0.285168,0.0362 -0.199419,0.0658 -1.076859,0.0658 -0.877441,0 -1.362028,-0.0296 -1.07686,-0.0658 l 0.518488,-0.0658 v -3.8151 -3.8151 l -0.518488,-0.0658 c -0.285168,-0.0362 0.271209,-0.0771 1.236394,-0.0911 2.040082,-0.0293 2.831917,0.15206 3.457308,0.79193 0.844425,0.86395 0.471827,2.34115 -0.719819,2.85379 l -0.480265,0.20662 0.467112,0.24713 c 0.85516,0.45245 1.060486,0.83104 1.145792,2.11265 0.09182,1.3794 0.244799,1.65997 0.823981,1.51125 0.22569,-0.0579 0.362338,-0.0563 0.303662,0.004 -0.191839,0.19628 -1.159945,0.34947 -1.567775,0.24808 z m -1.05849,-4.5864 c 0.37485,-0.30168 0.420351,-0.44991 0.420351,-1.36933 0,-1.40048 -0.277115,-1.74423 -1.489076,-1.84705 l -0.903944,-0.0767 v 1.81569 1.81569 h 0.776159 c 0.543652,0 0.902079,-0.10139 1.19651,-0.33829 z m -40.4604081,4.46061 c -1.5122259,-0.0589 -1.89687,-0.32045 -0.5889286,-0.40042 l 0.8070033,-0.0493 -2.0072731,-2.90885 c -1.1040061,-1.5999 -2.1250559,-3.09279 -2.2690019,-3.31756 l -0.2617173,-0.40868 2.6966254,-2.76259 2.6966315,-2.76259 H 8.0148553 c -0.459689,0 -0.8357949,-0.0735 -0.8357949,-0.16322 0,-0.0993 0.717903,-0.16323 1.8346498,-0.16323 1.1167408,0 1.8346448,0.0639 1.8346448,0.16323 0,0.0897 -0.341966,0.16322 -0.759925,0.16322 H 9.3285005 l -2.1974543,2.2526 -2.1974605,2.2526 2.5803016,3.79711 c 1.4191581,2.08842 2.6333317,3.73736 2.6981567,3.66431 0.06482,-0.0731 0.637426,-1.73681 1.272457,-3.69726 0.635026,-1.96044 1.209345,-3.50292 1.276274,-3.42772 0.06692,0.0752 0.673645,1.84016 1.348267,3.92214 l 1.226589,3.78541 0.508337,0.0651 c 0.279583,0.0358 -0.281362,0.0645 -1.246548,0.0637 -0.965185,-6.1e-4 -1.485665,-0.0301 -1.156626,-0.0654 0.329044,-0.0352 0.598256,-0.11878 0.598256,-0.18571 0,-0.0669 -0.150169,-0.57664 -0.333711,-1.13272 l -0.333718,-1.01102 H 12.2044 11.037185 l -0.323256,0.97935 -0.323256,0.97935 h 0.627682 c 0.451579,0 0.627675,0.0687 0.627675,0.24484 0,0.25649 -0.248163,0.2644 -3.8687131,0.1233 z m 5.4640581,-2.61208 c 0,-0.248 -0.99253,-3.16075 -1.05519,-3.09664 -0.08549,0.0875 -1.018759,2.91455 -1.018759,3.08605 0,0.073 0.466641,0.13261 1.036974,0.13261 0.57034,0 1.036975,-0.0549 1.036975,-0.12202 z m 12.084752,2.61553 0.51849,-0.0658 v -3.82543 -3.82545 h -0.650413 c -0.805779,0 -1.50654,0.64081 -1.668864,1.52607 -0.185141,1.00972 -0.417704,0.68082 -0.30003,-0.4243 0.05975,-0.5611 0.13934,-1.07525 0.176874,-1.14257 0.03757,-0.0673 1.394383,-0.12243 3.015227,-0.12243 2.218461,0 2.962171,0.0504 3.008419,0.20403 0.03377,0.11222 0.103957,0.62638 0.155921,1.14257 0.102371,1.01688 -0.125628,1.29978 -0.296497,0.36791 -0.16479,-0.89874 -0.693434,-1.40571 -1.57137,-1.50696 l -0.752526,-0.0868 v 3.84668 3.84666 l 0.51849,0.0658 c 0.285167,0.0362 -0.199418,0.0658 -1.07686,0.0658 -0.877442,0 -1.362027,-0.0296 -1.076861,-0.0658 z m 7.179061,0 0.51849,-0.0658 v -3.82543 -3.82545 h -0.650413 c -0.805779,0 -1.50654,0.64081 -1.668865,1.52607 -0.18514,1.00972 -0.417704,0.68082 -0.300029,-0.4243 0.05975,-0.5611 0.139339,-1.07525 0.176874,-1.14257 0.03756,-0.0673 1.394388,-0.12243 3.015226,-0.12243 2.218462,0 2.962172,0.0504 3.008419,0.20403 0.03377,0.11222 0.103957,0.62638 0.155921,1.14257 0.102372,1.01688 -0.125628,1.29978 -0.296496,0.36791 -0.164791,-0.89874 -0.693435,-1.40571 -1.571371,-1.50696 l -0.752525,-0.0868 v 3.84668 3.84666 l 0.51849,0.0658 c 0.285166,0.0362 -0.199419,0.0658 -1.076861,0.0658 -0.877441,0 -1.362027,-0.0296 -1.07686,-0.0658 z m 5.424183,0 0.518484,-0.0658 v -3.8151 -3.8151 l -0.518484,-0.0658 c -0.285173,-0.0362 0.719898,-0.0776 2.233484,-0.092 l 2.751973,-0.0261 -0.01633,1.10177 c -0.01308,0.88248 -0.04066,0.997 -0.138569,0.57538 -0.287175,-1.23667 -0.86836,-1.59592 -2.401248,-1.48432 l -0.714314,0.052 v 1.71385 c 0,1.67508 0.0085,1.7151 0.375179,1.7682 0.679816,0.0984 1.100888,-0.11445 1.316109,-0.66545 l 0.20759,-0.53146 0.05703,0.69802 c 0.03137,0.38391 0.03198,0.97152 0.0013,1.3058 -0.04489,0.48995 -0.07986,0.54449 -0.180424,0.28133 -0.282107,-0.73826 -0.383204,-0.81675 -1.115156,-0.86587 l -0.741375,-0.0497 v 1.96765 1.96764 h 1.187615 c 1.455103,0 1.90515,-0.31218 2.235475,-1.55064 l 0.217679,-0.81613 0.01426,1.265 0.01427,1.26499 -2.911508,-0.0261 c -1.601329,-0.0143 -2.678188,-0.0558 -2.393021,-0.092 z m 13.925753,-0.11893 c -0.318224,-0.3923 -0.05056,-0.90556 0.47225,-0.90556 0.320561,0 0.488078,0.0999 0.560801,0.33428 0.122313,0.39429 -0.164924,0.80829 -0.560801,0.80829 -0.154,0 -0.366513,-0.10665 -0.47225,-0.23701 z M 0,296.50248 c 0,-0.0897 0.32305696,-0.16323 0.71790303,-0.16323 H 1.4358121 v -6.12093 -6.12094 H 0.71790303 C 0.32305696,284.09738 0,284.02393 0,283.93415 c 0,-0.10159 0.90402648,-0.16322 2.3930201,-0.16322 1.4889877,0 2.3930199,0.0617 2.3930199,0.16322 0,0.0898 -0.3230567,0.16323 -0.7179088,0.16323 h -0.717903 v 6.12094 6.12093 h 0.717903 c 0.3948521,0 0.7179088,0.0735 0.7179088,0.16323 0,0.1016 -0.9040322,0.16322 -2.3930199,0.16322 C 0.90402648,296.6657 0,296.60401 0,296.50248 Z"/>
+ </g>
+ <title>Kastter</title>
+ </svg>
+ </span>
</a>
<div id="navMenu" class="navbar-menu">
@@ -26,57 +38,71 @@
<li><a href="#" class="navbar-item is-active">Home</a></li>
<li><a href="#" class="navbar-item">Service</a></li>
<li><a href="#" class="navbar-item">About us</a></li>
- <li><a href="#" class="navbar-item">Login</a></li>
- <li><a href="#" class="navbar-item">Earn Money</a></li>
+ <li><a href="/login.php" class="navbar-item">Login</a></li>
+ <li><a href="/account.php" class="navbar-item">Earn Money</a></li>
</ul>
</div>
+ <!-- mobile search -->
+ <!-- lupa -->
+ <div class="sc-lupa clicked">
+ <label for="cm-search" data-target="fm-search">
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
+ </path>
+ </svg>
+ </label>
+ </div>
+ <!-- form-mobile-search -->
+ <div id="fm-search" class="sc-form open-form">
+ <div class="back-search">
+ <label for="cm-search" data-target="fm-search">
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+ <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" class="style-scope yt-icon"></path>
+ </svg>
+ </label>
+ </div>
+ <div class="fm-send-search">
+ <form>
+ <input type="search" placeholder="Type to search..."/>
+ <button type="submit">
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+ ></path>
+ </svg>
+ </button>
+ </form>
+ </div>
+ </div>
+ <!-- end mobile search -->
</header>
- <main class="main"></main>
+ <div class="l-block"></div>
+ <main class="main">
+
+ <!-- Your content -->
+
+ </main>
<footer class="footer">
<div class="footer-info">
- <aside>
- <h4>Servicio</h4>
- <ul>
- <li><a href="#">Privacidad</a></li>
- <li><a href="#">Quiénes somos</a></li>
- <li><a href="#">Contacto</a></li>
- <li><a href="#">Empleos <span>Nuevas posiciones</span></a></li>
- <li><a href="#">Términos y condiciones</a></li>
- <li><a href="#">Prensa</a></li>
- </ul>
- </aside>
- <aside>
- <h4>Para los pacientes</h4>
- <ul>
- <li><a href="#">Especialistas</a></li>
- <li><a href="#">Clínicas</a></li>
- <li><a href="#">Pregunta al Experto</a></li>
- <li><a href="#">Enfermedades</a></li>
- <li><a href="#">Medicamentos</a></li>
- <li><a href="#">Servicios</a></li>
- <li><a href="#">Preguntas Frecuentes</a></li>
- <li><a href="#">Consulta online <span>nuevo</span></a></li>
- </ul>
- </aside>
- <aside>
- <h4>Para profesionales</h4>
- <ul>
- <li><a href="#">Para especialistas</a></li>
- <li><a href="#">Planes y precios</a></li>
- <li><a href="#">Recursos</a></li>
- <li><a href="#">Widget para su web</a></li>
- <li><a href="#">Para clínicas</a></li>
- <li><a href="#">Consulta online <span>nuevo</span></a></li>
- </ul>
- </aside>
+ <address class="text-center">
+ <span class="logotype">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="100px">
+ <g transform="matrix(3.7795276,0,0,3.7795572,0,-1072.5285)">
+ <path style="fill:currentColor;stroke-width:0.16136923" d="m 17.239538,295.76796 0.003,-1.3058 0.241644,0.57012 c 0.641218,1.51282 2.05759,2.18567 3.260851,1.54904 0.744777,-0.39405 1.15132,-1.47937 0.852545,-2.27598 -0.12289,-0.32765 -0.924111,-0.74732 -2.328967,-1.21987 -1.338964,-0.45041 -1.8793,-1.03225 -1.878431,-2.02274 0.0012,-1.72057 1.804996,-2.79082 3.495537,-2.07438 0.393182,0.16663 0.540757,0.16777 0.73168,0.005 0.208759,-0.17726 0.237412,-0.0605 0.225443,0.91868 -0.0098,0.79883 -0.04938,1.00154 -0.13756,0.70416 -0.337444,-1.13777 -0.961001,-1.62271 -2.086563,-1.62271 -1.256768,0 -2.079774,1.45195 -1.257811,2.21904 0.183254,0.17102 0.990245,0.5313 1.793317,0.80062 1.24563,0.41774 1.51515,0.57359 1.83474,1.06096 0.307139,0.46839 0.362407,0.72686 0.306849,1.43499 -0.157482,2.00709 -2.118924,3.09489 -3.859481,2.14043 l -0.623635,-0.34199 -0.287778,0.3828 c -0.284491,0.37841 -0.287747,0.36789 -0.285076,-0.92302 z m 32.056677,1.06522 c -0.480919,-0.11957 -0.775559,-0.87118 -0.788669,-2.01187 -0.01591,-1.38438 -0.571874,-2.07301 -1.673631,-2.07301 h -0.568859 v 1.94835 1.94836 l 0.518488,0.0658 c 0.285168,0.0362 -0.199419,0.0658 -1.076859,0.0658 -0.877441,0 -1.362028,-0.0296 -1.07686,-0.0658 l 0.518488,-0.0658 v -3.8151 -3.8151 l -0.518488,-0.0658 c -0.285168,-0.0362 0.271209,-0.0771 1.236394,-0.0911 2.040082,-0.0293 2.831917,0.15206 3.457308,0.79193 0.844425,0.86395 0.471827,2.34115 -0.719819,2.85379 l -0.480265,0.20662 0.467112,0.24713 c 0.85516,0.45245 1.060486,0.83104 1.145792,2.11265 0.09182,1.3794 0.244799,1.65997 0.823981,1.51125 0.22569,-0.0579 0.362338,-0.0563 0.303662,0.004 -0.191839,0.19628 -1.159945,0.34947 -1.567775,0.24808 z m -1.05849,-4.5864 c 0.37485,-0.30168 0.420351,-0.44991 0.420351,-1.36933 0,-1.40048 -0.277115,-1.74423 -1.489076,-1.84705 l -0.903944,-0.0767 v 1.81569 1.81569 h 0.776159 c 0.543652,0 0.902079,-0.10139 1.19651,-0.33829 z m -40.4604081,4.46061 c -1.5122259,-0.0589 -1.89687,-0.32045 -0.5889286,-0.40042 l 0.8070033,-0.0493 -2.0072731,-2.90885 c -1.1040061,-1.5999 -2.1250559,-3.09279 -2.2690019,-3.31756 l -0.2617173,-0.40868 2.6966254,-2.76259 2.6966315,-2.76259 H 8.0148553 c -0.459689,0 -0.8357949,-0.0735 -0.8357949,-0.16322 0,-0.0993 0.717903,-0.16323 1.8346498,-0.16323 1.1167408,0 1.8346448,0.0639 1.8346448,0.16323 0,0.0897 -0.341966,0.16322 -0.759925,0.16322 H 9.3285005 l -2.1974543,2.2526 -2.1974605,2.2526 2.5803016,3.79711 c 1.4191581,2.08842 2.6333317,3.73736 2.6981567,3.66431 0.06482,-0.0731 0.637426,-1.73681 1.272457,-3.69726 0.635026,-1.96044 1.209345,-3.50292 1.276274,-3.42772 0.06692,0.0752 0.673645,1.84016 1.348267,3.92214 l 1.226589,3.78541 0.508337,0.0651 c 0.279583,0.0358 -0.281362,0.0645 -1.246548,0.0637 -0.965185,-6.1e-4 -1.485665,-0.0301 -1.156626,-0.0654 0.329044,-0.0352 0.598256,-0.11878 0.598256,-0.18571 0,-0.0669 -0.150169,-0.57664 -0.333711,-1.13272 l -0.333718,-1.01102 H 12.2044 11.037185 l -0.323256,0.97935 -0.323256,0.97935 h 0.627682 c 0.451579,0 0.627675,0.0687 0.627675,0.24484 0,0.25649 -0.248163,0.2644 -3.8687131,0.1233 z m 5.4640581,-2.61208 c 0,-0.248 -0.99253,-3.16075 -1.05519,-3.09664 -0.08549,0.0875 -1.018759,2.91455 -1.018759,3.08605 0,0.073 0.466641,0.13261 1.036974,0.13261 0.57034,0 1.036975,-0.0549 1.036975,-0.12202 z m 12.084752,2.61553 0.51849,-0.0658 v -3.82543 -3.82545 h -0.650413 c -0.805779,0 -1.50654,0.64081 -1.668864,1.52607 -0.185141,1.00972 -0.417704,0.68082 -0.30003,-0.4243 0.05975,-0.5611 0.13934,-1.07525 0.176874,-1.14257 0.03757,-0.0673 1.394383,-0.12243 3.015227,-0.12243 2.218461,0 2.962171,0.0504 3.008419,0.20403 0.03377,0.11222 0.103957,0.62638 0.155921,1.14257 0.102371,1.01688 -0.125628,1.29978 -0.296497,0.36791 -0.16479,-0.89874 -0.693434,-1.40571 -1.57137,-1.50696 l -0.752526,-0.0868 v 3.84668 3.84666 l 0.51849,0.0658 c 0.285167,0.0362 -0.199418,0.0658 -1.07686,0.0658 -0.877442,0 -1.362027,-0.0296 -1.076861,-0.0658 z m 7.179061,0 0.51849,-0.0658 v -3.82543 -3.82545 h -0.650413 c -0.805779,0 -1.50654,0.64081 -1.668865,1.52607 -0.18514,1.00972 -0.417704,0.68082 -0.300029,-0.4243 0.05975,-0.5611 0.139339,-1.07525 0.176874,-1.14257 0.03756,-0.0673 1.394388,-0.12243 3.015226,-0.12243 2.218462,0 2.962172,0.0504 3.008419,0.20403 0.03377,0.11222 0.103957,0.62638 0.155921,1.14257 0.102372,1.01688 -0.125628,1.29978 -0.296496,0.36791 -0.164791,-0.89874 -0.693435,-1.40571 -1.571371,-1.50696 l -0.752525,-0.0868 v 3.84668 3.84666 l 0.51849,0.0658 c 0.285166,0.0362 -0.199419,0.0658 -1.076861,0.0658 -0.877441,0 -1.362027,-0.0296 -1.07686,-0.0658 z m 5.424183,0 0.518484,-0.0658 v -3.8151 -3.8151 l -0.518484,-0.0658 c -0.285173,-0.0362 0.719898,-0.0776 2.233484,-0.092 l 2.751973,-0.0261 -0.01633,1.10177 c -0.01308,0.88248 -0.04066,0.997 -0.138569,0.57538 -0.287175,-1.23667 -0.86836,-1.59592 -2.401248,-1.48432 l -0.714314,0.052 v 1.71385 c 0,1.67508 0.0085,1.7151 0.375179,1.7682 0.679816,0.0984 1.100888,-0.11445 1.316109,-0.66545 l 0.20759,-0.53146 0.05703,0.69802 c 0.03137,0.38391 0.03198,0.97152 0.0013,1.3058 -0.04489,0.48995 -0.07986,0.54449 -0.180424,0.28133 -0.282107,-0.73826 -0.383204,-0.81675 -1.115156,-0.86587 l -0.741375,-0.0497 v 1.96765 1.96764 h 1.187615 c 1.455103,0 1.90515,-0.31218 2.235475,-1.55064 l 0.217679,-0.81613 0.01426,1.265 0.01427,1.26499 -2.911508,-0.0261 c -1.601329,-0.0143 -2.678188,-0.0558 -2.393021,-0.092 z m 13.925753,-0.11893 c -0.318224,-0.3923 -0.05056,-0.90556 0.47225,-0.90556 0.320561,0 0.488078,0.0999 0.560801,0.33428 0.122313,0.39429 -0.164924,0.80829 -0.560801,0.80829 -0.154,0 -0.366513,-0.10665 -0.47225,-0.23701 z M 0,296.50248 c 0,-0.0897 0.32305696,-0.16323 0.71790303,-0.16323 H 1.4358121 v -6.12093 -6.12094 H 0.71790303 C 0.32305696,284.09738 0,284.02393 0,283.93415 c 0,-0.10159 0.90402648,-0.16322 2.3930201,-0.16322 1.4889877,0 2.3930199,0.0617 2.3930199,0.16322 0,0.0898 -0.3230567,0.16323 -0.7179088,0.16323 h -0.717903 v 6.12094 6.12093 h 0.717903 c 0.3948521,0 0.7179088,0.0735 0.7179088,0.16323 0,0.1016 -0.9040322,0.16322 -2.3930199,0.16322 C 0.90402648,296.6657 0,296.60401 0,296.50248 Z"/>
+ </g>
+ <title>Kastter</title>
+ </svg>
+ </span>
+ <p>766 Liberty Ave Brokling NY 11028</p>
+ </address>
</div>
<aside class="copy-info">
<a href="/"></a>
<address class="text-center">
- <p>Doctoralia Internet SL</p>
- <p>C/ Josep Pla 2 - Building B2, floor 13</p>
- <p>08019 Barcelona, Spain</p>
+ <p>Need help Call Us</p>
+ <p><a class="strong" href="tel:+9293025031">(929) 302-5031</a></p>
</address>
</aside>
<!-- navbar-burger -->
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..ccd6e6f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,403 @@
+:root {
+ --background: #1976d3;
+ --background-l1: #eff3f6;
+ --background-l2: #FFF;
+ --background-l3: #7c8083;
+ --header-bg: #FFF;
+ --vertical-block-space: 3.5rem;
+ --text: #000;
+ --text-l1: #1976d3;
+ --text-l2: #FFF;
+ --h1: #000;
+ --h2: #d5dce2;
+ --h3: #bbc6ce;
+ --h4: #a2afb9;
+ --h5: #8a99a3;
+ --h6: #73828c;
+}
+
+div, button {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-family: "liberation serif", "times new roman", calibri, carlito, serif;
+ color: var(--text);
+}
+
+body {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr 1fr;
+ grid-gap: 10px 10px;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ /* Fix height */
+ height: 100vh;
+ /* grid-template-rows: auto 1fr auto; */
+}
+
+.text-center {
+ text-align: center;
+}
+
+.header {
+ display: grid;
+ grid-template-columns: 60px auto 60px;
+ grid-template-rows: auto auto;
+ gap: 0px 0px;
+ grid-template-areas:
+ "navbar-burger logo-name ."
+ "navbar-menu navbar-menu navbar-menu";
+ grid-area: header;
+
+ background: var(--header-bg);
+}
+
+.header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ left: 0;
+ z-index: 100;
+}
+
+.l-block {
+ margin-bottom: var(--vertical-block-space);
+}
+
+.navbar-menu {
+ grid-area: navbar-menu;
+
+ display: none;
+}
+
+/* ---------- Menu Mobile sin JS ------------ */
+/* input hidden */
+#navbar-toggle-cbox {
+ display: none;
+}
+
+label[for=navbar-toggle-cbox] {
+ cursor: pointer;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-menu {
+ display: block;
+}
+/* --------- End Menu Mobile sin JS ----------- */
+
+/* --------- Menu Mobile JS ------------ */
+.navbar-burger.is-active {
+ display: flex;
+ cursor: pointer;
+ position: relative;
+ justify-content: center;
+ width: 100%;
+ height: auto;
+}
+
+.navbar-burger.is-active span {
+ display: block;
+ position: absolute;
+}
+
+.navbar-burger.is-active span:nth-child(1) {
+ transform: translateY(5px) rotate(45deg);
+ top: calc(50% - 6px);
+}
+
+.navbar-burger.is-active span:nth-child(2) {
+ opacity: 0;
+}
+
+.navbar-burger.is-active span:nth-child(3) {
+ transform: translateY(-5px) rotate(-45deg);
+ top: calc(50% + 4px);
+}
+/* --------- End Menu Mobile JS ----------- */
+
+.navbar-menu > ul > li {
+ list-style: none;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.navbar-menu .list-item {
+ display: grid;
+ grid-row-gap: 1rem;
+ padding-left: 60px;
+ padding-right: 60px;
+}
+
+/* Item menu hover */
+.navbar-menu > ul > li:hover {
+ border-bottom: 1px solid var(--background-l3);
+}
+
+ul.list-item > li > a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.navbar-burger {
+ grid-area: navbar-burger;
+ margin: auto;
+
+ display: grid;
+ grid-row-gap: .25rem;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+}
+
+.navbar-burger span {
+ background-color: var(--text);
+ display: block;
+ height: 2px;
+ transform-origin: center;
+ transition-duration: 86ms;
+ transition-property: background-color,opacity,transform;
+ transition-timing-function: ease-out;
+ width: 16px;
+}
+
+.logo-name {
+ grid-area: logo-name;
+ justify-self: center;
+ align-self: center;
+
+ text-decoration: none;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+.logo-name > span.logotype {
+ display: block;
+ color: var(--text);
+ width: 100px;
+}
+
+#cm-search {
+ display: none;
+}
+
+.sc-lupa {
+ justify-self: center;
+ align-self: center;
+}
+
+.sc-lupa label svg {
+ width: 24px;
+ height: 24px;
+ color: var(--black20);
+ cursor: pointer;
+}
+
+.sc-form {
+ display: none;
+}
+
+/* back search*/
+#cm-search:checked ~ .open-form {
+ grid-column: 1 / span 3;
+ justify-self: center;
+
+ display: grid;
+ grid-template-columns: auto auto;
+ align-items: center;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+#cm-search:checked ~ .open-form form > input {
+ background: var(--background-l2);
+ color: var(--text);
+ border: 1px solid var(--background-l3);
+}
+#cm-search:checked ~ .clicked {
+ display: none;
+}
+#cm-search:checked ~ .navbar-burger {
+ display: none;
+}
+#cm-search:checked ~ .logo-name {
+ display: none;
+}
+
+.back-search > label svg {
+ width: 24px;
+ height: 24px;
+ color: var(--black20);
+}
+.back-search > label svg {
+ width: 24px;
+ height: 24px;
+}
+
+.fm-send-search form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+}
+
+.fm-send-search form input {
+ border-radius: 2px 0px 0px 2px;
+ border: 1px solid var(--background-l3);
+ color: var(--text);
+ font-weight: 400;
+ height: 30px;
+ font-size: 14px;
+ padding: 0px 1rem;
+}
+
+.fm-send-search form button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 65px;
+ height: 30px;
+ border: 1px solid var(--background-l3);
+ border-left-width: 0px;
+ color: var(--text);
+ background-color: var(--background-l1);
+ border-radius: 0px 2px 2px 0px;
+ cursor: pointer;
+}
+
+.main {
+ grid-area: main;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "categories"
+ "shopping";
+}
+
+/* ------ Hidden arrows ------ */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.strong {
+ font-weight: 800;
+}
+
+.footer {
+ grid-area: footer;
+
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto;
+ grid-row-gap: 10px;
+ grid-template-areas:
+ "footer-info"
+ "copy-info";
+
+ background: var(--background);
+ border-radius: 10px;
+ color: var(--text-l2);
+}
+
+.footer-info {
+ grid-area: footer-info;
+
+ margin-top: 1rem;
+}
+.copy-info {
+ grid-area: copy-info;
+
+ margin-bottom: 1rem;
+}
+
+.footer-info > address > p,
+.copy-info > address > p {
+ margin: 0px;
+}
+
+.copy-info > address > p > a {
+ color: var(--text-l2);
+}
+
+/* tables */
+@media (min-width: 600px) {
+ #cm-search:checked ~ .open-form {
+ grid-column: 1 / span 3;
+ grid-template-columns: auto minmax(auto, 500px);
+ }
+ .open-form form > input {
+ width: 80%;
+ }
+}
+
+/* For desktop: */
+@media only screen and (min-width: 992px) {
+ body {
+ height: auto;
+ grid-template-rows: auto auto auto;
+ }
+ .header {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto auto;
+ grid-template-areas: "logo-name navbar-menu sc-form";
+ background: var(--header-bg);
+ }
+ .logo-name {
+ justify-self: start;
+ margin-left: 2rem;
+ }
+ .logo-name > span.logotype {
+ display: block;
+ color: var(--text);
+ width: 150px;
+ }
+ .navbar-burger {
+ display: none;
+ }
+ .navbar-menu {
+ display: flex;
+ }
+ .list-item {
+ justify-content: flex-end;
+ margin-left: auto;
+ display: flex;
+ align-items: stretch;
+ }
+ .navbar-item {
+ padding: 0px .75rem;
+ }
+
+ .navbar-menu .list-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0px;
+ margin-top: 0px;
+ }
+
+ .navbar-menu > ul > li {
+ padding-top: .7rem;
+ padding-bottom: .7rem;
+ }
+
+ .sc-form {
+ grid-area: sc-form;
+ }
+ #cm-search:checked ~ .logo-name {
+ display: block;
+ }
+
+ #cm-search:checked ~ .open-form {
+ grid-column: auto;
+ grid-template-columns: auto minmax(auto, 500px);
+ }
+ .l-block {
+ margin-bottom: 4rem;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 09:28:08 +0000