No consigo averiguar como modificar el texto que viene como acompañamiento a mi checkbox, ya que de repente aparece enorme y por mucho que trate de modificar usando classes y dandole un font-size normal, no cambia, cuando el resto no ha tenido ninguna anomalia a la hora de migrarlo.
Como luce en comparacion al resto:
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const direccion = document.getElementById('direccion');
const telefono = document.getElementById('telefono');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
var usernameValue = username.value.trim();
var emailValue = email.value.trim();
var direccionValue = direccion.value.trim();
var telefonoValue = telefono.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Introduzca un nombre, por favor');
} else {
setSuccessFor(username);
}
if(emailValue === '') {
setErrorFor(email, 'Introduzca un email, por favor');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'El email introducido no es valido, intentelo de nuevo');
} else {
setSuccessFor(email);
}
if(direccionValue === '') {
setErrorFor(direccion, 'Introduzca una direccion, por favor');
} else {
setSuccessFor(direccion);
}
if(telefonoValue === '') {
setErrorFor(telefono, 'Introduzca un telefono, por favor');
} else if(telefono.value.length !== 9) {
setErrorFor(telefono, 'Su numero no tiene la longitud adecuada');
} else{
setSuccessFor(telefono);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.segmento').forEach(section => {
ScrollTrigger.create({
trigger: section,
start: 'top top',
pin: true,
pinSpacing: false
});
});
html {
scroll-behavior: smooth;
}
.navbar-nav>li {
padding-left: 20px;
padding-right: 20px;
}
nav {
background-color: #000033;
opacity: 0.95;
}
.cookie-container {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
background: #2f3640;
color: #f5f6fa;
padding: 15px 32px;
box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);
transition: 400ms;
}
.cookie-container a {
color: #f5f6fa;
}
.cookie-container.active {
bottom: 0;
}
.cookie-btn {
background: #e84118;
border: 0;
color: #f5f6fa;
padding: 12px 48px;
font-size: 18px;
margin-bottom: 16px;
border-radius: 8px;
cursor: pointer;
}
.column-right {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.column-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: #000;
padding: 0rem 2rem;
}
.column-left h1 {
margin-bottom: 3rem;
font-size: 2rem;
font-style: italic;
}
.column-left p {
margin-bottom: 2rem;
font-size: 2rem;
line-height: 1.1;
}
.column-normal{
vertical-align: middle;
text-align: center;
font-size:3rem;
}
.column-normal p{
margin-bottom: 2rem;
font-size: 4rem;
line-height: 4;
}
.column-normal .image{
width: 100%;
height: 100%;
max-width: 750px;
max-height:400px;
}
.container{
margin:0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.segmento {
background: #EC96D3;
}
.cuatro {
background: #66488f;
height: 50vh;
}
.for{
height: 400vh;
}
section{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
position:static;
display:flex;
justify-content: center;
align-items: center;
}
body{
overflow-x: hidden;
}
section .container{
display:grid;
grid-template-columns: 1fr 1fr;
height:95vh;
padding: 3rem calc((100vw - 1300px)/2);
}
section .containersp{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height:50vh;
}
section .containerGAL{
padding: 3rem calc((100vw - 1300px)/2);
}
.gallery-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
width: 80%;
margin: 100px auto;
}
.gallery-container .gallery-card{
overflow: hidden;
}
.gallery-container .gallery-card a > img{
width:100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.gallery-container .gallery-card a{
width:100%;
height: 100%;
}
.gallery-container .gallery-card a > img:hover{
transform: scale(1.5);
}
section .containerimg{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height:60vh;
}
section .text {
color:#fff;
}
section .image{
width: 100%;
height: 100%;
max-width: 750px;
max-height:400px;
}
footer {
margin: 0;
bottom: 0;
position: sticky;
box-sizing: border-box;
display: flex;
color: #fff;
background: #000033;
padding: 50px;
font-size: 14px;
flex-flow: row wrap;
}
.footer-left img {
width: 50%;
max-width: 150px;
max-height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}
.socials {
text-align: center;
}
.footer>* {
flex: 1 100%;
}
.footer-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-right {
display: flex;
flex-flow: row wrap;
}
.footer-right>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
color: #999;
}
.footer-bottom {
text-align: center;
color: #999;
padding-top: 50px;
}
.footer-left p {
padding-right: 20%;
color: #999;
}
.socials a {
background: #364a62;
width: 40px;
height: 40px;
display: inline-block;
margin-right: 10px;
padding: 10px;
}
@media screen and (min-width: 600px) {
.footer-right>* {
flex: 1;
}
.footer-left {
flex: 1 0px;
}
.footer-right {
flex: 2 0px;
}
}
@media (max-width: 600px) {
.footer {
padding: 15px;
}
}
.btninicio {
position: fixed;
width: 50px;
height: 50px;
background: #6F1E51;
bottom: 40px;
right: 50px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
}
.footer h2 {
font-weight: 600;
font-size: 17px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
button{
cursor: pointer;
}
section .containerfrm{
padding: 3rem calc((100vw - 1300px)/2);
height: 150vh;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-color: #051261;
border: 2px solid #051261;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="lightbox.min.css">
<title>Contacto</title>
<link rel="shortcut icon" href="log.png" />
<style>
section .containerfrm{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height: 150vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 1000px;
max-width: 100%;
}
.form {
padding: 30px 40px;
}
.form input{
font-size: 10px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.check {
font-size: 12px;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-color: #051261;
border: 2px solid #051261;
border-radius: 4px;
color: #fff;
display: block;
cursor: pointer;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">SneakerReport</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="ini.html"> <i class="fa fa-home"></i> Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="histo.html"> <i class="fa fa-book"></i> Historia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user"></i> Contacto</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-certificate"></i>
Marcas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sup.html">Supreme <i class="fa fa-exclamation"></i></a>
<a class="dropdown-item" href="pal.html">Palace <i class="fa fa-exclamation"></i></a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="segmento">
<div class = "containersp">
<div class="column-normal">
<p class="text animate__animated animate__heartBeat animate_slow animate__infinite">¿Necesitas mas información?</p>
</div>
</div>
</section>
<section class="segmento dos">
<div class = "container">
<div class="column-right">
<img src="me.jpg" alt="Levv" class="image" />
</div>
<div class="column-left">
<h1 class="text">
Bienvenido
</h1>
<p class="text">¡Buenas! Soy Gonzalo Canteli y un dia como hoy en septiembre del 2018 empecé ademas de mis estudios informáticos, a interesarme por la moda
y la cultura alrededor de ella. Este proyecto es una demostración de algo grande que quiero llevar a cabo.¡Espero que te guste!
</p>
</div>
</div>
</section>
<section class="segmento dos">
<div class = "container">
<div class="column-left">
<p class="text">Si lo desea, puede comunicarse con nosotros a traves de nuestro <a href="#" style="color:pink"onclick="JavaScript:window.location='mailto:'+'gon73li'+'@'+'gmail'+'.com'" > email</a>
</p>
</div>
<div class="column-right">
<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3040.6082074751016!2d-3.678305028399778!3d40.35103652134233!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4226bdd9ea0d85%3A0xafc17f8fcff53d6!2sCentro%20Cultural%20los%20Rosales!5e0!3m2!1ses!2ses!4v1609434348458!5m2!1ses!2ses" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
</div>
</div>
</section>
<section class="segmento for">
<div class = "containerfrm">
<div class="column-normal">
<form id="form" class="form">
<div class="form-control">
<label for="username">Nombre y Apellidos</label>
<input type="text" placeholder="P ej: Juan Perez" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="[email protected]" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Direccion</label>
<input type="text" placeholder="Avenida de Andalucia 4" id="direccion"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Telefono</label>
<input type="tel" placeholder="643936483" id="telefono"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<input name="aceptacion" type="checkbox" class="check"/>
Acepto el uso de mi informacion con fines informativos
<br />
<button style="cursor:pointer">Enviar</button>
<button id="boton" style="cursor:pointer">Reiniciar</button>
</form>
</div>
</div>
</section>
<footer class="footer segmento cuatro" style="bottom:0">
<div class="footer-left">
<img src="yzy.png" alt="snk">
<p>SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
de acceder a moda limitada sin pagar reventa.</p>
<div class="socials">
<a href="https://www.facebook.com/profile.php?id=100011277759449" target="_blank"><i class=" fab fa-facebook"></i> </a>
<a href="https://twitter.com/Gonzaacdz" target="_blank"><i class=" fab fa-twitter"></i> </a>
<a href="https://www.instagram.com/gx.neee/?hl=es" target="_blank"><i class=" fab fa-instagram"></i> </a>
</div>
</div>
<ul class="footer-right">
<li>
<h2>Paginas en las que tenemos soporte</h2>
<ul class="box">
<li><a href="sup.html"> Supreme </a></li>
<li><a href="#"> Palace </a></li>
</ul>
</li>
<li>
<h2>Otras secciones</h2>
<ul class="box">
<li><a href="histo.html"> Historia </a></li>
<li><a href="#"> Inscribete </a></li>
</ul>
</li>
<li>
<h2>Direccion</h2>
<ul class="box">
<li> </li>
<li> Piso 1º Puerta B </li>
<li> Madrid, ES, 28021 </li>
</ul>
</li>
</ul>
<div class="footer-bottom">
<p>Todos los derechos reservados a ©Gonzalo Canteli 2020 </p>
</div>
</footer>
<a class="btninicio" href="#"> <i class=" fas fa-angle-double-up"></i> </a>
<div class="cookie-container">
<p>Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. <a href="#">Política de cookies. </a></p>
<button class="cookie-btn">
De acuerdo
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="cookieplugin.js"></script>
<script src="lightbox-plus-jquery.min.js"></script>
<script src="lightbox.min.js"></script>
<script type ="text/javascript" src="contact.js"></script>
<script type="text/javascript">
document.getElementById("boton").onclick=clear;
function clear(){
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
</body>
</html>