No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Edición de Cuenta: Cambios en Inputs y Botones en Pantalla

10/22
Recursos

Esta vez te enseñaré a maquetar la pantalla que permitirá al usuario editar su cuenta. Como puedes ver, esta vista contiene otros datos relevantes como el email, la contraseña y el nombre de la persona.

edit.png

Cómo enseñar al usuario los datos ingresados

Para mostrarle a usuario los datos que ingresó en su registro, usaremos el código de la sección “crear cuenta. Teniendo presente que la función de esta vista es mostrar información, no obtenerla. Es necesario que modifiquemos lo siguiente al formulario.

  • Los inputs los dejamos como párrafos
<div>
          <label for="name" class="label">Name</label>
          <p class="value">Camila Yokoo</p>

          <label for="email" class="label">Email</label>
          <p class="value">camilayokoo@gmail.com</p>

          <label for="password" class="label">Password</label>
          <p class="value">*********</p>
        </div>
  • Estilizamos el texto
.value {
      color: var(--very-light-pink);
      font-size: var(--md);
      margin: 8px 0 32px 0;
    }
  • Al botón le aplicamos la clase secondary-button
.secondary-button {
      background-color: var(--white);
      border-radius: 8px;
      border: 1px solid var(--hospital-green);
      color: var(--hospital-green);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }

Cómo continuar con el proyecto

Hemos finalizado el módulo de creación de las pantallas de autenticación. Ahora solo nos falta construir las vistas principales. Recuerda que en el Curso Práctico de React.js uniremos todas las pantallas terminando nuestro frontend.

Si crees que sería bueno darle dinamismo a estas vistas con JavaScript, también lo haremos en el curso Práctico de JavaScript.



Contribución creada por Guadalupe Monge Barale

Aportes 52

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

No se si me adelanto pero si quieren colocar el logo del proyecto en el titulo de la pestaña solo tiene que añadir un link en el <head> con la ruta de la imagen en el caso del proyecto es la

<link rel="shortcut icon" href="./logos/favicon_bota_fora.png.svg" type="img">

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    
    <title>Document</title>
    <style>
        :root {
            --black: #000000;
            --white: #ffffff;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #acd0b2;
            --primary-button-hover: #5ab865;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            margin:0;
            padding:0
        }

        .login{
            width:100%;
            height: 100vh;
            display: grid;
            place-items: center ;
        }

        .container{  
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }

       

        .title{
            font-size: var(--lg);
            margin-bottom: 40px;
            text-align: start;
        }


        .form{
            display: flex;
            flex-direction: column ;
        }

        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }

        .value{
            color: var(--very-light-pink);
            font-size: var(--md);
            margin: 8px 0 32px 0;
        }
        
        .primary-button{
            margin-top: 24px;
            
            height: 40px;
            width: 300px;
            border: 1px solid var(--hospital-green);
            border-radius: 12px;
            

            color: var(--hospital-green);
            font-size: var(--md);
            font-weight: bold;

            background-color: var(--white);

            cursor: pointer;


        }

        .primary-button:hover{
            background-color: var(--primary-button-hover);
            color: var(--white);
        }

        @media (max-width: 640px){
            .logo{
                display: block;
            }

            .primary-button{
                position: absolute;
                bottom: 0;
                margin-bottom: 24px;
            }
        }
        
    </style>
</head>
<body>
    <div class="login">
        <div class="container">
            <h1 class="title">
                My account
            </h1>
            
            <form action="" class="form">
                <label for="name" class="label">
                    Name
                </label>
                <p class="value">
                    Camila Yokoo
                </p>

                <label for="email" class="label">
                    Email address
                </label>
                <p class="value" >
                    [email protected]
                </p>

                <label for="password" class="label">
                    Password
                </label>
                <p class="value">
                    ***********
                </p>
                
                <input type='submit' value="Edit" class="primary-button login-button" />
            </form>
        </div>
    </div>
</body>
</html>

Primero, agradecido de todo el conocimiento adquirido hasta el momento.

Segundo, ‘pico paréntesis’ debería pasar a formar parte de la documentación oficial. 😃

Otra pantalla más terminada! Realmente esta siendo muy sencillo ya que una vez tienes una pantalla, la siguiente cambia una que otra cosa.
🌐 Les comparto mi código: https://github.com/iJCode1/frontend_practico_platzi

Hasta aquí mi reporte, he realizado este proyecto con Angular, por si alguien quiera tener una base, lo único que le veo de malo hasta ahora es que realizo un copy-paste de varios estilos en los individuales de cada componente, eso se puede solucionar agregando los estilos en el archivo de styles.sccs y agregar los diferentes en cada hoja de estilos de los componentes.
https://github.com/KevinZav/Frontend-Basic

Prefiero hacerlo con la opción disabled que la etiqueta <p>
\

Feliz de ver como cada avance que hacemos en el proyecto ayuda a asentar los conocimientos. Cuando empecé pensé que sería mucho más complejo, ahora con cada clase lo veo más simple!!! Esto es adictivo!!

Intenté implementar Javascript para cambiar los datos de la cuenta y este es el resultado.
Aunque ahora me gustaría saber como se guardaría eso en una base de datos 🤔.

Js

const button = document.querySelector(".button__secondary");

console.log(button);
button.addEventListener("click", availableToChangeData);
button.addEventListener("click", changeButtonValue);

function availableToChangeData() {
  let dataAccount = document.querySelectorAll(".value");
  dataAccount = Array.from(dataAccount);
  console.log(dataAccount);
  for (i in dataAccount) {
    let data = dataAccount[i];
    let dataValue = data.textContent;

    let loginInput = document.createElement("input");
    loginInput.classList.add("login__input");
    loginInput.setAttribute(
      "style",
      "height: 45px;margin-bottom: 20px;padding: 0 12px;border: none;border-radius: 10px;background: var(--text-input-field);color: var(--very-light-pink);font-size: var(--medium);font-weight: 300;outline: none;"
    );
    if (i === "0") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "text");
      loginInput.setAttribute("id", "name");
      loginInput.setAttribute("autocomplete", "name");
    } else if (i === "1") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "email");
      loginInput.setAttribute("id", "email");
      loginInput.setAttribute("autocomplete", "email");
    } else if (i === "2") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "password");
      loginInput.setAttribute("id", "password");
      loginInput.setAttribute("autocomplete", "new-password");
    }

    let dadNode = data.parentNode;
    dadNode.replaceChild(loginInput, data);
  }
}

function changeButtonValue() {
  button.value = "Save";
  button.classList.replace("button__secondary", "login__button");
}


*En esta clase, puedes utilizar la Clase 04 para variar los inputs de los textos.

Con este comando en Windows seleccionas todas las líneas de VScode

ctrl + a 
En mi humilde opinión, a los formularios hay que dejarle los inputs, no reemplazarlos por párrafos. Y, en cambio, usar la propiedad disabled, y darle estilo específico para cuándo esa propiedad aparece sobre el input. Algo como: .input[disabled] { border: none; ... }

Agregue un pequeño cambio en mi pagina con el atributo disabled en los input para no cambiar a una etiqueta p … Me parece que tambien viene bien mostrar los datos asi y ya cuando se presione el boton de editar habilitarlos

Esto de reutilizar código, me está gustando

Comparto mis resultados:

Revisando la pagina en mi telefono con la herramienta de VScode para reenviar puertos, me di cuenta que en celular tenia un scroll que en desktop no, ni usando la herramienta del inspector para ver la parte responsive me salia ese scroll, esto se debe a que en los telefonos tenemos la barra de navegacion que en muchos casos nunca desaparece. Mi solucion fue algo muy siemple y es que en vez de usar la medida **vh** (**viewport height**), la cambie por **dvh** (**dynamic viewport height)**, que si toma en cuenta la barra de navegacion que tenemos en el telefono, con eso me deshice de ese scroll todo molesto
Hello Platzi, Ya tengo my Account\_Details on GreenScreen\n me gusta mucho, \nSiempre es bueno hacer de curiosos con mas \\'Features'\ en CSS para mejorar el Dieseno base, ademas que ese --light-pink color no me gusta para Nada \n ![](https://static.platzi.com/media/user_upload/image-b4be9ada-baf6-4396-b2a4-9002e1c0e6cc.jpg)
Aqui dejo mi aporte sobre la maquetación de la sección "Mi cuenta". [Yard Sale - My account (laumartinez-code.github.io)](https://laumartinez-code.github.io/yard-sale-FE/my-account.html) Repo: [LauMartinez-Code/yard-sale-FE at e68fad10961fe (github.com)](https://github.com/LauMartinez-Code/yard-sale-FE/tree/e68fad10961fe531fdb712ce5dcc944de583025b) Le agregué la funcionalidad para que edite y guarde los cambios desde la misma página si hacer una redirección y que los cambios se persistan en el localStorage. Desde aquí se puede probar el resto del sitio [Yard Sale - Login](https://laumartinez-code.github.io/yard-sale-FE/login.html)

No es necesario:

.logo {
    width: 150px;
    margin-bottom: 48px;
    justify-self: center;
    display: none;
}
Chévere contenido, pero tengo un pequeño conflicto con el siguiente código propuesto ```html
<label for="name" class="label">Name</label>

Camila Yokoo

<label for="email" class="label">Email</label>

[email protected]

<label for="password" class="label">Password</label>

*********

```Por que cambiar los input por etiquetas de párrafos, tiene alguna ventaja a futuro o solo sería por temas de la clase y el uso de las etiquetas. Desde mi punto de vista sería mejor trabajar con input debido a que ya la información puedo editar en la misma página.

Gracias profe por la clase…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root {
            --white: #ffffff;
            --black: #000000;
            --very-light-pink: #c7c7c7;
            --text-input-field: #f7f7f7;
            --hospital-green: #acd9b2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .login {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }
        .form-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        /*.logo {
            width: 150px;
            margin-bottom: 50px;
            justify-self: center;
            display: none;
        }*/
        .title {
            font-size: var(--lg);
            margin-bottom: 48px;
            text-align: start;
            color: var(--black);
        } 
        .form {
            display: flex;
            flex-direction: column;
                   
        }
        .form div {
            display: flex;
            flex-direction: column;
                     
        }
        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }
        .input {
          background-color: var(--withe);
          border: none;
          /* border-radius: 8px; */
          height: 30px;
          font-size: var(--md);
          padding: 6px;
          margin-bottom: 30px;
        }
        .secundary-button{
            background-color: var(--white);
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            height: 50px;
            color: var(--hospital-green);
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
        }
        .login-button {
            margin-top: 14px;
            margin-bottom: 30px;
        }
        @media (max-width:640px) {
            /*.logo {
                display: block;
            }*/
            .form-container{
                height: 100%;
            } 
            .form{
                height: 98%;
                justify-content: space-between;
            }    
        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
                <h1 class="title">My account</h1>
            <form action="/" class="form">
                <div>
                    <label for="name" class="label">Name</label>
                    <!-- /*<input type="text" id="name" placeholder="Alejandro Parra" class="input input-name">*/ -->
                    <p class="input">Alejandro Parra</p>
                    <label for="email" class="label">Email Address</label>
                    <!-- <input type="text" id="email" placeholder="[email protected]" class="input input-email"> -->
                    <p class="input">[email protected]</p>
                    <label for="password" class="label">Password</label>
                    <!-- <input type="password" id="password" placeholder="***************" class="input input-password"> -->
                    <p class="input">**********</p>
                </div>
                <input type="submit" value="Edit" class="secundary-button">
            </form>
                
        </div>
    </div>
</body>
</html> 

Excelente profesora

.

Yo en lugar de poner parrafos deje los input con el atributo booleando “disabled” y le agregue la clase disabled

<input disabled type="text" id="name" class="input disabled" placeholder="Camila Yokoo">

Luego en CSS especifique que los elementos que tengan ambas clases “input” y “disabled” el fondo fuera de color blanco.

.input.disabled{
            background-color: var(--white);
        }

Lo hice antes de ver la clase, el resultado es el mismo, hay algún problema con hacerlo de este modo?

Que bien, me entusiasma mucho ver como se reestructura todo esto en el curso de react 🙈

Comparto los apuntes que he tomado hasta ahora.

Que bueno es reutilizar el código para varías páginas, ya veo un poco el sentido de componentes de los frameworks.

#Básicamente ! Genial =D

respecto a la regla del margin pueden usar como dijo la profe, tanto específicamente a donde los van a asignar. Bottom, left, right, top, o con el general e el sentido de las manecillas del reloj, todo dependerá de como lo trabaja cada uno.

Para agregar el favicon se puede agregar lo siguiente dentro del head

 <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">

Esta excelente el tip de las manecillas del reloj para dar tamaño al margin, para tener muy en cuenta

Super todo, me gusta como se hace de rapido cada pantalla solo es cambiar algunas cositas pero porque tiene una barra de navegacion y nosotros aun no :c

Cambien los estilos de los colores, ya que no se ven!!

"Margin Top and Bottom en la etiqueta §"
Para los que resulte raro/extraño que las etiquetas “p” tengan un margen predeterminado, simplemente se debe al motor del navegador. Estos agregan estilos predeterminados y cada navegador es distinto.

Chrome webkit: agrega un margin top y bottom de 1 em
Firefox Gecko: agrega un margin bottom de 1em

Para estos casos (Se verá en los futuros cursos) se deberá resetear los estilos. Un ejemplo muy básico seria en la etiqueta “Body” poner:

margin: 0px;
padding:0px;

https://stackoverflow.com/questions/20850594/what-is-the-default-margin-value-of-p-tag
https://meyerweb.com/eric/tools/css/reset/
Les recomiendo a este youtuber:
https://www.youtube.com/watch?v=Foieq2jTajE&ab_channel=EduardoFierro

Puedes cambiar los estilos cuando el mouse está encima de de los párrafos y el secundary boton con estos estilos:

.secondary-button:hover
    {
        border: none;
        width: 100%;
        height: 60px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        background-color: var(--hospital-green);
        font-size: var(--medium);
        color: var(--white);
        margin-bottom: 32px;
    }
 .value:hover
    {
        background-color: gray;
        color: var(--text-input-field);
    }


Y si al .value original le agregas esta línea te código te queda mucho mejor:

transition: 0.5s all;

Mi resultado desktop:

Resultado mobile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }

        .login{
             width:100%;
             height:100vh;
             display: grid;
             place-items: center;

        }
        .form-container{
          display:grid;
          grid-template-rows:auto 1fr 
          auto;
          width:300;

        }
        .logo{

         width: 150px;
         margin-bottom: 48px;
         justify-self: center;

        }
        .title{
        font-size:var(--lg);
        margin-bottom: 36px;
        text-align: start;

        }
        .subtitle{

            color:var(--very-light-pink);
            font-size:var(--md);
            font-weight: 300;
            margin-top: 0;
            margin-bottom:32px;
            text-align: center;
        }
        .form{

            display:flex;
            flex-direction: column;
        }
        .form div {

            display:flex;
            flex-direction: column;
        }

        .label{

            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
            
        }
       
        .value{
            color: var(--very-light-pink);
            font-size: var(--md);
            margin: 8px 0 32px 0;

        }
        .secondary-button{

            background-color: var(--white);
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            color:var(--hospital-green);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;

        }
        .login-button{
            margin-top: 14px;
            margin-bottom: 30px;

        }

        @media(max-width:640px){
           
            .form-container{

        height: 100%;
        
            }
           
           
            .form{

                height: 100%;
                justify-content: space-between;
            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
         
            <h1 class="title" >My account</h1>
           
        
    <form action="/" class="form">
        <div>
            <label for="name" class="label">Name</label>
           <p class="value">Camila Yokko</p>
            <label for="email" class="label">Email</label>
           <p class="value">[email protected]</p>
            <label for="password" class="label">Password</label>
            <p class="value">********</p>
        </div>
    
    <input type="submit" value="Edit" class="secondary-button login-button">
</form>
</div>
</div>
</body>
</html>

Dejo mi código 😄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css">
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
        <title>Yard Sale</title>
    <style>
        .myaccount {
            display: grid;
            place-items: flex-start center;

            width: 100%;
            height: 100vh;
        }

        .myaccount__container {
            width: 100%;
            max-width: 42.5rem;
            height: 100%;
            padding: 2.4rem;
            display: grid;
            grid-template-rows: 10% 90%;
        }

        .myaccount__title {
            justify-self: flex-start;
            font-size: var(--lg);
        }

        .form {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .form_text-inputs{
            display: flex;
            flex-direction: column;
        }

        .myaccount__label {
            margin-bottom: 0.4rem;
            margin-top: .4rem;

            font-size: var(--sm);
            font-weight: bold;
        }

        .myaccount__text {
            margin-top: .4rem;
            margin-bottom: 4rem;

            font-size: var(--sm);
            color: var(--very-light-pink);
            font-weight: bold;
        }

        .myaccount__button--secondary{
            align-self: flex-end;

            width: 100%;
            height: 5rem;
            padding: 1.6rem;
            border: solid .1rem var(--hospital-green);
            border-radius: 0.8rem;
            margin-bottom: 1.2rem;
            margin-top: 2rem;

            font-weight: bold;
            background-color: var(--white);
            color: var(--hospital-green);
            font-size: var(--md);
            cursor: pointer;
        }

        .button--primary:hover {
            background-color: #73bf7d;
        }

        .button--primary:active {
            background-color: #4da859;
        }

    </style>
</head>
<body>
    <section class="myaccount">
        <div class="myaccount__container">
            <h1 class="myaccount__title">My account</h1>
            <div action="/" class="form">
                <div class="form_text-inputs">
                    <p class="myaccount__label">Name</p>
                    <p class="myaccount__name myaccount__text">Someone</p>
                    <p class="myaccount__label">Email</p>
                    <p class="myaccount__email myaccount__text">[email protected]</p>
                    <p class="myaccount__label">Password</p>
                    <p class="myaccount__password myaccount__text">********</p>
                </div>
            <input type="submit" value="Edit" class="myaccount__button--secondary">
            </div>
        </div>
    </section>
</body>
</html>

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap” rel=“stylesheet”>
<title>Document</title>
<style>
:root {
–white: #ffffff;
–black: #000000;
–dark: #232830;
–very-light-pink: #c7c7c7;
–text-input-field: #f7f7f7;
–hospital-green: #acd9b2;
–sm: 14px;
–md: 16px;
–lg: 18px;

    }
    body {
        font-family: "font-family: 'Quicksand', sans-serif;";
    }
    body {
        margin: 0;
    }
    .login {
        width: 100%;
        height: 100vh;
        display: grid;
        place-items: center;
    }
    .container {
        display: grid;
        grid-template-rows: auto 1fr 
        auto;
        width: 300px;

    }
    .title {
        font-size: var(--lg) ;
        margin-bottom:  45px;
        text-align: start;
    }
  
    .form {
        display: flex;
        flex-direction: column;
    }
    .label {
        font-size: var(--sm);
        font-weight: bold;
        margin-bottom: 4px;
    }
    .value {
        color: var(--very-light-pink);
        font-size: var(--md);
       margin: 8px 0 32px 0;

    }
    .secundary-buttom {
        background-color: var(--white);
        border-radius: 8px;
        border:  1px solid var(--hospital-green);
        color: var(--hospital-green);
        width:  100%;
        cursor: pointer;
        font-size: var(--md);
        font-weight: bold;
        height: 50px;
    }
    .login-buttom {
        margin-top: 14px;
        margin-bottom: 30px;
    }
    @media (max-width: 640px) {
        .form-container{
            height: 100%;}
          
        .form {
            height: 100%;
            justify-content: space-between;
        }
        
    }

</style>

</head>
<body>
<div class=“login”>
<div class=“container”>
<h1 class=“title”>My account</h1>

        <form action="/" class="form">
            <div>

               <label for="name" class="label">Name</label>
               <p class="value">Camilo Yen </p>
            
               <label for="email" class="label">Email address</label>
               <p class="value">[email protected] </p>

               <label for="password" class="label">Password</label>
               <p class="value">********* </p>

            </div>
            

            <input type="submit"value="Edit"
            class="secundary-buttom login-buttom">

        </form>
    </div>
</div>

</body>
</html>

Resultado: