Awesome Landing Page HTML CSS Within 15 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, Website ( Webpage ) Design basics has been going now,
Today, i described you "How To Create Professional Dropdown Menu When Hovering Over The Button Using
Pure CSS & HTML Within 22 Minutes".
from this video series you can learn basic, intermediate and advanced level html, css, some css transition
animation ( transition-duration, transition-delay, transition-timing-function and etc ) , button hover effects,
background images using background url method, transparent backgrounds, relative and absolute
positioning,floating elements in navbar menu, navbar creation, responsive design, css percentage units and pixel
units, css z-index, css transform, css before and after pseudo elements, how to create dropdown-menu, and
how to create caret symbol (triangle shape ), how to create a dropdown menu with caret symbol, how to join the
caret symbol to dropdown menu, css visibility : hidden and visibility : visible properties, css opacity property and it's
values, :hover pseudo class, border-radius properties and it's values, css border properties, css background
properties and its values, css box-shadow property, css flex layout ( display:flex ) , and how to centering
elements horzontally and vertically using flex layout and css transform and translate property and more stuffs...
We gives you a series of web design and development tutorials for free, landing pages design basics has been going now,
Today, i described you "How To Create Awesome Landing Page HTML CSS Within 15 Minutes".
from this video you can learn intermediate 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, font-size, font-family, font-weight, how to include google fonts, css overflow:hidden 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, .box ( full section ), .container ( contains all the elements of this section ), .menu class, nav ( navbar ), brand ( logo section ), ul for menu ( Home, About, Services, Contact are used in this video ), text content section ( h1, p and two anchor tags as buttons ) and .img-section ( right side image section ).
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 .box elements to take the device's height.
ii. give the styles to header:before and header:after elements, 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 40%r, to center the content box vertically center , a css transform trick ( top:50%, ,transform:translateY(-50%) ).
vi. Using the font Arial the text looks so amazing...
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 Landing Page HTML CSS Within 15 Minutes online without registration, duration hours minute second in high quality. This video was added by user W3Farmers Webtuts 22 September 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,923 once and liked it 154 people.