diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..55ebae1ab 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,310 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +@media (max-width: 768px){ + nav{ + display: flex; + background-color: purple; + width: 150%; + } + + div img{ + display: flex; + width: 40%; + margin-top: 3%; + margin-left: 3%; + } + + + /*botones busqueda y menu*/ + nav div button { + background-color: purple; + border: none; + margin-right: 8%; + + } + + nav div button img { + image-rendering: auto; + width: 100%; + height: auto; + display: block; + background-color: purple; + } + + + nav div { + display: flex; + width: 50%; + + } + nav div ul { + display: none; + } + + + + /* seccion header*/ + + header { + background-color: purple; + + } + + h1 { + color: white; + } + header, main section, footer { + max-width: 700px; + margin: 0 auto; + } + + nav ul { + display: flex; + gap: 1rem; + } + + nav > div:last-child ul { + display: flex; + gap: 1rem; + } + + header { + flex-direction: row; + justify-content: space-between; + text-align: left; + } + + header > div { + flex: 1; + padding: 1rem; + } + + main section:nth-child(2) ul { + flex-direction: row; + justify-content: space-around; + } + + main section:nth-child(3) button { + width: 200px; + } + +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #ffffff; + color: #000000; + } + + /* NAVBAR */ + nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + flex-wrap: wrap; + } + + nav > div:first-child { + display: flex; + align-items: center; + gap: 1rem; + } + + nav ul { + list-style: none; + display: none; + } + + nav button { + background: none; + border: none; + margin-left: 0.5rem; + } + + nav img { + height: 30px; + } + + /* HEADER */ + header { + background-color: #4A154B; + color: white; + padding: 2rem 1rem; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + } + + header h1 { + font-size: 1.8rem; + margin-bottom: 1rem; + } + + header p { + margin-bottom: 1.5rem; + } + + header p span { + color: #ecb22e; + font-weight: bold; + } + + header div button { + width: 100%; + padding: 1rem; + margin: 0.5rem 0; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + } + + header div button:first-of-type { + background-color: white; + color: #4A154B; + } + + header div button:last-of-type { + background-color: #4285f4; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + header div button img { + height: 20px; + margin-right: 8px; + } + + header > div:last-child img { + width: 100%; + max-width: 400px; + margin-top: 1rem; + } + + + main section:nth-child(1) { + text-align: center; + padding: 2rem 1rem; + } + + main section:nth-child(1) div { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } + + main section:nth-child(1) img { + height: 30px; + max-width: 100px; + } + + + main section:nth-child(2) { + padding: 2rem 1rem; + text-align: center; + } + + main section:nth-child(2) h3 { + font-size: 1.3rem; + margin-bottom: 1rem; + } + + main section:nth-child(2) ul { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + gap: 1.5rem; + } + + main section:nth-child(2) li span { + display: block; + font-size: 2rem; + color: #4A154B; + font-weight: bold; + margin-bottom: 0.5rem; + } + + + main section:nth-child(3) { + background-color: #4A154B; + color: white; + text-align: center; + padding: 2rem 1rem; + } + + main section:nth-child(3) h3 { + font-size: 1.5rem; + margin-bottom: 1.5rem; + } + + main section:nth-child(3) button { + width: 100%; + padding: 1rem; + margin: 0.5rem 0; + border-radius: 4px; + font-weight: bold; + cursor: pointer; + } + + main section:nth-child(3) button:first-of-type { + background-color: white; + color: #4A154B; + border: none; + } + + main section:nth-child(3) button:last-of-type { + background-color: transparent; + border: 1px solid white; + color: white; + } + + /* FOOTER */ + footer { + padding: 2rem 1rem; + text-align: center; + } + + footer ul { + list-style: none; + padding: 0; + margin: 1rem 0; + } + + footer ul li { + margin: 0.5rem 0; + font-size: 0.9rem; + } + + footer hr { + margin: 1rem 0; + } + + footer i { + font-size: 1.5rem; + margin: 0 0.5rem; + } + + footer small { + font-size: 0.75rem; + color: #666666; + } + + @media (min-width: 768px) { + + } + \ No newline at end of file