How to create a list group with css and html We will create a responsive and very simple list group with css and html. We will design a beautiful header with hoverable lists. Here is the list group Here is the source code <! DOCTYPE html > < html > < head > < title ></ title > < style type = "text/css" > .group-list { width : 100% ; height :auto; padding : 0 ; margin : 0 ; border-top : 1px solid #ddd ; border-left : 1px solid #ddd ; border-right : 1px solid #ddd; border-radius : 2px ; box-shadow : 0 0 2px 2px rgba( 0 , 0 , 0 , 0.1 ); } .group-list:first-child a { border-top-left-radius : 2px ; border-top-right-radius : 2px ; } .group-list:last-child a { border-bottom-left-radius : 2px ; border-bottom-right-radius : 2px ; } .group-list .header { background :#d32f2f ; color :#fff; } .group-list .h...
How to create a responsive accordion with html and css Accordions are useful when you want to toggle between hiding and showing large amount of content. We will create accordion with very simple and easy way. Here is the code <! DOCTYPE html > < html > < head > < style > button.accordion { background-color : #cb4d4d; color : #fff; cursor : pointer; padding : 18px ; width : 100% ; border : none; text-align : left; outline : none; font-size : 15px ; transition : 0.4s ; } button.accordion.active , button.accordion:hover { background-color : #7d1e1e; } button.accordion:after { /* Unicode character...
How to create a responsive hoverable dropdown menu in html and css. We will create a simple dropdown menu with html and css . When we move a mouse arrow on the button it will show the menu. It is very easy Here is the Drop down menu Here is the source code: <! DOCTYPE html > < html > < head > < style > .dropbtn { background-color : #48d1cc; color : white; padding : 16px ; font-size : 16px ; border : none; cursor : pointer; } .dropdown { position : relative; display : inline-block; } .dropdown-content { display : none; position : absolute; background-color : #f9f9f9; min-width ...
Comments
Post a Comment