No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Integraci贸n de PHP con HTML

Curso de Integraci贸n de PHP con HTML

Carlos Eduardo G贸mez Garc铆a

Carlos Eduardo G贸mez Garc铆a

Creando el maquetado

20/24
Recursos

Aportes 6

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Este es el maquetado que hice usando tailwind.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Formulario de contacto</title>
	<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="grid place-content-center min-h-screen bg-slate-900">
		<div class="max-w-md mx-auto px-4 py-4">
			<form action="#">
				<h1 class="text-xl text-center text-white">Contactanos</h1>
				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-500 outline-none focus:border-gray-400"
					placeholder="Nombre" type="text" name="name" id="name">

				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
					placeholder="Correo" type="email" name="email" id="email">

				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
					placeholder="Asunto" type="text" name="subject" id="subject">

				<textarea class="w-full h-32 px-4 py-3 my-3 border-b-2 border-gray-400 rounded-sm outline-none focus:border-gray-400" name="message" 	placeholder="Mensaje"></textarea>

				<div class="w-full flex justify-center">
					<button class="rounded bg-cyan-500 px-4 py-2 font-semibold w-40" type="submit">Enviar</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

Si son de los que no le saben mucho al frontend (como yo), pueden apoyarse en herramientas como bootstarp para crear peque帽os formularios y realizar estos proyectos.
Aunque nunca esta de mas tomar el curso definitivo de html y css de platzi.

Este es mi aporte en HTML y CSS.

HTML

<!-- //index -->

<!DOCTYPE html>
<html lang="en">
<head>
    <?php
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
    ?>
    <meta http-equiv="Expires" content="0"> 
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Styles -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="style.css">

    <title>Php con HTML</title>
</head>
<body>
<div class="container">
    <div class="tittle"> <strong> Registro de cliente </strong></div>
    <form action="#">
        <div class="user-details">
            <div class="input-box">
                <span class="details"> Nombre</span>
                <input type="text" placeholder="Ingresa tu nombre" required>
            </div>
            <div class="input-box">
                <span class="details"> Telefono</span>
                <input type="number" placeholder="Ingresa tu Telefono" required>
            </div>
            <div class="input-box">
                <span class="details"> Correo electronico</span>
                <input type="text" placeholder="Ingresa tu telefono" required>
            </div>
          
        <div class="gender-details">
            <input type="radio" name="gender" id="dot-1">
            <input type="radio" name="gender" id="dot-2">
            <input type="radio" name="gender" id="dot-3">
           
            <span class="gender-title">Arreglo</span>
            <div class="category">
                <label for="dot-1">
                    <span class="dot one"></span>
                    <span class="gender">Pantalon</span>
                </label>
                <label for="dot-2">
                    <span class="dot two"></span>
                    <span class="gender">Chaqueta</span>
                </label>
                <label for="dot-3">
                    <span class="dot three"></span>
                    <span class="gender">Otro</span>
                </label>
            </div>
        </div>
        <div class="input-box">
                <span class="details"> Arreglo</span>
                <input class="arreglo" type="text" placeholder="Descripcion de la modificacion de la prenda" required>
            </div>
            <div class="input-box">
                <span class="details">Fecha</span>
                <input type="date" placeholder="Ingresa tu nombre" required>
            </div>
        </div>
        <div class="button">
            <input type="submit" value="Register">
        </div>
    </form>
</div>

</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing:boder-box;
    font-family: 'Popins',sans-serif;
    }
    body{
        display: flex;
        height: 100vh;
    justify-content: center;
    align-items: center;
    background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);







    }
    .container{
        max-width: 700px;
        width: 100%;
        background: #ffff;
        padding: 25px 30px;
        border-radius: 5px;

    }
    .container .title {
        font-size: 25px;
        font-weight: 500;
        position: relative;

    }
    .container .title::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height:  3px;
        width: 30px;
        background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);



    }
    .container form .user-details{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0 12px 0;

    }

    form .user-details .input-box{
        margin-bottom: 15px;
        width:calc(100% / 2 - 20px);
    }
    .user-details .input-box .details{
        display: block;
        font-weight: 500;
        margin-bottom: 5px;
    }
    .user-details .input-box input{
        height: 45px;
        width: 100%;
        outline: none;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding-left: 15px;
        font-size: 16px;
        border-bottom-width: 2px;
        transition: all 0.3s ease;

    }
    .user-details .input-box input:focus,
    .user-details .input-box input:focus{
        border-color: black;
    }
   

    form .gender-details .gender-title{
        font-size: 15px;
        font-weight: 500;
    }
    form .gender-details .category{
        display: flex;
        width: 80%;
        margin: 14px 0;
        justify-content: space-between;
    }
    .gender-details .category label{
        display: flex;
        align-items: center;

    }
    
    .gender-details .category .dot{
        height: 18px;
        width: 18px;
        background: #d9d9d9;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        border:5px solid transparent ;
        transition: all 0.3s ease;

    }
    #dot-1:checked ~ .category label .one,
    #dot-2:checked ~ .category label .two,
    #dot-3:checked ~ .category label .three{
        border-color: #37f278;
        background: #68ef65;

    }
    form input [type="radio"]{
        display: none;
    }
    
    form .button{
        height: 45px;
        margin: 45px 0;

    }
    form .button input{
        height: 100%;
        width: 100%;
        outline: none;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        border-radius: 5px;
        letter-spacing: 1px;
        background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);

    }

    form .button input:hover{
        background: #F24C4C;
    } 
    @media (max-width: 584px){
        .container{
            max-width: 100%;
        }
        form .user-details .input-box{
            margin-bottom: 15px;
            width:100%;
        }
        form .gender-details .category{
           
            width: 100%;}
        .container form .user-details{
            max-height: 300px;
            overflow-y: scroll;
        }
        .user-details::-webkit-scrollbar{
            width: 0;
        }
    }

Les dejo mi aporte

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">
    <title>Formulario con PHPmailer</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>

    <center>
    <h1>
        Envia un correo electronico aqu铆
    </h1>
    </center>
    <form class="form-style-4" action="" method="post">

                <label for="field1">
                <span>Tu nombre</span><input type="text" name="field1" required="true" />
                </label>

                <label for="field2">
                <span>Correo electronico</span><input type="email" name="field2" required="true" />
                </label>

                <label for="field3">
                <span>Tema de platica</span><input type="text" name="field3" required="true" />
                </label>

                <label for="field4">
                <span>Contenido del mensaje</span><textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea>
                </label>

                <label>
                <span> </span><input type="submit" value="Enviar el correo" />
                </label>
    </form>
</body>
</html>

CSS


@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

h1
{
    font-family: 'Lato', sans-serif;
   padding-top: 5rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #1C819E;
}
body
{
    background-color: #FFD6FF;
}
form
{
    margin: 2rem auto;
    border-radius: 5%;
}

.form-style-4{
	width: 450px;
	font-size: 16px;
	background: #845EC2;
	padding: 30px 30px 15px 30px;
	border: 5px solid #B39CD0;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #fff;

}
.form-style-4 label {
	display:block;
	margin-bottom: 10px;
}
.form-style-4 label > span{
	display: inline-block;
	float: left;
	width: 150px;
}
.form-style-4 input[type=text],
.form-style-4 input[type=email] 
{
	background: transparent;
	border: none;
	border-bottom: 1px dashed #83A4C5;
	width: 275px;
	outline: none;
	padding: 0px 0px 0px 0px;
	font-style: italic;
}
.form-style-4 textarea{
	font-style: italic;
	padding: 0px 0px 0px 0px;
	background: transparent;
	outline: none;
	border: none;
	border-bottom: 1px dashed #83A4C5;
	width: 275px;
	overflow: hidden;
	resize:none;
	height:20px;
}

.form-style-4 textarea:focus, 
.form-style-4 input[type=text]:focus,
.form-style-4 input[type=email]:focus,
.form-style-4 input[type=email] :focus
{
	border-bottom: 1px dashed #D9FFA9;
}

.form-style-4 input[type=submit],
.form-style-4 input[type=button]{
	background: #FBEAFF;
	border: none;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	color: #845EC2;
}
.form-style-4 input[type=submit]:hover,
.form-style-4 input[type=button]:hover{
background: #394D61;
}

Lo 煤nico que tienen que hacer es copiar y pegar, aqu铆 mi aporte

Ya quedo mi formulario 馃槏
Se los comparto por si a alguno le sirve como gu铆a
.
Resultado

.
HTML

<!DOCTYPE html>
<html lang="es">
<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="shortcut icon" href="./assets/img/contacto.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/styles.css">
  <title>iJCode - Formulario de Contacto</title>
</head>
<body>
  <!-- Creaci贸n de la estructura del Formulario -->
  <div class="form-container">
    <div class="container">
      <form action="#" class="form">
        <div class="form-header">
          <h2 class="form-title">隆Contactanos 鉁!</h2>
        </div>
        <div class="form-body">
          <label class="form-label" for="name">Nombre: </label>
          <input class="form-input" type="text" required name="name" id="name" placeholder="Julieta Ortiz Sanchez">

          <label class="form-label" for="email">Correo: </label>
          <input class="form-input" type="text" required name="email" id="email" placeholder="[email protected]">

          <label class="form-label" for="subject">Asunto: </label>
          <input class="form-input" type="text" required name="subject" id="subject" placeholder="Solicitud de documentaci贸n final">

          <label class="form-label" for="message">Mensaje: </label>
          <textarea class="form-area" name="message" id="message" placeholder="Me urge obtener la documentaci贸n del proyecto de la papeler铆a debido a que ya estoy en fecha l铆mite para entregarlos al 谩rea correspondiente"></textarea>

          <button class="form-cta">Enviar</button>
        </div>
      </form>
      <div class="form-footer">
        <p class="form-paragraph"><i class="fa-solid fa-location-dot"></i> 13 Saw Mill Circle, North Olmested.</p>
        <p class="form-paragraph"><i class="fa-solid fa-phone"></i> +1 123 456 7890</p>
      </div>
    </div>
  </div>

  <!-- Mensaje de error -->
  <div class="message">
    <div class="container">
      <div class="message-error">
        <p class="message-paragraph">Surgi贸 un problema</p>
      </div>
    </div>
  </div>

  <!-- Mensaje de 茅xito -->
  <div class="message">
    <div class="container">
      <div class="message-success">
        <p class="message-paragraph">隆Mensaje enviado con 茅xito!</p>
      </div>
    </div>
  </div>

  <script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap');
:root{
  --mainColor: #1B2430;
  --white: #F9F2ED;
  --mainFont: 'Lato', sans-serif;
  --cardBackground: #816797;
  --cta: #371B58;
  --red: #F87474;
  --green: #9EB23B;
}

body{
  margin: 0;
  block-size: 100%;
  min-block-size: 100vh;
  font-family: var(--mainFont);
  background-color: var(--mainColor);
  padding: 2rem 0;
}

.form-container{
  color: #F9F2ED;
  border-block-start: .1px solid transparent;
}

.form{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.container{
  inline-size: 90%;
  max-inline-size: 43.75rem;
  margin: 0 auto;
  border-radius: .5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.form{
  background-color: var(--cardBackground);
  padding: 2rem 1.5rem;
  position: relative;
}

.form::before{
  content: '';
  position: absolute;
  background-color: var(--white);
  block-size: 1rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.form-header{
  margin-block-end: 2rem;
}

.form-title{
  margin: 0;
  text-align: center;
  font-size: 2.2rem;
}

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

.form-label{
  font-weight: 700;
  margin-block-end: .25rem;
}

.form-input,
.form-area{
  font-family: var(--mainFont);
  margin-block-end: 2rem;
  padding: .625rem;
  border-radius: .25rem;
  border: none;
  outline: none;
  font-size: 1rem;
}

.form-area{
  inline-size: auto;
  block-size: 6rem;
  resize: none;
}

.form-cta{
  background-color: var(--cta);
  border: none;
  color: var(--white);
  padding: 1rem 0;
  border-radius: .25rem;
  font-weight: 700;
  transition: transform .2s;
  border: none;
  text-transform: uppercase;
}

.form-cta:active{
  transform: scale(.9);
}

.form-cta:hover{
  --cta: #371b58a3;
}

.form-footer{
  border-block-start: 0.1px solid transparent;
  background-color: var(--white);
  color: var(--mainColor);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.form-paragraph{
  margin: 0;
  font-weight: 700;
}

.fa-solid{
  color: var(--cardBackground);
}

.message-error,
.message-success{
  padding: 2rem;
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0; 
  border-radius: .25rem;
}

.message-error{
  background-color: var(--red);
}

.message-success{
  background-color: var(--green);
}

.message-paragraph{
  margin: 0;
}

@media screen and (min-width: 768px){
  .form-title{
    font-size: 3rem;
  }

  .form-cta{
    font-size: 1rem;
  }

  .form-footer{
    flex-direction: row;
    justify-content: space-between;
  }

  .form-paragraph{
    font-size: 1.2rem;
  }
}

Este es mi maquetado hecho con HTML y CSS.