Creando el maquetado

Curso de PHP: Integración con HTML

Contenido del curso

Introducción

¿Cómo combinar HTML con PHP?

Manejo de formularios

Proyecto: formulario de contacto

Conclusión

24
Es tu turno de poner todo en práctica
01:50 min

Tomar examen

Creando el maquetado

Michael Cardenas

Estudiante

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/bootstrap@5.2.0-beta1/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;
        }
    }

Creando el maquetado

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica