Finalizando ejercicio de perfil de usuario

Imagen del reto

Vista responsive

Yo llevé el proyecto un nivel más adelante y lo convertí en responsive.

Les dejo el link por si quieren ir a verlo: Click aquí

Creo que amo Sass. Solo falta Stylus para decidir! 😄 Gracias profe, todo genialmente explicado.

Felicidades a los que completaron el reto 👏👏 ¡Que buenos perfiles!

no esta tan chido pero lo cambio solamente modificando las variables por otra paleta de color
![](

Hola, quiero compartir el resultado del reto adaptado también a responsive.

Reto finalizado: código

Reto en Sass

Solucion:

1.Crear el Mixin

@mixin mode-background ($color) {
	@if $color == $color-primario {
			background-color: $color-primario;
			color: $color-claro;
			.perfil__nombre{
				color: $color-secundario;
				@include titulos($Fuente2);
			}

			.perfil__titulo{
				color: $color-variacion;
				@include titulos($Fuente2);
			}

			.perfil__boton {
				color: $color-claro;
				background-color: $color-variacion;
			}

	} @else  {
			background-color: $color-claro;
			color: $color-primario;
		.perfil__nombre{
			color: $color-secundario;
			@include titulos($Fuente2);
		}

		.perfil__titulo{
			color: $color-variacion;
			@include titulos($Fuente2);
		}

		.perfil__boton {
			color: $color-claro;
			background-color: $color-variacion;
		}
	}
}

2. Agregar el mixin a _perfiles.scss

.perfil {
	width: 40%;
	padding-top: 50px;
	color: $color-claro;
	background-color: $color-secundario;
	@include mode-background ($color-claro);
	&__avatar {
		display: block;
		margin: 0 auto;
		border-radius: 50em;
	} ...... //Continua parte del codifo hecho en las clases

3. Agregar el Mixion en _articulos.scss

.articulos {
	width: 60%;
	padding: 50px 0 0 50px;
	@include mode-background ($color-primario);
}

Resultado (Sin el Mixins)

Resultado (con el Mixins)

Reto finalizado.

Reto cumplido.

Listo resuelto tuve que modificar unas cuantas cosas pero resulto

@mixin modo_dark($modo){
  @if $modo{
  body {
      background-color: $Color-primario;
      color: $Color-Claro;
     }
  .perfil{
    background-color: $Color-Claro;
    color:$Color-Secundario;
    &__titulo {
    color: get-opacity($Color-Variacion, .70);
    }
    &__boton{
      background-color: get-opacity($Color-primario, .90);
      border: 2px solid get-opacity($Color-Claro, .99);
    }
  .estadistica--perfil {
      span {
        color: get-opacity($Color-primario, .50);
      }
    }
  }
  } @else {
  .perfil{
      background-color: $Color-Secundario;
      color: $Color-Claro;
      &__titulo {
      color: get-opacity($Color-Claro, .50);
      }
      &__boton{
        background-color: get-opacity($Color-primario, .20);
        border: 2px solid get-opacity($Color-Claro, .30);
      }
  
  }}}
  $modo_dark: true;
  @include modo_dark($modo_dark);

Reto cumplido! Me esta encantando Sasssss

Reto finalizado

(url)

Light vs Dark

Listo! Lo que hice fue crear una variable dark-mode que si está en true cambia los colores.

$dark-mode: true;
$dm-color-back: #e0e0e0;
$dm-color-font: #555555;


@each $estado in ($dark-mode) {
    @if $estado==true {
        main .perfil {
            background-color: $dm-color-back;
            h2 {
                color: $color-secundario;
            }
            h3, .perfil__minibio h3 {
                color: $color-variacion;
            }
            .estadistica_elemento h3 {
                color: $color-primario;
            }
            .estadistica_elemento span {
                color: $dm-color-font;
            }
            .perfil__boton {
                background-color: $color-primario;
            }
            .ubicacion--perfil h2 {
                color: $color-primario;
            }
            .ubicacion--perfil h3 {
                color: $dm-color-font;
            }
            .galeria h2 {
                color: $color-primario;
            }
        }
        .articulos {
            background-color: $color-primario;
            color: $dm-color-back;
        }
    }
}

Reto cumplido 😎
![](

Reto:
(

sigamos 😄

Crei que aun faltaba bastante para terminar la pagina, genial bloque

Dark mode and light mode

Reto
.
Agregue una variable

$dark-mode: true;

Coloque una condicional dentro de un mixin con los cambios de colores
.

@mixin dark{
	@if $dark-mode == true{
		.perfil{
			background-color: $color-claro;
			&__nombre{
				color: $color-secundario;
			} 
			&__titulo{
				color: $color-variacion;
			}
			&__boton{
				background-color: $color-primario;
			}
		}
		.articulos{
			background-color: $color-primario;
		}
		.articulo{
			&__titulo{
				color: $color-claro;
			}
			&__descripcion{
				color: $color-claro;
			}
		}
	}
}

La llamada del mixin dentro del body
.

body{
	margin: 0;
	@include titulos($fuente1);
	@include dark;
}

Resultado
.

Aquí mi reto completado:

El curso de sass como introducción es bueno, fuera genial tener un curso completo de sass donde se indique más a detalle con diferentes ejemplos como por ejemplo es el uso de responsive. vi un ejemplo en las preguntas pero no entendí cómo lo hacía.
También me quedaron dudas como el hacer el modo oscuro, muchos de los que vi utilizan mixin pero no sé cómo se lo llamaría desde un botón usando js

Reto: Hice un condicional en cada elemento que cambió dependiendo si quería mostrar o no el theme secundario.

@function switchTheme($switch-theme, $default, $newColor) {
  @if $switch-theme == true {
    @return $newColor;
  } @else {
    @return $default;
  }
}

background-color: switchTheme(
      $switch-theme,
      get-opacity($color-primario, 0.2),
      $color-primario
    );

Me encantó Saas

Acabo de darme cuenta que sin querer olvidé poner las extensiones “.scss” de los componentes y sass me los estuvo compilando bien igual.

Pues me ha gustado mucho esta parte del curso también la verdad, en fin reto conseguido, esta vez si mi enfoque inicial fue usar un mixin con un condicional 😃

Así quedo mi reto:

le puse un position fixed al articulo para que solo hiciera scroll la seccion de perfil

![](

Imagen del reto

genial!!! sass y me convenció para usar preprocesadores

Mi aporte!

Reto finalizado 😄

¡Reto finalizado!

@mixin fondo($background, $color){
background-color: $background;
color: $color;
}

RETO TERMINADO:
.
.

Aqui esta la otra parte del diseño final 😄

Agregue un video a la parte del perfil

Resultado del reto:

Reto cumplido:

Para el proyecto lo hice responsive usando JS. Los artículos los puse como si fueran un menú desplegable.

![](

Listo!

El reto en la sección de la derecha.

body.active {
    background-color: $color__primario;
	color: $color__claro;
}

También hice cambios mínimos, agregando un par de media queries para hacerlo responsive:

Les comparto el enlace clic aquí.

Que feo le quedó profe 😂

Reto finalizado.

Necesito practicar mas con preprocesadores xd

Yo no hice el reto, pero aquí esta como yo hice el ejercicio

Reto listo

Mi resultado del reto. Realice algunos pequeños ajustes para centrar algunos objetos y ajustar el fondo a la pantalla del navegador.

Hola, haciendo trampa como siempre

Añadí dos mixins a globales con la condicional en la variable $dark-mode en globales.scss

$dark-mode: true;

@mixin articulos-modo {
  @if $dark-mode == true {
    background: $color-primario;
    color: $color-claro;
  } @else {
    background: $color-claro;
    color: $color-primario;
  }
}

@mixin perfil-modo {
  @if $dark-mode == true {
    background: $color-claro;
    color: $color-secundario;
    .perfil__boton {
      background-color: get-opacity($color-variacion, .8);
    }
    > h3 {
      color: get-opacity($color-variacion, 0.8);
    }
    .perfil__minibio h3 {
      color: get-opacity($color-variacion, 0.8);
    }
  } @else {
    background: $color-secundario;
    color: $color-primario;
    > h3 {
      color: get-opacity($color-claro, 0.5);
    }
    .perfil__minibio h3 {
      color: get-opacity($color-claro, 0.5);
    }
    h2 {
      color: $color-claro;
    }
    .galeria h2 {
      color: $color-primario;
    }
    .ubicacion--perfil h2 {
      color: $color-primario;

    }
  }
}

Termine el reto 😃

Reto 🤘🏼

Proyecto terminado, Excelente clase 💚

Reto completado:

Pensaba que utilizar sólo CSS puro sería suficiente, que un preprocesador era sólo complicar las cosas.
Hoy gracia sa este curso, corrijo mi opinión. #TeamSaSS

Saludos Platzinautas.

Versión mobile

reto cumplido

https://codingjairomerea.github.io/practiceSass/

Reto completado

Código:

@mixin dark($mode) {
  @if $mode== "dark" {

    .articulos {
      color: $color-claro;
      background-color: $color-primario;
    }

    .perfil {
      background-color: $color-claro;
      &__nombre {
        color: $color-secundario;
      }

      &__titulo {
        color: get-opacity($color-variacion, 0.5);
      }

      &__boton {
        background-color: $color-primario;
        color: $color-claro;
        border-color: $color-primario;
      }
    }
  }
}

• Pro tip: agreaga lo siguente al tag main para que se adapte a cualquier resolucion de pantalla

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
}

El tema de aqui es hacerlo dinamico al dark mode… un switch que permita cambiar de modo.

Les recomiendo(si trabajan con JS) que manipulen el localStorage para el dark mode creando una instancia con este método: localStorage.setItem(‘dark_mode’, ‘false’);
De esta forma si manipulan bien esto, podrán persistir mucho más sus estilos en el DOM

aqui esta!!!

Reto completado:

Listo!!

https://github.com/crvb0797/Proyecto-perfil Listo no olviden dejar su estrella quisiera ver sus modificaciones.

Excelentes los pre procesadores, como con unos pocos ajustes logras grandes cambios!

Me quedó una duda respecto al CSS. Cuando Wilson le da 100% de height a la sección perfi, en su pantalla esto se visualiza bien, sin embargo, en mi monitor, que creo tiene mayor tamaño, queda bien con height: 100vh y queda mal con height: 100%, ya que queda un espacio blanco debajo. ¿Hay alguna forma en la cual sin usar media queries podamos dejar el tamaño responsive?

Excelente explicacion bien resumida y dada sobre este preprocesador.

Terminado!

Mi solucion:

.perfil {
    background-color: $color-claro;
    &__nombre {
        color: $color-secundario;
    }
    &__titulo {
        color: $color-variacion;
    }
    &__boton {
        background-color: $color-primario;
    }
}
.articulos {
    background-color: $color-primario;
    color: $color-claro;
}

Terminado 😄

Reto cumplido.
Repositorio.

Reto cumplido

Reto cumplido 😃 A continuar

Reto cumplido.

baibora! Cuando los media queries con SASS?

Reto cumplido
Perfil

Reto cumplido.

@mixin DarkMode($modo-oscuro)  {
	@if ($modo-oscuro == $color-primario) {
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			@include titulos($fuente1);
		}
		
		main {
			display: flex;
			width: 100%;
			height: 100%;
			background-color: $color-primario;
		}
	
		.perfil {
			background-color: $color-terciario;
			// color:get-opacity($color-variacion,0.20);
    	&__nombre {
        	color: $color-secundario;
    	}
    	&__titulo {
        	color: $color-variacion;
    	}
    	&__boton {
        	background-color: $color-variacion;
		}
		}
		.articulos { 
			color: $color-claro;
		}
		
	}@else{
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			@include titulos($fuente1);
		}
		
		main {
			display: flex;
			width: 100%;
			height: 100%;
		}
		
	}
}
body{
	//aca solo cambiar color primario o claro
	@include DarkMode($color-primario);
	margin:0;
}

Me agrada el profesor Wilson…el hombre se ve que es buen profesor…Dios lo bendiga tocayito