marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 22

Browse Source
This commit is contained in:
Marcos Lopez 2024-01-08 13:49:28 +01:00
parent 5ceebea03a
commit 11c4ccddc5
31 changed files with 342 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
Practicas/Practicas HTML/Repaso 2/css/style.css Normal file
View File

@ -0,0 +1,217 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
html {
scroll-behavior: smooth;
}
body {
background-image: url("../imagenes/fondo-vert.jpg");
background-size: cover;
}
#main_header {
width: 100%;
height: 120px;
background-image: url("../imagenes/teclado.jpg");
display: flex;
justify-content: space-between;
align-items: flex-end;
position: sticky;
top: 0;
background-color: gray;
padding: 10px;
margin-bottom: 0.5em;
box-sizing: border-box;
box-shadow: 2px 2px 3px;
}
#main_header > img {
height: 100px;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
margin: 0 5px;
color: white;
cursor: pointer;
}
.menu li a {
color: white;
text-decoration: underline;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}
#inicio,
#equipo {
scroll-margin-top: 150px;
}
main {
background-color: rgba(0, 0, 0, 0.2);
width: 70%;
margin: auto;
padding: 2em;
color: white;
margin-top: 3em;
box-sizing: border-box;
text-align: center;
}
h1 {
font-size: 4em;
font-style: italic;
font-weight: lighter;
text-shadow: 1px 1px 2px black;
}
h2 {
font-size: 2em;
font-style: italic;
font-weight: lighter;
text-shadow: 1px 1px 2px black;
}
section {
margin-top: 2em;
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
text-shadow: 1px 1px 1px black;
}
section p {
text-align: left;
}
.equipo-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2em;
}
.card {
max-width: 320px;
padding: 0.5em;
border: 3px solid rgb(21, 92, 190);
color: rgb(21, 92, 190);
}
.card > img {
margin-top: 1em;
width: 80%;
}
.card-details {
display: flex;
align-items: center;
gap: 0.2em;
background-color: rgba(0, 0, 0, 0.3);
}
.card-details img {
width: 38px;
}
.card-details p {
color: white;
font-size: 0.9em;
}
.card-details span {
color: rgb(21, 92, 190);
font-weight: bold;
}
footer {
width: 70%;
margin: auto;
background-image: url("../imagenes/teclado.jpg");
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
padding: 1em;
box-sizing: border-box;
}
footer img {
width: 80%;
max-width: 200px;
}
footer p {
color: rgb(177, 152, 28);
margin-top: 1em;
}
.redes {
width: 100%;
display: flex;
justify-content: space-around;
}
.redes img {
width: 48px;
height: 48px;
}
.form_container {
padding: 0.5em;
box-sizing: border-box;
display: flex;
gap: 0.4em;
flex-direction: column;
width: 100%;
border: 3px solid blue;
}
.form_container .subform {
padding: 0.5em;
border: 3px solid blue;
}
/* Definiciones para el boton de subir pagina*/
#subircaja {
position: fixed;
right: 10px;
bottom: 10px;
}
#subirimg {
width: 64px;
height: 64px;
}
/*********************************************/
@media (max-width: 650px) {
.menu {
text-align: left;
}
.menu li {
list-style-type: square;
clear: left;
}
.menu a {
font-size: 1em;
}
main {
width: 90%;
}
.card {
width: 230px;
}
footer {
width: 90%;
}
}

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/desarrollo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/diseño1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/diseño2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/diseño3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/efectos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 821 B

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/fondo-vert.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/fondo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 880 B

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/icono_area.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/icono_arquitecto.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/icono_calendario.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/icono_fotografos.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/marketing1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/marketing2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/marketing3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/people1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/people2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/people3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/programacion1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/programacion2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/programacion3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/responsive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 B

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/subir.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/subir1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/teclado.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Practicas/Practicas HTML/Repaso 2/imagenes/youtube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

125
Practicas/Practicas HTML/Repaso 2/index.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repaso 2</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="main_header">
<img src="./imagenes/logo.png" alt="logotipo">
<nav>
<ul class="menu">
<li> <a href="#inicio">Inicio</a></li>
<li> <a href="#equipo">Equipo</a></li>
<li> <a href="#servicio">Servicio</a></li>
<li> <a href="#trabajos">Trabajos</a></li>
<li> <a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="inicio">
<H1>AlexCG Design</H1>
<h2>Agencia de desarrollo web</h2>
<img src="./imagenes/desarrollo.jpg" width="90%" alt="Imagen de desarrollo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tenetur illo id magnam ea inventore
recusandae ad facilis nisi quas, optio possimus similique, saepe dolor aliquid, eligendi quidem
obcaecati. Libero.</p>
</section>
<section id="equipo">
<h2>Equipo</h2>
<div class="equipo-content">
<div class="card">
<p>Mary Salert</p>
<img src="./imagenes/people1.jpg" alt="avatar mary">
<div class="card-details">
<img src="./imagenes/icono_arquitecto.jpg" alt="">
<p><span>Ocupacion:</span> Diseñadora Web</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_area.jpg" alt="">
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_calendario.jpg" alt="">
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
</div>
</div>
<div class="card">
<p>Mary Salert</p>
<img src="./imagenes/people2.jpg" alt="avatar mary">
<div class="card-details">
<img src="./imagenes/icono_arquitecto.jpg" alt="">
<p><span>Ocupacion:</span> Diseñadora Web</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_area.jpg" alt="">
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_calendario.jpg" alt="">
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
</div>
</div>
<div class="card">
<p>Mary Salert</p>
<img src="./imagenes/people3.jpg" alt="avatar mary">
<div class="card-details">
<img src="./imagenes/icono_arquitecto.jpg" alt="">
<p><span>Ocupacion:</span> Diseñadora Web</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_area.jpg" alt="">
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
</div>
<div class="card-details">
<img src="./imagenes/icono_calendario.jpg" alt="">
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
</div>
</div>
</div>
</section>
<section id="contacto">
<h2>Contacta con nosotros</h2>
<form class="form_container" action="./gracias.html" method="get">
<fieldset>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" required>
</fieldset>
<div class="subform">
</div>
</form>
</section>
</main>
<footer>
<img src="./imagenes/logo.png" alt="logo">
<div class="redes">
<a href=""><img src="./imagenes/twitter.png" alt="logo twitter"></a>
<a href=""><img src="./imagenes/facebook.png" alt="logo facebook"></a>
<a href=""><img src="./imagenes/youtube.png" alt="logo youtube"></a>
</div>
<p>La pasion e innovacion es lo que nos distingue del resto</p>
</footer>
<div id="subircaja">
<a href="#inicio">
<img id="subirimg" src="./imagenes/subir.png" alt="icono subir">
</a>
</div>
</body>
</html>