Scribd
Upload
21 views12 pages

HTML Lang: !doctype HTML Head Meta Meta Link Title Title

This document is an HTML page for a company called SafeTech Ltda. that provides security services. The page includes a header with navigation links, an introductory section with the company name and mission statement, multiple sections about the company's professionals and services, an image carousel highlighting past work, and a footer with contact information. Styling is defined in an internal CSS stylesheet.

Uploaded by

Dego Ignacio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
21 views12 pages

HTML Lang: !doctype HTML Head Meta Meta Link Title Title

This document is an HTML page for a company called SafeTech Ltda. that provides security services. The page includes a header with navigation links, an introductory section with the company name and mission statement, multiple sections about the company's professionals and services, an image carousel highlighting past work, and a footer with contact information. Styling is defined in an internal CSS stylesheet.

Uploaded by

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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="~/Content/style.css">

<title>@ViewBag.Title - Safetech</title>

@RenderSection("head", required: false)

</head>

<body>

<header>

<nav class="navigation">

<a href="#inicio">Inicio</a>

<a href="#servicio">Servicio</a>

<a href="#Q&A">Q&A</a>

<a href="#contacts">Contacto</a>

<a href="#contacts1">¿Quiénes somos?</a>

</nav>

<a href="/iniciar/iniciar.html" class="boton-enlace">Iniciar sesión</a>

</header>

<div class="contenedor">

<h1>SafeTech Ltda.</h1><br>

<p>La seguridad de tus empleados es nuestra misión</p>

</div>

@RenderBody()

<div class="content-all">
<div class="content-carrousel">

<figure><img src="@Url.Content("~/Content/im/img.jpg")"></figure>

<figure><img src="@Url.Content("~/Content/im/img2.jpg")"></figure>

<figure><img src="@Url.Content("~/Content/im/img3.jpg")"></figure>

<figure><img src="@Url.Content("~/Content/im/img.jpg")"></figure>

<figure><img src=""></figure>

<figure><img src=""></figure>

<figure><img src=""></figure>

<figure><img src=""></figure>

<figure><img src="@Url.Content("~/Content/im/img4.jpg")"></figure>

<figure><img src="@Url.Content("~/Content/im/20.jpg")"></figure>

</div>

</div>

<section class="pol">

<div>

<h2>Nuestros Profesionales</h2>

</div>

</section>

<section class="nuestro">

<div class="img">

<img src="@Url.Content("~/Content/im/e.png")" alt="">

<p>

Uber's Ethics & Compliance Program Charter outlines our commitment to integrity

at the highest levels within the company. Transparency is critical to an

ethical culture; we achieve this through our Integrity Helpline and suite

of scalable and effective compliance initiatives.

</p>
</div>

<div class="poro">

<img src="@Url.Content("~/Content/im/e.png")" alt="">

<p>

It’s our goal to create a workplace that is inclusive and reflects the diversity

of the cities we serve—where everyone can be their authentic self, and where that

authenticity is celebrated as a strength. By creating an environment where people

from every background can thrive, we’ll make Uber a better company—for our employees

and our customers.

</p>

</div>

</section>

<div class="icon">

<img src="@Url.Content("~/Content/im/rede.png")" alt="aaa">

</div>

<footer>

<div class="contenedor-footer">

<div class="content-foo">

<p>Todos los derechos Reservados © : SafeTech Ltda.</p>

</div>

</div>

</footer>

</body>

</html>
estylo

*{

font-family: 'Playfair Display', serif;

font-family: 'Poppins', sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

scroll-behavior: smooth;

body {

background-image: url(fondo1.jpg);

background-repeat: no-repeat;

background-attachment: fixed;

background-size: 100% 100%;

header {

background-color: #161515;

width: 100%;

position: fixed;

z-index: 999;

display: flex;

justify-content: space-between;
align-items: center;

padding: 10px 100px;

.span {

color: rgb(199, 23, 10);

.navigation a {

color: #ced1da;

font-size: 1.2em;

text-decoration: none;

padding-left: 30px;

font-weight: 400;

.navigation a:hover {

color: rgb(233, 176, 20);

.boton-enlace {

display: inline-block;

padding: 10px 20px;

background-color: #007bff;

color: white;

text-decoration: none;

border-radius: 5px;

position: relative;
left: 80px;

.boton-enlace:hover {

background-color: #0056b3;

.contenedor {

justify-content: center;

align-items: center;

text-align: center;

padding: 150px;

/* Estilos para el título */

.contenedor h1 {

font-size: 60px;

margin: 0;

color: #007bff;

/* Estilos para el párrafo */

.contenedor p {

font-size: 19px;

margin: 1px 0 0;

}
.content-all {

width: 210px;

margin: auto;

perspective: 800px;

position: relative;

margin-top: 50px;

.content-carrousel {

width: 100%;

position: absolute;

animation: rotar 15s infinite linear;

transform-style: preserve-3d;

.content-carrousel:hover {

animation-play-state: paused;

cursor: pointer;

.content-carrousel figure {

width: 100%;

height: 120px;

overflow: hidden;

position: absolute;

box-shadow: 0px 0px 20px 0px black;

transition: all 300ms;


}

.content-carrousel figure:hover {

box-shadow: 0px 0px 0px 0px rgb(10, 10, 10);

transition: all 300ms;

.content-carrousel figure:nth-child(1) {

transform: rotateY(0deg) translateZ(300px);

.content-carrousel figure:nth-child(2) {

transform: rotateY(40deg) translateZ(300px);

.content-carrousel figure:nth-child(3) {

transform: rotateY(80deg) translateZ(300px);

.content-carrousel figure:nth-child(4) {

transform: rotateY(120deg) translateZ(300px);

.content-carrousel figure:nth-child(5) {

transform: rotateY(160deg) translateZ(300px);

.content-carrousel figure:nth-child(6) {

transform: rotateY(200deg) translateZ(300px);


}

.content-carrousel figure:nth-child(7) {

transform: rotateY(240deg) translateZ(300px);

.content-carrousel figure:nth-child(8) {

transform: rotateY(280deg) translateZ(300px);

.content-carrousel figure:nth-child(9) {

transform: rotateY(320deg) translateZ(300px);

.content-carrousel figure:nth-child(10) {

transform: rotateY(360deg) translateZ(300px);

.content-carrousel img {

width: 100%;

transition: all 300ms;

.content-carrousel img:hover {

transform: scale(1.2);

transition: all 300ms;

}
@keyframes rotar {

from {

transform: rotateY(270deg);

to {

transform: rotateY(370deg);

.pol {

height: 300px;

display: flex;

justify-content: center;

align-items: center;

font-size: 25px;

padding: 450px;

.nuestro {

width: 380px;

height: 390px;

position: relative;

left: 390px;

bottom: 320px;

footer {
background-color: #161515;

width: auto;

height: 100px;

color: white;

.nuestro img {

display: flex;

justify-content: center;

align-items: center;

width: 150px;

height: 200px;

position: relative;

left: 95px;

bottom: 50px;

.poro {

width: auto;

height: auto;

position: relative;

left: 800px;

bottom: 320px;

.poro img {

display: flex;

justify-content: center;
align-items: center;

width: 150px;

height: 200px;

position: relative;

left: 95px;

bottom: 37px;

.contenedor-footer {

position: relative;

top: 30px;

left: 10px;

.icon img {

width: 90px;

height: 90px;

position: relative;

left: 1600px;

top: 100px;

You might also like