search

santy8151 / Ejercicios-de-programaci-n-

Ejercicios
0 stars 0 forks source link

Pagina web con html5 y css #4

Open santy8151 opened 1 year ago

santy8151 commented 1 year ago

Primera pagina web con html y css

santy8151 commented 1 year ago 

[]([[](###](url) ///Primera página
<style>
</style>
<! Doctype>
<html>
<head>
<title>Aprende Python con HTML</title>
</head>
<body>
<nav>
<h1>HELLO PYTHON</h1>
<section>
<h1>Para aprender Python primero entiende estos temas</h1>
<div>
<li>
<ul>Como pedir un dato</ul>
<ul>Simbología de Python</ul>
<ul>Como definir una variable</ul>
<ul>Bucles</ul>
<ul>Razonamiento de verda o falso</ul>
</li>
</section>
<section1>
<h2>Como descargar python</h2>
<a herf="">
<div><p>Descargar python aqui</p></div>
<buttom></buttom>
</section>
<<iframe width="560" height="315" src="https://www.youtube.com/embed/IimBRwHhW54" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div class="videos1><h4>Mira videos de este youtuber es excelente para python</h4></div>)/
```/)/
santy8151 commented 1 month ago

CSS

santy8151 commented 1 month ago

CSS / Variables de color / :root { --primary-color: #1e3a8a; / Azul oscuro / --secondary-color: #dc2626; / Rojo / --background-color: #f3f4f6; / Gris claro / --text-color: #111827; / Gris muy oscuro / --button-color: #1e40af; / Azul más claro / --button-hover-color: #991b1b; / Rojo oscuro / }

/ Reset de estilos /

/ Estilos generales / body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; }

/ Contenedor principal / .container { width: 80%; margin: 0 auto; padding: 20px; }

/ Cabecera / header { background-color: var(--primary-color); color: #fff; padding: 20px 0; text-align: center; }

header h1 { margin-bottom: 10px; }

header nav a { color: #fff; margin: 0 10px; text-decoration: none; font-weight: bold; }

header nav a:hover { text-decoration: underline; }

/ Sección principal / .main { margin: 20px 0; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.main h2 { margin-bottom: 10px; color: var(--primary-color); }

.main p { margin-bottom: 10px; }

/ Botones / button { background-color: var(--button-color); color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }

button:hover { background-color: var(--button-hover-color); }

/ Pie de página / footer { background-color: var(--primary-color); color: #fff; padding: 20px 0; text-align: center; margin-top: 20px; }

footer p { margin: 0; }

santy8151 commented 1 month ago

<!DOCTYPE html>

Mi Página Inspirada en Starbucks

Mi Página Web

Bienvenido a Mi Página Web

Este es un ejemplo de cómo podría estructurar y diseñar una página web con una paleta de colores azul y rojo.

santy8151 commented 1 month ago

Css botones interactivos y campos de textos con requerimientos / Variables de color / :root { --primary-color: #1e3a8a; / Azul oscuro / --secondary-color: #dc2626; / Rojo / --background-color: #f3f4f6; / Gris claro / --text-color: #111827; / Gris muy oscuro / --button-color: #1e40af; / Azul más claro / --button-hover-color: #991b1b; / Rojo oscuro / --error-color: #b91c1c; / Rojo para errores / --success-color: #15803d; / Verde para éxito / }

/ Reset de estilos /

/ Estilos generales / body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; }

/ Contenedor principal / .container { width: 80%; margin: 0 auto; padding: 20px; }

/ Botones / button { background-color: var(--button-color); color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; }

button:hover { background-color: var(--button-hover-color); }

button:active { transform: scale(0.98); }

/ Campos de texto / input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; margin: 10px 0 20px 0; border: 1px solid #ccc; border-radius: 4px; transition: border-color 0.3s ease; }

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: var(--primary-color); outline: none; }

/ Mensajes de error / .error { color: var(--error-color); font-size: 0.875rem; margin-top: -15px; margin-bottom: 20px; }

/ Mensajes de éxito / .success { color: var(--success-color); font-size: 0.875rem; margin-top: -15px; margin-bottom: 20px; }

santy8151 commented 1 month ago

<!DOCTYPE html>

Formulario Interactivo

Registro

santy8151 commented 1 month ago

"""<!DOCTYPE html>

Formulario Interactivo

Registro

"""