Awesome Responsive Landing Page HTML CSS Within 26 Minutes
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 javascript, testimonials, login pages, contact pages, blog pages design and development, image slider or slideshow or carousels, and 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 "How To Create Awesome Landing Page HTML CSS Within 26 Minutes".
from this video you can learn basics, intermediate & advanced level html & css, some css transition animation, button hover effects, background properties with images, transparent backgrounds, relative and absolute positions, floating li elements in navbar menu, navbar creation, responsive design, css percentage units, css z-index, css transform, 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, Services, Contact are used in this video ), text content ( h1, p and two anchor tags as buttons ).
4. then, finally styling the html elements, In this video, i am using internal styles using style tag in the head section.
i. give the height 100% to html, body and header elements to take the device's height.
ii. give the styles to header:before element, position absolute, height and width 100% to take 100% of the parent ( header element ), and give the background image ( i downloaded an image from google search ) , now the before element covers all the header's space, then z-index to -1 to move behind the header section.
iii. give the header element's background to black with alpha .7 like this ( rgba(0,0,0,.7) ). now the header element gets the blacky transparent look. i mean header:before's images shows slightly based on alpha value of header element.
iv. navbar section, for responsive purpose, we give 15% padding to right and left to the nav tag, then 20px to top and bottom to some whitespace.
v. now give the content width to 60% and text-align center, to align text within the content box center to the page, and to center this content box, a css transform trick ( top:50%, left:50%,transform:translate(-50%, -50%) ).
vi. using google fonts, all the texts looks cool....
i used lobster for h1, josefin Sans for a, li, p and pacifico for brand. u use fonts as u wish...
to follow us on facebook like our page,
/ w3farmers
/ computerteche
#w3farmers_landing_pages
#w3farmers_css_practices
Any Queries please give it on the comment box below!
Watch video Awesome Responsive Landing Page HTML CSS Within 26 Minutes online without registration, duration hours minute second in high quality. This video was added by user W3Farmers Webtuts 03 October 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,923 once and liked it 32 people.