En esta actividad deben ✨embellecer✨ la página de login (o la de register) del proyecto usando las propiedades de CSS que gusten (la idea es que no utilicen Bootstrap, al menos para esta actividad, para sus proyectos recomendamos fuertemente Bootstrap u otro framework).
Esta vez no hay instrucciones establecidas, solo usen su creatividad para obtener un resultado similar a este para la página de registro del proyecto:
Solo deben trabajar con el archivo register.html
que está en todoapp/templates/todoapp/
, y con style.css
que está en todoapp/static/todoapp/
(Se recomienda fuertemente ver el video de la auxiliar para entender cómo partir) https://youtu.be/kku0yczjW-4
Algunos recordatorios:
git clone https://github.com/Aux-Ing-1/Auxiliar4-html-css.git
cd Auxiliar4-html-css.git
python -m venv env
crean un ambiente virtual.- Activamos el ambiente virtual
A) En linux
source env/bin/activate
B) En Windowsenv/Scripts/activate
pip install --upgrade pip
pip install -r requirements.txt
- No vamos a hacer las migraciones, por lo que vamos a ignorar el mensaje al hacer el paso 8.
python manage.py runserver
- Luego en el navegador se dirigen a http://localhost:8000/register
- Comienzan a editar el archivo register.html
<!-- Estilos locales: -->
<link rel="stylesheet" type="text/css" href="static/todoapp/style.css">
<!-- Estilos de Bootstrap: No se usará para esta actividad -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
Estas líneas deben ir dentro del <head>...</head>
de su archivo .html. Luego podrán usar los estilos que definan en el archivo style.css, o los estilos de Bootstrap guiándose por la documentación (por ejemplo, los botones)
- Selectores de CSS
- CSS Diner: Para practicar el uso de selectores.
- Flexbox Froggy: Para practicar el uso de
display: flex;
. - Bootstrap