Scribd
Cargar
6 vistas9 páginas

html y Css

El documento describe una página web dedicada a ofrecer cursos en línea con una promoción del 50% de descuento. Incluye secciones sobre los cursos disponibles, un video promocional, información sobre la empresa y un formulario de contacto. También se presentan enlaces a políticas y términos relevantes.

Cargado por

alison herrera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
6 vistas9 páginas

html y Css

El documento describe una página web dedicada a ofrecer cursos en línea con una promoción del 50% de descuento. Incluye secciones sobre los cursos disponibles, un video promocional, información sobre la empresa y un formulario de contacto. También se presentan enlaces a políticas y términos relevantes.

Cargado por

alison herrera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

<!

DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Nuestros Cursos | [Cusera]</title>

<meta name="description" content="Descubre nuestra variedad de cursos en


línea y comienza a aprender hoy mismo.">

<meta name="keywords" content="cursos online, aprendizaje en línea,


educación, [palabra clave 1], [palabra clave 2]">

<link rel="stylesheet" href="css/styles.css">


<link rel="icon" href="img/favicon.ico" type="image/x-icon">

</head>

<body>

<header>

<nav>
<a href="/" aria-label="Ir a la página de inicio">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSc5YTPft1nFULS5fOIKZenEZUHlYV-
29d5Fw&s.png" alt="Logo de [Cursera]">

</a>
<ul>

<li><a href="index.html" aria-current="page">Inicio</a></li>

<li><a href="cursos.html">Cursos</a></li>

<li><a href="quienes-somos.html">Quiénes Somos</a></li>

<li><a href="contacto.html">Contacto</a></li>

</ul>

<div class="redes-sociales">

<a href="#" target="_blank" rel="noopener noreferrer" aria-


label="Síguenos en Facebook">Facebook</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-
label="Síguenos en Twitter">Twitter</a>

</div>

</nav>

</header>

<main>

<section id="hero">

<h1>Compra tu curso con el 50% de descuento</h1>

<p>Texto descriptivo de la promoción.</p>

<input type="text" placeholder="Tu correo electrónico">

<button type="button">Comprar ahora</button>

<div class="hero-image">

<img
src= "https://d3njjcbhbojbot.cloudfront.net/api/utilitie…8d46a2b167695c43.png?
auto=format%2Ccompress&dpr=11.jpg" alt="Aprendisajes">

</div>

</section>

<section id="our-courses">

<h2>Nuestros Cursos</h2>

<div class="course-grid">

<article class="course-card">

<img
src="https://d3njjcbhbojbot.cloudfront.net/api/utilitie…8d46a2b167695c43.png?a
uto=format%2Ccompress&dpr.jpg" alt="Mejores universidades">

<h3>Aprende de más de 350 de las mejores universidades

</h3>

<p>Descripción del curso.</p>


<a href="curso-detalle-1.html" class="button">Comprar</a>
</article>

<article class="course-card">

<img
src="https://d3njjcbhbojbot.cloudfront.net/api/utilitie…8d46a2b167695c43.png?a
uto=format%2Ccompress&dpr=1jpg" alt="Heramientas de Google">

<h3>Programación profesional simplificada</h3>

<p>Descripción del curso.</p>

<a href="curso-detalle-2.html" class="button">Comprar</a>

</article>

<article class="course-card">

<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…ZmGQAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/9k=.jpg" alt="Visual
studio code">
<h3>Guia para las heramientas visual </h3>

<p>Descripción del curso.</p>

<a href="curso-detalle-3.html" class="button">Comprar</a>

</article>

</div>

</section>

<section id="promotional-video">

<h2>Video Promocional</h2>

<video src="https://youtu.be/T0bBPeofm7M?t=60.mp4" controls


poster="img/video-poster.jpg">

Tu navegador no soporta el elemento de video.

</video>
</section>
<section id="about-us">

<h2>Quiénes Somos</h2>

<p>Somos una empresa que ayuda a jovenes a usar heramientas


tecnologicas paso apaso .</p>

<p>Somos la primera paguina del mundo .</p>


</section>

<section id="contact">

<h2>Contacto</h2>

<form action="#" method="post">

<label for="name">Nombre:</label>

<input type="text" id="name" name="name" required>

<label for="email">Correo Electrónico:</label>

<input type="email" id="email" name="email" required>

<label for="message">Mensaje:</label>

<textarea id="message" name="message" rows="5"


required></textarea>

<button type="submit">Enviar</button>
</form>

</section>

</main>

<footer>

<nav>

<ul>
<li><a href="terminos-condiciones.html">Términos y
Condiciones</a></li>

<li><a href="politica-privacidad.html">Política de Privacidad</a></li>

</ul>

</nav>

<p>&copy; 2025 [Nombre de tu Plataforma]. Todos los derechos


reservados.</p>

</footer>

</body>

</html>

CSS
body {

font-family: sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

color: #333;

header {

background-color: #333;

color: white;
padding: 1em 0;

nav {

display: flex;

justify-content: space-between;
align-items: center;
padding: 0 20px;

nav ul {

list-style: none;

padding: 0;

margin: 0;

display: flex;

nav li {
margin-left: 20px;

nav a {

color: white;

text-decoration: none;

main {

padding: 20px;

#hero {

background-color: #eee;

padding: 2em;
text-align: center;

}
.course-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 20px;

margin-top: 20px;

.course-card {

background-color: white;

border: 1px solid #ddd;

padding: 15px;
border-radius: 5px;

.course-card img {

max-width: 100%;

height: auto;

display: block;

margin-bottom: 10px;

.button {

display: inline-block;

background-color: #0C356A;

color: rgb(213, 255, 208);

padding: 10px 15px;


text-decoration: none;

border-radius: 5px;
margin-top: 10px;
}

footer {

background-color:#279EFF;

color: rgb rgb(64, 248, 255);

text-align: center;

padding: 1em 0;

position: sticky;

bottom: 0;

width: 100%;

También podría gustarte