0% found this document useful (0 votes)
22 views5 pages

Archivo Examen CSS

This CSS stylesheet defines styles for a website's navigation bar, tabs, showcase section, news cards, contact form, and footer. It includes styles for flexbox layout, colors, fonts, images, breakpoints and more. The navigation bar, tabs, news cards and footer are formatted with flexbox. Images are styled for the showcase, news cards and form. Media queries define styling for smaller screens.

Uploaded by

natareno.ln
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views5 pages

Archivo Examen CSS

This CSS stylesheet defines styles for a website's navigation bar, tabs, showcase section, news cards, contact form, and footer. It includes styles for flexbox layout, colors, fonts, images, breakpoints and more. The navigation bar, tabs, news cards and footer are formatted with flexbox. Images are styled for the showcase, news cards and form. Media queries define styling for smaller screens.

Uploaded by

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

*{

margin: 0%;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: 'Oswald', sans-serif;
overflow: auto;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
list-style: none;
}
.container{
padding-top: 10px;
width: 90%;
margin: auto;
}
/*Estilos de navegacion*/
.nav-main{
font-size: 17px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
}
.nav-brand{
width: 75px;
height: 65px;
margin-left: 30px;
}
.nav-main ul {
display: flex;
}
.nav-main ul li {
padding: 5px;
}
.nav-main ul li a {
padding: 2px;
}
.nav-main ul li a:hover{
border-bottom: 2px solid #ffffff;
}
.nav-main ul.nav-menu{
flex: 1;
margin-left: 20px;
}
ul.tabs{
width: 100%;
list-style: none;
}
ul.tabs li{
width: 12%;
}
ul.tabs li a{
color: white;
text-decoration: none;
font-size: 16px;
text-align: center;
display: block;
padding: 20px 0;
transition: 1.5s;
}
.active{
background: #0984CC;
}
ul.tabs li a .tab-text{
margin-left: 8px;
}
/*Showcase*/
hr{
margin: 10px 0;
}
.secciones{
width: 100%;
color: #ffffff;
}
.secciones article{
padding: 30px;
}
.secciones article p{
text-align: justify;
}
@media screen and (max-width: 700px){
ul.tabs li{
width: none;
flex-basis: 0;
flex-grow: 1;
}
}
@media screen and (max-width: 450px){
ul.tabs li a{
padding: 15px 0;
}
ul.tabs li a .tab-text{
display: none;
}
.tabs-container article{
padding: 20px;
}
}
.showcase{
margin-top: 15px;
width: 100%;
height: 550px;
background: url(showcase2.jpg) no-repeat center center/cover;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
h1{
text-shadow: 3px 2px 3px red;
font-size: 30px;
}
h2{
text-shadow: 3px 2px 3px blue;
}
#separador{
padding-top: 15px;
padding-bottom: 110px;
}
#primerTexto{
text-align: center;
color: #ffffff;
text-shadow: 3px 5px 3px blue;
font-size: 17px;
}
.news-cards{
display: grid;
grid-template-columns: repeat(6,1fr);
column-gap: 25px;
padding-top: 20px;
margin: 10px 0;
}
.news-cards img{
width: 100%;
border: 1px solid #ccc;
padding: 10px;
transition: box-shadow 0.3s ease;
box-shadow: 0 0 10px #ccc;
}
.news-cards h3 {
font-size: 20px;
text-shadow: 3px 3px 3px blue;
margin: 10px 0;
}
.news-cards ul{
list-style: none;
font-size: 12px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 3px 5px 3px blue;
box-shadow: 0 0 10px #ccc;
}
.news-cards li{
text-shadow: 3px 5px 3px blue;
}
.news-cards2{
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: 25px;
padding-top: 20px;
margin: 10px 0;
}
.news-cards2 img{
width:100%;
}
.news-cards2 img.soporte{
width: 100%;
height: 73%;
}
.news-cards2 img.redes{
width: 100%;
height: 73%;
}
.news-cards2 img.Js{
width: 100%;
height: 73%;
}
.news-cards2 h3{
font-size: 20px;
margin: 10px 0;
}
#tab4{
overflow: auto;
}
@import url('normalize.css');
@import url('bootstrap.min.css');
#formulario{
background: url('tech-red.jpg');
border: 1px solid #E1E1E1;
border-radius: 5px;
padding: 17px;
width: 325px;
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%,-50%);
}
@media(max-width: 400px){
#formulario{
width: 90%;
background: url('tech-red.jpg');
}
}
input{
width: 100%;
}
textarea{
width: 100%;
resize: none;
}
.terminos {
text-align: center;
display: block;
}
#btn-primary {
width: 100%;
cursor: pointer;
font-family: sans-serif;
font-size: 15px;
text-align: center;
background: #0984CC;
color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
}
/* Estilos generales del footer */
.container45{
padding-top: 550px;
}
footer {
background-color: #f2f2f2;
padding: 20px;
color: #666666;
}
.footer-container {
display: flex;
justify-content: space-between;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.footer-left,
.footer-right {
width: 50%;
}
/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
}
.footer-left,
.footer-right {
width: 100%;
margin-bottom: 20px;
}
}
/* Estilos para la sección de enlaces útiles */
.footer-right ul {
list-style: none;
padding: 0;
}
.footer-right ul li {
margin-bottom: 5px;
}
.footer-right ul li a {
color: #666666;
text-decoration: none;
}
.footer-right ul li a:hover {
text-decoration: underline;
}
/* Estilos para la sección inferior del footer */
.footer-bottom {
margin-top: 20px;
text-align: center;
}

You might also like