Awesome Landing Page & E-Commerce product card using html & css
Hi Friends,
I am Jeykumar M,
I am the co-founder, member of #w3farmers
and frontend / UI / UX Designer and Developer at #w3farmers.
#w3farmers channel is giving you a videos of landing (welcome) page,
website design and development,
website sections like top and side navbars (fixed navbar, transparent navbar, animated navbars, responsive navbars), dropdown menu using only css, and
using javascript,
testimonials, login pages, contact pages, blog pages design and development,
image slider or slideshow or carousels,
css tips, tricks and techniques,
responsive web design, boostrap,
font-awesome,
google fonts,
jquery and more stuffs....
We gives you a series of web (website or webpage) design and development tutorials for free,
landing ( welcome ) pages design basics has been going now,
Today,
i described you "Awesome Landing Page & E-Commerce product card using html & css".
from this video you can learn
basics, intermediate & advanced level of html & css,
some css transition animation,
css transform property with rotateZ(), translateY() methods,
font-awesome social media icons ( fa-facebook, fa-twitter, fa-google-plus, fa-linkedin, fa-pinterest ),
google fonts ( cookie, montserrat and 'Fredoka One' ),button hover effects,
button transparent background,
background properties with images and linear-gradient backgrounds,
transparent backgrounds,
relative and absolute positions,
floating li elements in navbar menu,
navbar creation,
responsive web design,
css percentage & pixel units,
css z-index,
css transform,
css box-shadow,
css border-radius,
css float:left, css float:right and clear:both,
css colornames, css hexa decimal color codes,
css selectors and other pseudo classes,
css before and after pseudo elements and more stuffs...
steps to do this,
1. open the texteditor as you wish ( Brackets, Visual Studio Code, Sublime Text, Atom such a popular text editors ), i am using in this video is brackets text
editor.
2. first create a page with .html extension,
3. create a required html elements like html, body, header, nav ( navbar ), brand ( logo section ), ul for menu ( Home, About, Portfolio, Gallery, Services,
Contact ), text content ( h1, p and an anchor tag as button ).
4. then, finally styling the html elements,
In this video, i am using internal styles using style tag in the head section.
using google fonts, all the texts looks cool....
i used Fredoka One for h1, Montserrat for a, li, p and cookie for brand. u can use fonts as u wish...
#w3farmers_landing_pages
#w3farmers_css_practices
to follow us on facebook like our page,
/ w3farmers
/ computerteche
Any Queries please give it on the comment box below!
Watch video Awesome Landing Page & E-Commerce product card using html & css online without registration, duration hours minute second in high quality. This video was added by user W3Farmers Webtuts 13 October 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 839 once and liked it 16 people.