Can you really create a good landing page with Weebly? Yes you can!! It's boring to see flat sites with obsolete designs these days. In this tutorial, you can create a very beautiful landing page using a typical theme. We only need few codes. Check it out.
PAGE HEADER CODE
<style>
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
</style>
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
</style>
BODY CODE
<ul class="bmenu">
<li><a href="http://www.myweeblytricks.com/">About</a></li>
<li><a href="http://www.myweeblytricks.com/">Illustrations</a></li>
<li><a href="http://www.myweeblytricks.com/">Photography</a></li>
<li><a href="http://www.myweeblytricks.com/">Web Design</a></li>
<li><a href="http://www.myweeblytricks.com/">Personal Projects</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact</a></li>
</ul>
<li><a href="http://www.myweeblytricks.com/">About</a></li>
<li><a href="http://www.myweeblytricks.com/">Illustrations</a></li>
<li><a href="http://www.myweeblytricks.com/">Photography</a></li>
<li><a href="http://www.myweeblytricks.com/">Web Design</a></li>
<li><a href="http://www.myweeblytricks.com/">Personal Projects</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact</a></li>
</ul>
Notes:
Yellow text - These will be your initial menus on your landing page.
Green text - These will be the links for your menus.
CONCLUSION
Now that you've set up the codes above, you'll notice the effect. To modify your page similar to the live preview, you must hide some elements on your site like the body background, your headers and footers. Weebly is awesome! Thanks to Codrops for this beautiful CSS3 effects.
0 comments: