| const { src, dest, watch , parallel } = require('gulp'); | |
| const sass = require('gulp-sass'); | |
| const autoprefixer = require('autoprefixer'); | |
| const postcss = require('gulp-postcss') | |
| const sourcemaps = require('gulp-sourcemaps') | |
| const cssnano = require('cssnano'); | |
| const concat = require('gulp-concat'); | |
| const terser = require('gulp-terser-js'); | |
| const rename = require('gulp-rename'); | |
| const imagemin = require('gulp-imagemin'); |
| <!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"> | |
| <title>Ecommerce - Nombre Página</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
People
 :bowtie: |
😄 :smile: |
😆 :laughing: |
|---|---|---|
😊 :blush: |
😃 :smiley: |
:relaxed: |
😏 :smirk: |
😍 :heart_eyes: |
😘 :kissing_heart: |
😚 :kissing_closed_eyes: |
😳 :flushed: |
😌 :relieved: |
😆 :satisfied: |
😁 :grin: |
😉 :wink: |
😜 :stuck_out_tongue_winking_eye: |
😝 :stuck_out_tongue_closed_eyes: |
😀 :grinning: |
😗 :kissing: |
😙 :kissing_smiling_eyes: |
😛 :stuck_out_tongue: |
| <main class="container-xl py-5"> | |
| <h2 class="text-center py-5">Contacto</h2> | |
| <div class="row justify-content-center"> | |
| <form class="col-md-8 needs-validation" novalidate> | |
| <fieldset> <!-- Agrupar datos en un formulario --> | |
| <legend class="bg-primary text-center text-white fs-2">Tus Datos</legend> | |
| <div class="mb-3"> | |
| <label class="form-label" for="nombre">Nombre</label> |
| "build:sass": "purgecss --css build/css/style.css --content index.html --output build/css/meeti.css" |
| "compilar:sass": "sass --watch src/scss:build/css" |
| @use 'variables' as v; | |
| @use 'mixins' as m; | |
| html { | |
| font-size: 62.5%; | |
| box-sizing: border-box; | |
| height: 100%; | |
| } | |
| body { | |
| min-height: 100%; |
| // Fuentes | |
| $fuente_principal: 'Poppins', sans-serif; | |
| // Tamaño de Media Queries | |
| $telefono: 480px; | |
| $tablet: 768px; | |
| $desktop: 1024px; | |
| // Colores | |
| $azul: #0da6f3; |
| @use 'variables' as v; | |
| h1, h2, h3 { | |
| font-family: v.$fuente_principal; | |
| margin: 0 0 calc(v.$separacion / 2) 0 ; | |
| font-weight: 900; | |
| color: v.$blanco; | |
| text-align: center; | |
| } |
| @use 'variables' as v; | |
| /** Media Queries **/ | |
| @mixin telefono { | |
| @media (min-width: v.$telefono) { | |
| @content; | |
| } | |
| } | |
| @mixin tablet { |