Skip to content

GitLab

Commit 687e8be4 authored by Evelin Perez's avatar Evelin Perez
Browse files

Third screen

parent 3a87b2b1
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 10 deletions
css/styles.css
View file @ 687e8be4
......@@ -27,11 +27,11 @@ body {
}
#second-screen {
display: block;
display: none;
}
#third-screen {
display: none;
display: block;
}
/*Estilos de primera pantalla*/
......@@ -154,6 +154,49 @@ body {
margin: 20px 0;
}
/*Estilos de tercera pantalla*/
.fifth-block {
display: flex;
align-items: center;
justify-content: center;
height: 60vh;
gap: 30px;
}
.first-image-screen-container {
display: flex;
border: 4px solid var(--text-color);
border-radius: 10px;
height: 400px;
width: 720px;
}
.second-image-screen-container img {
border: 4px solid var(--text-color);
display: flex;
border-radius: 10px;
height: 400px;
width: 720px;
}
.sixth-block {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
gap: 100px;
}
.logo-container-third-screen {
display: flex;
width: 180px;
height: 90px;
padding: 10px 0;
border: 1px solid var(--primary-color);
}
.footer {
width: 100%;
height: 10vh;
......
index.html
View file @ 687e8be4
......@@ -73,16 +73,20 @@
</section>
<section id="third-screen" class="section-container">
<div class="image-screen-container">
<img src="#">
</div>
<div class="image-screen-container">
<img src="#">
<div class="fifth-block">
<div class="first-image-screen-container">
<img src="#">
</div>
<div class="second-image-screen-container">
<img src="#">
</div>
</div>
<div class="main-logo-container">
<img src="#">
<div class="sixth-block">
<div class="logo-container-third-screen">
<img src="#">
</div>
<div class="countdown">03</div>
</div>
<div class="countdown">03</div>
</section>
</main>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment