Erick Briones

Hola, intenté crear mi cuenta pero me aparece este error, probé con otro correo y sí me dejó pero... me pide mis datos bancarios para poder tener acceso al dashboard, ¿es necesario ingresar esa información?

Este es el ejercicio terminado, hice los cupcakes en Figma y le agregué algunos estilos. Les dejo el link a mi repositorio de github para que puedan ver los archivos

https://github.com/erick-brsa/Cupcakes/tree/main/primera-app/src

Al igual que otros usuarios yo también he tenido problemas para ejecutar el servidor, no conozco mucho el lenguaje Go y no sé qué tengo que hacer para que funcione correctamente, ¿podrían actualizar el código o ayudarme a levantar el servidor?

Código HTML

<header class="header">
    <strong>EDteam</strong>
    <nav class="nav">
        <ul class="menu">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>
<aside class="sidebar">
    <h3>Slecciona un tema</h3>
    <div class="themes">
        <div class="theme">
            <input type="radio" name="theme" id="light" checked> 
            <label for="light">Claro</label>
        </div>
        <div class="theme">
            <input type="radio" name="theme" id="dark">
            <label for="dark">Oscuro</label>
        </div>
    </div>
</aside>
<main>
<div class="hero">
<img src="https://edteam-media.s3.amazonaws.com/courses/big/5692921c-f5f1-419e-bd29-11e61bcafdf5.png">
<h1>Bienvenido a EDteam</h1>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi temporibus? 
Ea animi quae ut reiciendis vitae itaque officia, maiores, quasi tempore quibusdam 
quos tempora voluptatem modi, ipsa eaque molestiae? Lorem ipsum dolor sit amet 
consectetur adipisicing elit. Dolores, modi temporibus? Ea animi quae ut reiciendis 
vitae itaque officia, maiores, quasi tempore quibusdam quos tempora voluptatem modi, 
ipsa eaque molestiae?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi temporibus? 
Ea animi quae ut reiciendis vitae itaque officia, maiores, quasi tempore quibusdam 
quos tempora voluptatem modi, ipsa eaque molestiae? Lorem ipsum dolor sit amet 
consectetur adipisicing elit. Dolores, modi temporibus? Ea animi quae ut reiciendis 
vitae itaque officia, maiores, quasi tempore quibusdam quos tempora voluptatem modi, 
ipsa eaque molestiae?</p>
</main>
<footer class="footer">
    EDteam | 2021 - 2022
</footer>
<script src="scripts.js"></script>

Código CSS

:root {
    --bg-color: <a href="/comunidad/publicaciones?q=%23eee" data-community-hashtag="true">#eee</a>;
    --bg-color-2: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
    --text-color: <a href="/comunidad/publicaciones?q=%2353575A" data-community-hashtag="true">#53575A</a>;
    --accent-color: <a href="/comunidad/publicaciones?q=%23007BDF" data-community-hashtag="true">#007BDF</a>;
    --font: 'Open Sans', sans-serif;   
}

*,*::before,*::after {
    box-sizing: border-box;
}

body {
    display: grid;
    min-height: calc(100vh - 2rem);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 4rem 1fr 4rem;
    grid-gap: 1rem;
    margin: 1rem;
    font-family: var(--font);
}

img {
    width: 100%;
}

main {
    grid-column: span 3;
}

.header,
.footer {
    grid-column: span 4;
}

.header,
.sidebar,
.main,
.footer {
    padding-left: 1rem;
    padding-right: 1rem;
}
.theme {
    padding: .2rem 0;
}

.header,
.footer {
    display: flex;
    align-items: center;
}

.nav {
    margin-left: auto;
}

.menu {
    list-style: none;
    display: flex;
}

.menu li {
    margin-left: 1rem;
}

.menu a {
    text-decoration: none;
}

.footer {
    justify-content: center;
}

.hero {
    position: relative;
    margin-bottom: 2rem;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
}

.hero h1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

/* Theme */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

a {
    color: var(--accent-color);
}

.header,
.footer,
.sidebar {
    background-color: var(--bg-color-2);
}

.hero::before {
    background-color: var(--accent-color);
}

.hero h1 {
    color: var(--bg-color-2);
}

Código JS

const changeThemeButtons = document.querySelectorAll('[name=theme]')
const rootStyles = document.documentElement.style

const lightTheme = {
    '--bg-color': "#EEE",
    '--bg-color-2': "#FFF",
    '--text-color': "#53575A",
    '--accent-color': "#007BDF",
    '--font': "'Open Sans', sans-serif"   
}

const darkTheme = {
    '--bg-color': "#53575A",
    '--bg-color-2': "#282D31",
    '--text-color': "#EEE",
    '--accent-color': "#FF3C32",
    '--font': "'Open Sans', sans-serif"   
}

for(let button of changeThemeButtons) {
    button.addEventListener('change', e => {
        if (e.target.id === 'dark') {
            changeTheme(darkTheme)
        } else if (e.target.id === 'light') {
            changeTheme(lightTheme)
        }
    })
}

const changeTheme = theme => {
    let cssVars = Object.keys(theme)
    for (let cssVar of cssVars) {
        rootStyles.setProperty(cssVar, theme[cssVar])
    }
}

<svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="30 45, 100 25, 100 170, 45 140" fill="#DE002D" />
    <polygon points="170 45, 100 25, 100 170, 155 140" fill="#C4002B" />
    <polygon points="60 135, 100 40, 100 70, 75 135" fill="#FFF" />
    <polygon points="140 135, 100 40, 100 70, 125 135" fill="#FFF" />
    <polyline points="80 105, 120 105" stroke="#FFF" stroke-width="10" />
</svg>

No sé si fui el único que se preguntaba si podía agrupar algunas propiedades del texto y encontré que precisamente font es un shorthand, me pareció interesante y se los quería compartir. Aquí está el enlace Full Text Styling With a Single Line of CSS