Posts

How to create a Portfolio Gallery using HTML and CSS ?

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > create a port folio gallery </ title >     < link rel = "stylesheet" href = "style.Css" > == use this if make seperate css cheet <style> body {     padding : 15px ; } .container {     max-width : 1200px ;     margin : auto ; } h1 {     color : green ; } a {     text-decoration : none ;     color : #5673C8 ; } a:hover {     color : lightblue ; } p {     display : -webkit-box;     -webkit-box-orient : vertical ;     -webkit-line-clamp : 4 ;     overflow : hidden ; } .row {     margin : 0px -18px ;   ...

Build a Survey Form using HTML and CSS

 <!DOCTYPE html> <html lang="en">    <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content=         "width=device-width, initial-scale=1.0">     <title>         Build a Survey Form using HTML and CSS     </title>     <style>     body {     background-color: #05c46b;     font-family: Verdana;     text-align: center;     }     form {     background-color: #fff;     max-width: 500px;     margin: 50px auto;     padding: 30px 20px;     box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);     }     .form-control {     tex-align: left;     margin-bottom: 25px;     }     .form-control label {  ...

HTML ( LIST , TABLE & FORMS )

LIST , COMMAND <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>HTML LIST</title> </head> <body> <ul>    <ul type="circle">          type , command =" circle"   use for every line of the list     <li>Home</li>     <li>About</li>     <li>Services</li>     <li>Contacts</li>   </ul>   <oll>    <ol type="I">           if type="capital i "  resulted romin counting display on every line     <li>Home</li>     <li>About</li>     <li>Services</li>   ...

HTML ( SECTION , BLOCK & INLINE Elements list) ( DIV , & SPAN Commands)

Here are the block-level elements in HTML: < address > < article > < aside > < blockquote > < canvas > < dd > < div > < dl > < dt > < fieldset > < figcaption > < figure > < footer > < form > < h1 > - < h6 > < header > < hr > < li > < main > < nav > < noscript > < ol > < p > < pre > < section > < table > < tfoot > < ul > < video > Inline Elements An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is  a <span> element inside  a paragraph. Example < span > Hello World < /span > Try it Yourself » Here are the inline elements in HTML: < a > < abbr > < acronym > < b > < bdo > < big > < br > < button > < cite > < code > < dfn > < em > < i > < img ...

HTML ( DIV & SPAN ) commands

 DIV : Is an example of block eliment SPAN: is an example of inline eliment < section >             < div >                 < h1 > why love HTML </ h1 >                 < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium neque omnis maxime ipsum expedita rerum autem molestias reiciendis molestiae voluptates deserunt architecto earum consequuntur dolor debitis esse accusamus, officiis soluta enim dolorum exercitationem alias ducimus! Odio accusantium unde, ad quas dolores voluptas totam tempore atque iste itaque, ducimus commodi nulla.                 </ p >                 <!-- div is an example of block eliment -->             </ div >             < div > ...

HTML ( HEADER , MAIN , FOOTER ) command uses

 Header & Footer is not imp[ortant but MAIN command is very important   < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=header, initial-scale=1.0" >     < title > chapter3 </ title > </ head > < body >     < header >         this is header     </ header >     < main >         < p > this is the main content </ p >     </ main >     < footer >          this is footer     </ footer >     </ body > </ html >

HTML ( for hide any words from web )

 PRESS CTRL+/ (slash) <!-- bold itlic underline -->