Skip to content

Commit

Permalink
Se agrega bootstrap al formulario para ingresar receta
Browse files Browse the repository at this point in the history
  • Loading branch information
@ALCavagnaro
ALCavagnaro committed Apr 29, 2021
1 parent 6bd1842 commit 1938e76
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 159 deletions.
76 changes: 4 additions & 72 deletions estilo.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion estilo.css.map
View file

Large diffs are not rendered by default.

63 changes: 6 additions & 57 deletions estilo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,6 +522,8 @@ nav {

}
}


/*Para la pág. de contacto*/

.formulario-contacto {
Expand Down Expand Up @@ -556,27 +558,13 @@ h2 {text-align: center;
margin: auto;
}

.contenido{
display: flex;
flex-direction: column;
justify-content: center;
}

.formulario {
background-color:$bg-color-formulario-1;
border: 1px $bg-color-formulario-11 solid;
background-color:$color6;
border-radius: $border;
margin: auto;
padding: 4.5rem;
width: 60%;

.datos-personales{
display:flex;
flex-direction: row;

justify-content: space-evenly;
margin-bottom: 2.5rem;
}

.formulario__label{
padding: $paddingH2;
Expand All @@ -585,46 +573,6 @@ h2 {text-align: center;
width: 100%;
}

.formulario__input{
background-color: white;
color:$botonBorde;
border:1px solid $bg-color-formulario-11;
border-radius: $border;
height: 3rem;
width: 40%;
margin: $marginH2;
float: center;
}

.formulario__input--ingrediente{
background-color: white;
color:$botonBorde;
border:1px solid $bg-color-formulario-11;
border-radius: $border;
height: 3rem;
width: 80%;
margin: $marginH2;
}

.formulario__input--pasos{
background-color: white;
color:$botonBorde;
border:1px solid $bg-color-formulario-11;
border-radius: $border;
height: 5rem;
width: 80%;
margin: $marginH2;
}

.formulario__boton--ingrediente{
background-color: pink;
border-radius: $border;
border: 1px solid rgb(233, 183, 229);
padding: $botonPadding;
font-family: $FontH2;
color:white;
width:3rem;
}

.formulario__boton{

Expand All @@ -638,8 +586,9 @@ h2 {text-align: center;
}

.formulario__img {
width:3rem;
height: 3rem;
margin-top: 0.8rem;
width:2rem;
height: 2rem;
&:hover{background-color: $bg-color-formulario-4;}

}
Expand Down
54 changes: 25 additions & 29 deletions ingresoreceta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,41 +59,37 @@ <h2>Completá los siguientes datos y compartí tu receta</h2>
<div class="formulario">
<form method="get">
<div class= "contenido">
<label class= "formulario__label" for="email">Correo electrónico</label>
<input class="formulario__input" required= "required" type="email" name="email" placeholder="Ej.:maría@email.com" id="inputEmail4">
<br>
<br>
<label class= "formulario__label" for="formGroupExampleInput">Título de la receta</label>
<input class="formulario__input" required="required" type="text" maxlength="50" placeholder="Ingresá el título de tu receta" id="formGroupExampleInput">
<br>
<br>
<label class= "formulario__label" for="email">Ingresá los ingredientes de tu receta</label>
<input class="formulario__input--ingrediente" type="text" placeholder="1er. ingrediente. Ej: 200 g. de manteca" maxlength="50">
<br>
<input class="formulario__input--ingrediente" type="text" placeholder="2do. ingrediente. Ej: 1/2 L. de leche descremada" maxlength="50" id="formGroupExampleInput">
<br>
<input class="formulario__input--ingrediente" type="text" placeholder="3er. ingrediente. Ej: 3 yemas de huevo" maxlength="50" id="formGroupExampleInput">
<br>
<div class="col-md-12 formulario-contacto__correo">
<label for="exampleInputEmail1" class="form-label">Correo electrónico</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="ejemplo@ejemplo.com" aria-describedby="emailHelp" required>
<div id="emailHelp" class="form-text">Nunca compartiremos tu dirección de correo electrónico</div>
</div>
<div class="col-md-12 formulario-contacto__label">
<label for="validationServer02" class="form-label">Título de la receta</label>
<input type="text" class="form-control" id="validationServer02" maxlenght="50" placeholder="Ingresa el título de tu receta" required>
</div>
<div class="col-md-12 formulario-contacto__label">
<label for="validationServer02" class="form-label">Agrega los ingredientes de tu receta</label>
<input type="text" class="form-control" id="validationServer02" maxlenght="50" placeholder="Ej. 500 g. de harina" required>
</div>
<div class="formulario__agregar">
<img class="formulario__img" src="img/add.png">
<strong>Agregar ingrediente</strong>
</div>
<br>
<label class= "formulario__label" for="email">Describe brevemente los pasos</label>
<textarea class="formulario__input--pasos" type="text" placeholder="Max. 250 caracteres" maxlength="250"></textarea>
<br>
<textarea class="formulario__input--pasos" type="text" placeholder="Max. 250 caracteres" maxlength="250"></textarea>
<br>
<textarea class="formulario__input--pasos" type="text" placeholder="Max. 250 caracteres" maxlength="250"></textarea>
<br>
<div class="col-md-12 form-floating">
<p>Agrega los pasos de tu receta</p>
<textarea class="form-control" id="floatingTextarea2" maxlength="250" style="height: 5rem"></textarea>
<label for="floatingTextarea2"></label>
</div>
<div class="formulario__agregar">
<img class="formulario__img" src="img/add.png">
<strong>Agregar paso</strong>
</div>
<br>
<div>
<label class= "formulario__label" for="email">¿Para cuántas porciones rinde tu receta?</label>
<select>
<p>¿Para cuántas porciones rinde tu receta?</p>
<select class="col-md-12 form-floating">
<option selected>Seleccioná el número de porciones</option>
<option value="1">1</option>
<option value="2">2</option>
Expand All @@ -105,16 +101,16 @@ <h2>Completá los siguientes datos y compartí tu receta</h2>
</div>
<br>
<br>
<div>
<label class="formulario__boton">Podés subir una foto de tu receta acá</label>
<input class="formulario__input" type="file">
</div>
<div>
<p>Podés subir una foto de tu receta</p>
<input class="formulario__boton col-md-12" type="file" id="formFile">
</div>
<br>
<br>
</div>
<div class="check__input">
<input type="checkbox" name="acepta" value="1" />
<label> Estoy de acuerdo con los<a href="..."> términos y condiciones</a> </label>
<label> Estoy de acuerdo con los<a href="url"> términos y condiciones</a> </label>
</div>
<br>
<br>
Expand Down

0 comments on commit 1938e76

Please sign in to comment.