Crea tu página web desde 0 - parte #15 - Lista de proyectos
Hola a todos! espero que se encuentren muy bien ✌️ ✌️
En este nuevo post continuamos con la construcción de nuestra primer página web, desarrollando nuestro portafolio de servicios, en este caso haremos el listado de nuestros proyectos, entiendo que muchos no van a tener proyectos que mostrar pero lo que pueden hacer es elegir algunas imágenes que simularan los proyectos, la idea principal es que podamos aprender como crear un listado con html y ponerle algunos lindos estilos con css 👨💻 👨💻
Listo, a continuación una imagen donde vemos la sección que construiremos según nuestro diseño previo que creamos en moqups.com 👇 👇
Es simple, solo un listado y un título, el listado tendrá algunos de nuestros proyectos más importantes y que queremos mostrar al cliente para que vea nuestro trabajo. En este caso yo colocare algunos proyectos que he desarrollado en la empresa que laboro actualmente, como dije anteriormente ustedes pondrán lo que quieran.🤓 🤓
Primero debemos abrir nuevamente sublimeText y en el archivo index.html pegaremos el siguiente código...
Donde este la etiqueta <-img> debemos quitar el - al inicio ya que si no, no nos va a funcionar.
<section id="section-3">
<div class="content-section">
<h3>My Projects</h3>
<ul class="list-projects">
<li>
<-img src="img/dom.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
<li>
<-img src="img/casa-tienda.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
<li>
<-img src="img/plus.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
<li>
<-img src="img/para-construir.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
<li>
<-img src="img/ruffus.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
<li>
<-img src="img/ekored.png">
<div class="mask-project">
<a href="#">View Project</a>
</div>
</li>
</ul>
</div>
</section>
Este es el código que nos muestra los proyectos hechos, ahora si guardamos y recargamos el navegador, veremos algo así...
Ahora como siempre debemos poner estilos y para eso colocamos el siguiente código en nuestro archivo style.css
/* List projects */
section#section-3 {
background: #ebf5f5;
padding: 50px 20px;
text-align: center;
}
#section-3 h3 {
font-size: 30px;
color: #403d3d;
text-transform: uppercase;
letter-spacing: 2px;
}
ul.list-projects {
margin: 0;
padding: 0;
list-style: none;
}
ul.list-projects li {
display: inline-block;
width: 31%;
margin: 15px 1%;
position: relative;
overflow: hidden;
vertical-align: top;
}
ul.list-projects li img {
width: 100%;
height: 100%;
}
ul.list-projects li:hover .mask-project{
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.mask-project {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.57);
transition: all 1s ease-out;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
cursor: pointer;
}
.mask-project a {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
border: 1px solid;
padding: 5px 10px;
position: relative;
top: 42%;
}
.mask-project a:hover{
opacity: .8;
transition: all 1s ease-out;
}
Luego de guardar nuestro archivo y recargar la web, ahora si nos encontramos con una vista más amigable y vemos algo como esto...
Y listo 😱
Genial como va quedando nuestro sitio, esto es todo por hoy, ya casi lo terminamos y seguiremos con nuevos tutoriales donde aprenderemos más a fondo todas estas tecnologías del mundo web.
Saludos! 🤗 🤗
Este Post ha recibido un Upvote desde la cuenta del King: @dineroconopcion, El cual es un Grupo de Soporte mantenido por @wilbertphysique, @yoenelmundo y 5 personas mas que quieren ayudarte a llegar hacer un Top Autor En Steemit sin tener que invertir en Steem Power. Te Gustaria Ser Parte De Este Projecto?
This Post has been Upvote from the King's Account: @dineroconopcion, It's a Support Group run by @wilbertphysique, @yoenelmundo, and 5 other people that want to help you be a Top Steemit Author without having to invest into Steem Power. Would You Like To Be Part of this Project?
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by juanpchica from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
Excelente
Gracias
This post has been ranked within the top 10 most undervalued posts in the first half of Aug 16. We estimate that this post is undervalued by $55.73 as compared to a scenario in which every voter had an equal say.
See the full rankings and details in The Daily Tribune: Aug 16 - Part I. You can also read about some of our methodology, data analysis and technical details in our initial post.
If you are the author and would prefer not to receive these comments, simply reply "Stop" to this comment.