Scribd
Upload
63 views12 pages

DOCTYPE HTML

This document summarizes an HTML/CSS code for a website called Sonet about technology solutions. The HTML includes sections for the header, navigation bar, content about LAN design and services, contact form and footer. The CSS styles elements like the title, buttons, navigation links and adds shadows. It defines colors, fonts and other styles.

Uploaded by

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

DOCTYPE HTML

This document summarizes an HTML/CSS code for a website called Sonet about technology solutions. The HTML includes sections for the header, navigation bar, content about LAN design and services, contact form and footer. The CSS styles elements like the title, buttons, navigation links and adds shadows. It defines colors, fonts and other styles.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

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


scale=1.0">

<link rel="preload" href="css/normalize.css" as="style">


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

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Roboto&display=swap" rel="stylesheet">

<link rel="preload" href="css/styles.css" as="style">


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

</head>

<body>
<header>
<h1 class="titulo">SONET <span>Soluciones en
Tecnologia</span></h1>
</header>

<div class="nav-bg">
<nav class="navegacion-principal contenedor ">
<a href="#">Iniciar</a>
<a href="#">Sobre Sonet</a>
<a href="#">Consumidores</a>
<a href="#">contactanos</a>
</nav>

</div>
<section class="internett">
<div class="contenido-int">
<h2>Diseno de redes LAN </h2>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-
tabler icon-tabler-3d-cube-sphere" width="72" height="72"
viewBox="0 0 24 24" stroke-width="2.5" stroke="#00abfb" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 17.6l-2 -1.1v-2.5" />
<path d="M4 10v-2.5l2 -1.1" />
<path d="M10 4.1l2 -1.1l2 1.1" />
<path d="M18 6.4l2 1.1v2.5" />
<path d="M20 14v2.5l-2 1.12" />
<path d="M14 19.9l-2 1.1l-2 -1.1" />
<line x1="12" y1="12" x2="14" y2="10.9" />
<line x1="18" y1="8.6" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="14.5" />
<line x1="12" y1="18.5" x2="12" y2="21" />
<path d="M12 12l-2 -1.12" />
<line x1="6" y1="8.6" x2="4" y2="7.5" />
</svg>
<p>Tepetitlan Hidalgo</p>

<a class="boton"; href="#">Contactar</a>


</div>
</section>

<main class="contenedor sombra"> <!-- para documentar codigo-->

<h2>Mis servicios</h2>
<div class="servicios">
<section class="servicio">
<h3>Soporte a Equipos de Computo</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon
icon-tabler icon-tabler-devices-pc" width="72" height="72"
viewBox="0 0 24 24" stroke-width="2.5" stroke="#00abfb" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5h6v14h-6z" />
<path d="M12 9h10v7h-10z" />
<path d="M14 19h6" />
<path d="M17 16v3" />
<path d="M6 13v.01" />
<path d="M6 16v.01" />
</svg>
</div>
<p>Sonet, soluciones en tecnologia
informatica,contamos con el personal mas capacitado. </p>

</section>

<section class="servicio" >


<h3>Diseno de Redes LAN</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon
icon-tabler icon-tabler-affiliate" width="72" height="72"
viewBox="0 0 24 24" stroke-width="2.5" stroke="#00abfb" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5.931 6.936l1.275 4.249m5.607 5.609l4.251
1.275" />
<path d="M11.683 12.317l5.759 -5.759" />
<circle cx="5.5" cy="5.5" r="1.5" />
<circle cx="18.5" cy="5.5" r="1.5" />
<circle cx="18.5" cy="18.5" r="1.5" />
<circle cx="8.5" cy="15.5" r="4.5" />
</svg>
</div>
<p>Contamos con el personal mas capacitado en el
mercado para el desarrollo de sus redes LAN</p>

</section>

<section class="servicio">
<h3>Radio Enlaces</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-antenna-bars-5" width="72"
height="72" viewBox="0 0 24 24" stroke-width="2.5" stroke="#00abfb"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="6" y1="18" x2="6" y2="15" />
<line x1="10" y1="18" x2="10" y2="12" />
<line x1="14" y1="18" x2="14" y2="9" />
<line x1="18" y1="18" x2="18" y2="6" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrows-maximize" width="72"
height="72" viewBox="0 0 24 24" stroke-width="2.5" stroke="#00abfb"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="16 4 20 4 20 8" />
<line x1="14" y1="10" x2="20" y2="4" />
<polyline points="8 20 4 20 4 16" />
<line x1="4" y1="20" x2="10" y2="14" />
<polyline points="16 20 20 20 20 16" />
<line x1="14" y1="14" x2="20" y2="20" />
<polyline points="8 4 4 4 4 8" />
<line x1="4" y1="4" x2="10" y2="10" />
</svg>
</div>
<p>Realizamos los enlaces con diferentes tecnologias
de comunicacion</p>

</section>
</div><!--cierre clase servicios-->
</main >

<section>
<h3 class="titulo">Contacto</h3>
<form class="formulario">
<fieldset>
<legend>Contactanos llamando o llenando los
campos</legend>

<div class="contenedor-campos">
<div class="campo">
<label>Nombre</label>
<input type="Tex" placeholder="Tu nombre">
</div>

<div class="campo">
<label>Telefono</label>
<input type="Tex" placeholder="Tu telefono">
</div>

<div class="campo">
<label>Correo</label>
<input type="Tex" placeholder="Tu correo">
</div>

<div class="campo">
<label>Mensaje</label>
<textarea></textarea>
</div>

</div>

<div>
<input class="boton" type="submit"
value="Enviar">

</div>

</fieldset>

</form>

</section>
<footer class="footer">
<p>Todos los derechos reservados.sonet</p>
</footer>
</body>
</html>

Css
:root
/* paleta de colores */
{
--blanco: rgb(255, 255, 255);/*variables de css*/
--azul:#c0df14;
--rojo:rgb(255, 0, 0);
--fuente-principal:3.8 rem;
--morado:rgb(223, 21, 223);
--negro:rgba(12, 11, 11, 0.808);
/*puedes almacenar cualquier valor*/
}

html
{
font-size: 62.5%;
scroll-snap-type: y mandatory;
}
body /*lo que se agregue aqui lo carga de manera general a todo el
doc*/
{
font-size: 16px;
background-image:linear-gradient(to top,#DFEFF3 0%,var (--
blanco) 100%);/*inicio debradado*/
}

/*darle color al titulo,


lo estoy centrando,le estoy dando el color rojo y tambien un tipo
de letra */
.titulo /*clase titulo*/
{
text-align: center; /*centrandolo*/
color:var(--rojo);/*color rojo*/
font-family: 'Roboto', sans-serif;/*tipo de fuente*/
}

span
{
font-size: 2rem;/*da colores a parrafos dentro de una etiqueta*/
}

.contenedor /*clase contenedor*/


{
width:120rem;
margin-top:0;/*Establece la anchura del margen superior de los
elementos de bloque*/
margin-right:auto;
margin-top:0;
margin-left:auto;
text-align:center ;
font-weight: bold;
/* width: 120 rem;
* margin-top: 0*/
}

/***codigo para boton*/


.boton
{
background-color: rgb(97, 97, 223);
color :burlywood;
padding:1rem 3rem 1rem 3rem;
margin-top:1rem;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;/*poner texto en mayusculas*/
font-weight: bold;/*texto negritas*/
border-radius: .5rem;/*redondear bordes de botton*/
width: 20%;/*hacer grande el boton*/
text-align: center;/*centrar*/
border:none;
}

/***termina codigo para boton*/

/**poner la manita en boton de formulario**/


.boton:hover
{
cursor: pointer; /**poner la manita**/
}

/**termina poner la manita**/

/*color a la barra*/
.nav-bg
{
background-color:var(--azul);
}
/*termina color a la barra*/
.navegacion-principal /*clase principal*/
{
padding:1rem;/*1rem 1rem 1rem 1rem;*/
display:flex;/*display */
flex-direction:row;/*los elemntos se colocan de izquierda a
derecha*/
justify-content:space-around;/*el contenido se distribuye.
iniciar,sobre sonet,consumidores*/
}
.navegacion-principal a /*clase navegacion-principal y hago enfoque
al elemento a*/
{
color:var(--rojo) ;
text-decoration:none;/*decorar*/
font-size: 2rem;
font-weight: 700;
}

.navegacion-principal a:hover /*nos da el efecto de oscurecer el


elemento*/
{
background-color: var(--blanco);/*el color de fondo donde esta el
enlace*/
color: var(--negro); /*color */
}

/*media queries se ejecuta cuando se cumple la condicion entre


parentesis*/

@media(max-width:980px)
{
body
{
background-color:maroon;
}

/**en este codigo lo obtuve de boxshadows **/


.sombra
{
-webkit-box-shadow: 0px -5px 35px -10px rgba(92,82,92,1);
-moz-box-shadow: 0px -5px 35px -10px rgba(92,82,92,1);
box-shadow: 0px -5px 35px -10px rgba(92,82,92,1);
background-color: rgb(94, 94, 150);
padding:2rem;
border-radius: 1rem;/**bordes redondeados**/
}

/*fin de media queries*/

/*inicio de colocar imagen y alinar contenido*/

.internett
{
background-image:url(../imagenes/imagee.png);/*insertar la imagen*/
background-repeat: no-repeat;/*no se repita*/
background-size:cover ;/*ocupe todo el espacio de la pagina*/
height: 380px;/*altura*/
position:relative;/*posicion relativa*/
}
/*fin de colocoar imagen*/

.contenido-int
{
position:absolute;/*posicion de la imagen*/
/*background-color: rgba(0, 0, 0,.4);/*transparencia donde .8 es el
*/
background-color: rgb(0 0 0 /40%);/*transparencia actual*/
width: 100%;/*dimencion*/
height:100%;/*dimenciom*/
}

.contenido-int
{
display:flex;
flex-direction: column;/*hace que se vaya de arriba a bajo*/
align-items: center;/*centro todo el contenido*/
}

/*fin de colocar imagen y alinar contenido*/

/*inicio dar color rojo a texto*/


.contenido-int h2,/*selecciono de la clase conyenido-int h2*/
.contenido-int p,/*selecciono de la clase conyenido-int p*/
.contenido-int a/*selecciono de la clase conyenido-int a*/
{
color:var(--rojo);/*le doy color rojo*/

}
/*fin dar contenido a texto*/

/**servicios**/
.servicios
{
display: grid;
/**grid-template-columns: 33.3% 33.3% 33.3%; **/
/**grid-template-columns: 1fr 1fr 1fr; **/
grid-template-columns: repeat(3 ,1fr); /**crea 3 columnas**/
column-gap: 1rem; /**separacion**/
}

.servicio/*para alinear iconos*/


{
display: flex;
flex-direction: column;
align-items: center;

.servicio h3
{
color:rgb(255, 0, 0);
font-weight: normal;
}
.servicio p
{
line-height: 3;
}
.servicio .iconos /***bordes a los iconos*/
{
height: 15rem;
width:15rem ;
background-color:rgb(148, 71, 71);
border-radius:50% ;
display: flex;
justify-content:space-evenly;
align-items: center;
}

/**formulario **/
.formulario fieldset
{
border:none ;

}
.formulario
{
background-color: rgb(255, 0, 0);
width: min(60rem,100rem);
margin: 0 auto;
padding:2rem ;/**espacio en todas direcciones**/
border-radius: 2rem;
}

.formulario legend
{
text-align:center;
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2rem;/**separacion**/
}
.contenerdor-campos
{
display: grid;
grid-template-columns: 50% 50%;

.campo
{
margin-bottom: 1rem;/**separacion**/
}
.campo label
{
color: black;
font-weight: bold;
margin-bottom: .5rem;
display: block;
}
.input-text
{
background-color: rgb(182, 77, 147);
width: 100%;
border:none;
padding: 1.5rem;
border-radius: .5rem;/**esquinas redondeadas**/

.footer
{
text-align:center ;
margin-top: 9rem;
}

You might also like