Web Development #15 - List of projects
Hello Everybody ✌️ ✌️
In this new post we continue with the construction of our first web page, developing our portfolio of services, in this case we will list our projects, I understand that many will not have projects to show but what you can do is choose some images that Simulate the projects, the main idea is that we can learn how to create a listing with html and put some nice styles with css👨💻 👨💻
Ok, here the image where we see the section that we will build according to our previous design that we create in moqups.com👇 👇
It's simple, just a list and a title, the list will have some of our most important projects and we want to show the client to see our work. In this case I will place some projects that I have developed in the company that I currently work, as I said before you will put whatever you want. 🤓 🤓
First we must open sublimeText again and in the index.html file we paste the following code ...
Where the tag <-img> we must remove the - at the beginning because otherwise, it will not work.
<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>
This is the code that shows us the projects done, now if we save and reload the browser, we will see something like this ...
Now as always we must put styles and for that we place the following code in our style.css file
/* 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;
}
After saving our file and reloading the web, now if we find a friendlier view and we see something like this ...
That's it 😱
Great as our site is, this is everything for today, we almost finished it and we will continue with new tutorials where we will learn more thoroughly all these technologies of the web world.
Regards! 🤗 🤗
Awesome post. I have been trying to learn how to make websites so I will start following your tutorials! Upvoted and followed :)
P.S I have a SBD giveaway happening on my latest steemit post, check it out to win some free SBD ʕ•ᴥ•ʔ
Thanks bro!
Congratulations @juanpchica! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPCongratulations! 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.
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?