Estilos

Estilos
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
background: rgb(43, 61, 96);
color: rgb(255, 255, 255);
background-color: #2b3d60;
background-color: #12161d;
background-image: url("data:image/svg+xml,%3Csvg
xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152
152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%230b2e6c' fill-
opacity='0.1'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-
2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-
42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82
30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-
22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-
20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-
20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-
2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-
20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E
%3C/g%3E%3C/g%3E%3C/svg%3E");
font-size: 16px; /*Tamaño de la fuente del parrafo*/
font-family: 'Oswald', sans-serif;
}
/* Color de etiquetas -a-*/

a
{
color: rgb(255, 255, 255);
text-decoration: none;
}
ul
{
list-style: none;
}
.container
{
width: 90%;
margin: auto;
}
/*Navegación*/
.nav-main
{
font-size: 18px; /*Tamaño de letra de la barra*/
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
}
/*Tamaño de imagen de icono*/

.nav-brand
{
width: 50px;
}
/*Navegación Izquierda*/
.nav-main ul
{
display: flex;
}
.nav-main ul li
{
padding: 10px;
}
.nav-main ul li a
{
padding: 5px;
}
/*Color y borde de línea al pasar sobre cada item*/

.nav-main ul li a:hover
{
border-bottom: 3px solid rgb(219, 122, 57);
}
/*Espacio entre cada barra de navegación*/

.nav-main ul li
{
padding: 10px;
}
/*Colocar el menú al lago del logotipo*/

.nav-main ul.nav-menu
{
flex: 1;
margin-left: 20px;
}
.menu-btn
{
position: absolute;
cursor: pointer;
top: 15px;
right: 30px;
z-index: 2;
display: none;
}
/*Showcase*/
hr
{
margin: 10px 0px;
}
.showcase
{
width: 100%;
height: 550px;
background: url("./img/news8jpg") no-repeat center center/cover;
display: flex;
flex-direction: column;
text-align: center;
justify-content: flex-end;
padding-bottom: 50px;
margin-bottom: 20px;
color: #fff;
}
.btn
{
cursor: pointer;
display: inline-block;
border: 0;
font-weight: bold;
padding: 10px 20px;
background: #262626;
color: #ffffff;
font-size: 15px;
border: 1px solid #ffffff;
margin: 10px 0px;
}
.btn:hover
{
opacity: 0.8;
background-color: red;
}
.showcase h2,
.showcase p{
}
/*News Cards*/
.news-cards
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 25px;
margin: 10px 0px;
}
.news-cards img
{
width: 100%;
height: 180px;
}
.news-cards h3
{
font-size: 20px;
margin: 10px 0;
}
.news-cards p
{
font-size: 16px;
margin: 10px 0;
}
.news-cards a
{
padding: 10px 0;
color: #f2f2f2;
text-transform: uppercase;
display: inline-block;
font-weight: bold;
}
.news-cards a:hover
{
text-decoration: underline;
}
/*Cards Baner One*/

.cards-banner-one
{
width: 100%;
height: 350px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(/Img/news6.jpg);
}
.cards-banner-one .content
{
width: 40%;
padding: 90px 0 0 30px;
color: #ffffff;
}
.cards-banner-one p,
.cards-banner-one h2
{
margin: 10px 0 20px 0;
}
/*Cards Baner Two*/

.cards-banner-two
{
width: 100%;
height: 350px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(/Img/news8.jpg);
}
.cards-banner-two .content
{
width: 50%;
padding: 100px 0px 0px 30px;
}
/*Social*/
.social
{
margin: 50px;
}
.social p
{
text-align: center;
font-size: 30px;
}
.links
{
display: flex;
justify-content: center;
}
.links a
{
margin: 0 30px;
}
.links a i
{
font-size: 3rem;
}
/*Footer Links*/
.footer-links
{
background: #2f3640;
color: #616161;
font-size: 12px;
padding: 35px 0;
}
.footer-container
{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
align-items: flex-start;
justify-content: center;
}
.footer-container ul
{
margin: 0 auto;
}
.footer-container ul li
{
line-height: 2.8;
}
.footer
{
color: #616161;
font-size: 18px;
padding: 20px 0;
text-align: center;
padding-bottom: 20px;
}
@media(max-width: 700px)
{
.nav-main ul.nav-menu
{
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 30px;
opacity: 0.9;
transform: translateX(-400px);
transition: transform 0.5s ease-in-out;
}
.nav-main ul.nav-menu.show
{
transform: translateX(-20px);
}
.nav-main ul.nav-menu li
{
padding: 20px;
font-size: 14px;
}
.nav-main ul.nav-menu-right
{
margin-right: 40px;
}
.news-cards
{
}
.cards-banner-one .content,
{
width: 90%;
}
.footer-links .footer-container
{
}
}
@media(max-width: 500px)
{
.news-cards
{
grid-template-columns: 1fr;
}
.news-cards img
{
height: 270px;
}
.cards-banner-one .content,
{
width: 100%;
padding: 60px 20px;
}
.footer-links .footer-container
{
grid-template-columns: 1fr;
}
}
JavaScript
document.querySelector('.menu-btn').addEventListener('click', () =>
{
document.querySelector('.nav-menu').classList.toggle('show');
});
ScrollReveal().reveal('.showcase');
ScrollReveal().reveal('.news-cards', {delay: 500});
ScrollReveal().reveal('.cards-banner-one', {delay: 500});
ScrollReveal().reveal('.cards-banner-two', {delay: 500});
Html
<!DOCTYPE html>
<html lang="es">
<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">
<title>Desarrollo Web</title>

<link rel="icon" href="./Img/html-5.png">

<link href="https://fonts.googleapis.com/css2?
family=Oswald:wght@700&display=swap" rel="stylesheet">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/
all.min.css">

<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<div class="menu-btn">
<i class="fas fa-bars fa-2x"></i>
</div>


<div class="container">
<nav class="nav-main">
<img src="./Img/html.png" alt="Desarrollo Web" class="nav-
brand">



<ul class="nav-menu">
<li>
<a href="WebDevelopment.html" target="_blank">Web
Development</a>

</li>
<li>
<a href="Blockchain.html" target="_blank">Blockchain</a>
</li>
<li>
<a href="ArtificialIntelligence.html"
target="_blank">Artificial Intelligence</a>
</li>
<li>
<a href="MachineLearning.html" target="_blank">Machine
Learning</a>
</li>
<li>
<a href="QuantumComputing.html" target="_blank">Quantum
Computing</a>
</li>
<li>
<a href="Startup.html" target="_blank">Startup</a>
</li>
<li>
<a href="Más.html" target="_blank">Más</a>
</li>
</ul>


<ul class="nav-menu-right">
<li>
<a href="#">
<i class="fas fa-search"></i>
</a>
</li>
</ul>
</nav>
<hr style="border: none; border-bottom: 3px solid rgb(255, 255,
255);">

<header class="showcase">
<h2>NOTICIAS DEL DíA</h2>
<p>Google despidió al ingeniero que afirmó que un sistema de
inteligencia artificial (IA) aún no lanzado se había vuelto consciente,
según confirmó la empresa, diciendo que violó las políticas de empleo y de
seguridad de datos.</p>
<a href="#" class="btn">Leer Más <i class="fas fa-angle-double-
right"></i></a>
</header>

<div class="news-cards">

<div>
<img src="./Img/news4.jpg" alt="News I">
<h3>lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dolorem culpa libero necessitatibus expedita placeat asperiores sapiente!
Voluptatibus placeat, et consequuntur dignissimos sapiente corrupti atque
voluptate. Magni maiores libero dignissimos. Quo!</p>
<a href="">Leer Más <i class="fas fa-angle-double-
right"></i></a>
</div>


<div>
right"></i></a>
</div>

<div>
right"></i></a>
</div>

<div>
right"></i></a>
</div>
</div>
<section class="cards-banner-one">
<div class="content">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Explicabo excepturi eaque voluptatem in facilis placeat, distinctio
doloremque odit alias ad.</p>
<a href="#" class="btn">Leer Más <i class="fas fa-angle-
double-rigth"></i></a>
</div>
</section>

<div class="news-cards">

<div>
right"></i></a>
</div>


<div>
right"></i></a>
</div>

<div>
right"></i></a>
</div>

<div>
right"></i></a>
</div>
</div>
<section class="cards-banner-two">
<div class="content">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptates corrupti dolor optio, possimus fugit odio. Itaque earum ut
dignissimos. Praesentium dignissimos eveniet officia hic nisi facere
architecto nesciunt harum repellat?</p>
<a href="#" class="btn">Leer Más <i class="fas fa-angle-
double-rigth"></i></a>
</div>
</section>
<section class="social">
<p>Siguenos en nuestras redes sociales</p>
<div class="links">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
</div>
</section>
</div>

<div class="footer-links">
<div class="footer-container">
<ul>
<li>
<a href="#">
<h3>Titulo Uno</h3>
</a>
</li>
<li>
<a href="#">BLockchain</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ul>
<li>
<a href="#">
<h3>Titulo Uno</h3>
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ul>
<li>
<a href="#">
<h3>Titulo Uno</h3>
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ul>
<li>
<a href="#">
<h3>Titulo Uno</h3>
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<footer class="footer">
<h3>DW News Copyrigth</h3>
</footer>

<script src="https://unpkg.com/scrollreveal"></script>
<script src="./JS/main.js"></script>
</body>
</html>

Estilos

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Estilos

Cargado por

Copyright:

Formatos disponibles

Estilos

/* Color de etiquetas -a-*/

/Tamaño de imagen de icono/

/Color y borde de línea al pasar sobre cada item/

/Espacio entre cada barra de navegación/

/Colocar el menú al lago del logotipo/

/Cards Baner One/

/Cards Baner Two/

También podría gustarte