Scribd
Upload
60 views13 pages

Saul Guerrero 20122377 HTML y CSS

This document contains HTML and CSS code for a website about a cloud computing company called GC Cloud. The HTML code includes sections for the header, navigation menu, hero carousel, about us, services, contact form, and footer sections. The CSS code styles some elements like the footer and content divisions.

Uploaded by

Alexandra Correa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
60 views13 pages

Saul Guerrero 20122377 HTML y CSS

This document contains HTML and CSS code for a website about a cloud computing company called GC Cloud. The HTML code includes sections for the header, navigation menu, hero carousel, about us, services, contact form, and footer sections. The CSS code styles some elements like the footer and content divisions.

Uploaded by

Alexandra Correa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Republica Bolivariana de Venezuela

Universidad Alonso Ojeda


Convenio Enlace Latinoamericano de
Universidades- IESIP
Vicerrectorado Academico
Facultad de Ingenieria

Pagina HTML y CSS

Saúl Guerrero
20.122.377

San Cristóbal, febrero de 2023


HTML Original
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>GC Cloud</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6
j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
[email protected]/font/bootstrap-icons.css">
<style type="text/css">
.footer{
background-color: #000;
color: #fff;

}
.division-seccion {
margin: 5rem 0;
}
</style>
</head>
<body>
<header class="d-flex flex-wrap justify-content-center py-3 mb-4
border-bottom" id="inicio">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4"><i class="bi bi-cloud" style="color:
#0087FFFF;"></i> GC Cloud</span>
</a>

<ul class="nav nav-pills">


<li class="nav-item"><a href="#inicio" class="nav-link active" aria-
current="page">Inicio</a></li>
<li class="nav-item"><a href="#quienes-somos" class="nav-
link">Quienes somos</a></li>
<li class="nav-item"><a href="#servicios" class="nav-
link">Nuestros servicios</a></li>
<li class="nav-item"><a href="#contacto" class="nav-
link">Contacto</a></li>
</ul>
</header>
<div id="myCarousel" class="carousel slide" data-bs-
ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-
bs-slide-to="0" class="active" aria-current="true" aria-label="Slide
1"></button>
<button type="button" data-bs-target="#myCarousel" data-
bs-slide-to="1" aria-label="Slide 2" class=""></button>
<button type="button" data-bs-target="#myCarousel" data-
bs-slide-to="2" aria-label="Slide 3" class=""></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active carousel-item-next
carousel-item-start">

<img src="https://www.datos101.com/wp-
content/uploads/2019/11/reducida-backup-1200x480.jpg" class="bd-
placeholder-img" width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<div class="container">
<div class="carousel-caption">
<h1>Protege tu información.</h1>
<p>Servicios de seguridad y backup.</p>
<p><a class="btn btn-lg btn-primary"
href="#contacto">Lo quiero</a></p>
</div>
</div>
</div>
<div class="carousel-item carousel-item-start">
<img src="https://www.redeszone.net/app/uploads-
redeszone.net/2019/04/Foto-centro-servidores.jpg" class="bd-placeholder-
img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-
hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
<div class="container">
<div class="carousel-caption text-start">
<h1>GC Cloud</h1>
<p>Servicios Tecnologicos.</p>
<p><a class="btn btn-lg btn-primary"
href="#contacto">Contrata Hoy</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://concepto.de/wp-
content/uploads/2019/04/codigo-fuente-e1554759455373.jpg" class="bd-
placeholder-img" width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<div class="container">
<div class="carousel-caption text-end">
<h1>Inicia tu proyecto.</h1>
<p>Desarrollo y asesoria de proyectos.</p>
<p><a class="btn btn-lg btn-primary"
href="#contacto">Mas información</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
<div class="container">
<hr class="division-seccion">
<div class="row featurette" id="quienes-somos">
<div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-
1">Quienes somos</h2>
<p class="lead">
Somos un equipo de profesionales con mas de 10
años de experiencia en el área de tecnología, tenemos todos lo que
necesitas para llevar tu empres al siguiente nivel, te asesoramos en tus
proyectos planteamos soluciones, prestamos servicios cloud de hosting
dominio y desarrollo, tenemos altos sistemas de calidad y seguridad vamos a
la vanguardia con las nuevas tecnologías, por que no solo pensamos en ti
también pensamos en tus clientes.
</p>
</div>
<div class="col-md-5">
<img
src="https://blog.interfell.com/hubfs/como%20crear%20un%20equipo%20de
%20trabajo%20fuerte%20y%20estable.jpg" width="500" height="500" >
</div>
</div>
<hr class="division-seccion">
<div class="row" align="center" id="servicios">
<div class="col-lg-4">
<img src="https://img.freepik.com/vector-
gratis/almacenamiento-informacion-nube-computacion-nube-colocada-
sincronizacion-armonizacion-datos-disponible-accesible-digital-copia-
seguridad-conectada-ilustracion-metafora-concepto-aislado-vector_335657-
2791.jpg?w=740&t=st=1676255750~exp=1676256350~hmac=72fbef68e86aa
4fadc3fee7eed9b4ae8196ee5daf9f20b2a87b8d009bda12565" class="bd-
placeholder-img rounded-circle" width="180" height="180">
<h2 class="fw-normal">Dominios y hosting</h2>
<p>Necesitas donde alojar tu web quieres presencia
en el mundo digital, cotiza nuestros planes de hospedaje.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="https://definicion.de/wp-
content/uploads/2009/05/codigo-fuente.jpg" class="bd-placeholder-img
rounded-circle" width="180" height="180">
<h2 class="fw-normal">Desarrollos y
proyectos</h2>
<p>Tienes un proyecto una idea pero no sabes
como comenzar deseas un sistema para tu empresa, nosotros te lo
desarrollamos conforme a tus necesidades.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="https://www.muycomputer.com/wp-
content/uploads/2021/03/D%C3%ADa_Mundial_del_Backup-1000x600.jpg"
class="bd-placeholder-img rounded-circle" width="180" height="180">
<h2 class="fw-normal">Seguridad y Backup</h2>
<p>Cansado de perder información, de no
conseguir tus archivos de perder tus datos por falta de seguridad, cotiza con
nosotros nuestros protocolos de seguridad y backup de acorde a tus
necesidades.</p>
</div><!-- /.col-lg-4 -->
</div>
<hr class="division-seccion">
<iframe jsname="L5Fo6c" id="contacto" class="YMEQtf
DnR2hf" sandbox="allow-scripts allow-popups allow-forms allow-same-origin
allow-popups-to-escape-sandbox allow-downloads allow-modals"
frameborder="0" aria-label="Google Forms, Formulario sin título"
src="https://docs.google.com/forms/d/e/1FAIpQLSc-
X_OgBmm2eTm5ktE1RZurMpITVXx-
Rn7MfhvnevHXJ9_liw/viewform?embedded=true" style="height: 901px; width:
100%; " allowfullscreen=""></iframe>

</div>
<hr class="division-seccion">
<footer class="container">
<p class="float-end"><a href="#">Volver arriba</a></p>
<p>© Gc Cloud 2022 Todos los derechos reservados · <a
href="#">Terminos y condiciones</a></p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTk
F7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Código CSS
.footer{
background-color: #000;
color: #fff;
}
.division-seccion {
margin: 5rem 0;
}
body{
background-color: #CCE8FEFF;

}
.estilo-logo{
font-size: 34px !important;
}
header{
background-color: #025390FF;

}
header .estilo-logo{
color: white;
}
.menu-principal li a{
color: white;
}
.menu-principal li a: hover{
color: #025390FF;
}
.nav-link:hover {
background-color: white !important;
}
footer{
background-color: #025390FF;
color: white;
padding: 2rem;
}
Maquetación terminada

You might also like