Skip to content

done #2112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

done #2112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 224 additions & 0 deletions starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles.css" />


</head>

<body>
<header class="menu">
<h2 class="cabezaizquierda">
Revera
</h2>

<nav>

<ul>
<li>Home</li>
<li>About</li>
<li>Sample page</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Parent page >> </li>
<li>Contact</li>
</ul>


</nav>
</header>

<header class="hero">
<h1>
ETIAM MAURIS TORTOR, PHARETRA QUIS LOBORTIS IN, PHARETRA IN DIAM
</h1>
<p class="herotext">
Los marcadores de versión indican la versión de Excel en la que se presentó una función. Estas funciones no
están
disponibles en versiones anteriores. Por ejemplo, un marcador de versión de 2013 indica que esta función
está disponible
en Excel 2013 y en todas las versiones posteriores.
</p>
</header>


<section class="conteineruno">

<div class="row">

<article class="col-md-4">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3>Web design</h3>
<p>unc libero ett, laculls nec augen non</p>
</article>
<article class="col-md-4">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3>Web development</h3>
<p>unc libero ett, laculls nec augen non</p>
</article>
<article class="col-md-4">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3>User Interface</h3>
<p>unc libero ett, laculls nec augen non</p>
</article>




</div>





</section>




<section class="containerdos">
<h2> Latest Projects</h2>
<h3> Few of the latest porfolio items</h3>



<div class="row">

<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<p>unc libero ett, laculls nec augen non</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<p>unc libero ett, laculls nec augen non</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<p>unc libero ett, laculls nec augen non</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<p>unc libero ett, laculls nec augen non</p>
</article>




</div>


</section>



<section class="container">

<h2> Latest Articles</h2>
<h3> Few of the latest porfolio items</h3>



<div class="row">

<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
<h3> posted on august 19, 2019 by admin</h3>
<p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
lugar dentro del circuito mundial sin duda alguna, un
productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
<h3> posted on august 19, 2019 by admin</h3>
<p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
lugar dentro del circuito mundial sin duda alguna, un
productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
<h3> posted on august 19, 2019 by admin</h3>
<p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
lugar dentro del circuito mundial sin duda alguna, un
productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
</article>
<article class="col-md-3">
<img src="./img/project-1.jpg" alt="foto gatito">
<h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
<h3> posted on august 19, 2019 by admin</h3>
<p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
lugar dentro del circuito mundial sin duda alguna, un
productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
</article>




</div>

</section>
<section class="conteinercuatro">

<div class="row">

<article class="col-md-3">
<h3>Reserva</h3>
<p>unc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para probar una nueva funcionalidad o
para testear su implementación o rendimiento. El código puede ser muy largo.</p>
</article>
<article class="col-md-3">
<h3>Meta</h3>
<p>Log in</p>
<p>Entress RSS</p>
<p>Comments RSS</p>
<p>WordPress.org</p>
</article>
<article class="col-md-3">
<h3>Archives</h3>
<p>August 2013</p>
</article>
<article class="col-md-3">
<h3>Recent Posts</h3>
<p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para prob</p>
<p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para prob</p>
<p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para prob</p>
<p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para prob</p>
<p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
Esto es necesario para prob</p>
</article>




</div>





</section>








</body>

</html>

<footer>Copyright © 2016</footer>
104 changes: 104 additions & 0 deletions starter-code/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
img {
width: 100px;

}

.menu ul {
display: flex;
list-style: none;

}

menu li {
margin-right: 10px;


}

.menu {
display: flex;
content: center;

}


.cabezaizquierda {
text-transform: uppercase
}

.cabeceraderecha {
display: flex justify-content: flex
}

.hero {
background-image: url('./img/project-2.jpg');
background-size: cover;
background-repeat: no-repeat;
color: white;

}

.herotext {
color: white;
}


.conteineruno {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
background-color: red;
align-items: center
}

p .containerdos {
align-items: center
}

.containertres {
align-items: center
}

.conteinercuatro {
background-color: rgb(53, 49, 49);


}

.conteinercuatro p {
color: white
}

.conteinercuatro h3 {
color: white;
;
}

footer {
background-color: black;
color: white;
}


.row {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tanto container como row son clases de Bootstrap, NO HAY QUE TOCARLAS
Y container es container, no puedes inventarte containercuatro porque no existe

margin: 10px 0;
display: flex;
text-align: center;
}

.row [class='col'] {
padding: 10px;
text-align: center;
align-items: center;

}

.row,
p {
color: black;
}



@media screen and (max-width:1050px) {}