Posts

Showing posts from April, 2021

HTML Code Flexbox Responsive Photo Gallery

View the Output of this Code  <!DOCTYPE html> <html> <style> * {   box-sizing: border-box; } body {   margin: 0;   font-family: Arial; } .header {   text-align: center;   padding: 32px; } .row {   display: flex;   flex-wrap: wrap;   padding: 0 4px; } /* Create four equal columns that sits next to each other */ .column {   flex: 25%;   max-width: 25%;   padding: 0 4px; } .column img {   margin-top: 8px;   vertical-align: middle; } /* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) {   .column {     flex: 50%;     max-width: 50%;   } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) {   .column {     flex: 100%;     max-width: 100%;   } } </style> <body> <!-- Header --> <div class="header"...
Post a Comment
Read more

Flexible Responsive Photo Gallery

Image
Responsive Image Grid Resize the browser window to see the responsive effect.
Post a Comment
Read more

HTML Sample 2 columns iframe

Remove the Iframe Border To remove the default border of the iframe, use CSS:
Post a Comment
Read more

HTML Code / Output : Iframe and Drop Down Menu

Image
Home Contacts Javascript Switch Events onLoad HTML Horizontal 2 Columns 3 Columns onLoad HOME Fixed Full-height Side Nav Try to scroll this area, and see how the sidenav sticks to the page Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div. Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it). News Contacts FACEBOOK INSTAGRAM YOUTUBE FACEBOOK INSTAGRAM YOUTUBE FACEBOOK INSTAGRAM YOUTUBE About TEAM PROFILE BUSINESS PROCESS MISSION /VISION /PHILOSOPHY Some text.. Some text.. S...
Post a Comment
Read more

HTML Jframe and Drop Down Menu

 <!DOCTYPE html> <html> <head> <style> iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #333; } .navbar a {   float: left;   font-size: 16px;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color: white;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn {   background-color: orange; } .dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   z-index: 1; } .dropdown-content a {   float: none;  ...
Post a Comment
Read more

HTML CODE HORIZONTAL NAVIGATION BAR RESPONSIVE WEB DESIGN LAYOUT

 <!DOCTYPE html> <html> <head> <style> ul {   list-style-type: none;   margin: 0;   padding: 0;   overflow: hidden;   background-color: #333; } li {   float: left;   border-right:1px solid #bbb; } li:last-child {   border-right: none; } li a {   display: block;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; } li a:hover:not(.active) {   background-color: #111; } .active {   background-color: #4CAF50; } </style> </head> <body> <ul>   <li><a class="active" href="#home">Home</a></li>   <li><a href="#news">News</a></li>   <li><a href="#contact">Contact</a></li>   <li style="float:right"><a href="#about">About</a></li> </ul> <div style="padding:1px 16px;height:1000px; WIDTH=100%">   <h2 id="home...
Post a Comment
Read more

HTML CODE FULL LENGTH SIDE BAR 2 COLUMNS RESPONSIVE WEB DESIGN LAYOUT

Image
 <!DOCTYPE html> <html> <head> <style> body {   margin: 0; } ul {   list-style-type: none;   margin: 0;   padding: 0;   width: 25%;   background-color: #f1f1f1;   position: fixed;   height: 100%;   overflow: auto; } li a {   display: block;   color: #000;   padding: 8px 16px;   text-decoration: none; } li a.active {   background-color:#000;   color: white; } li a:hover:not(.active) {   background-color: #555;   color: white; } </style> </head> <body> <ul>   <li><a class="active" href="#home">Home</a></li>   <li><a href="#news">News</a></li>   <li><a href="#contact">Contact</a></li>   <li><a href="#about">About</a></li> </ul> <div style="margin-left:25%;padding:1px 16px;height:1000px;">   <h2 id="home"> HOME Fixed F...
Post a Comment
Read more

HTML Code Sample Responsive Web Design Layout 2 columns

Image
view the Output   <!DOCTYPE html> <html> <head> <style> * {   box-sizing: border-box; } body {   font-family: Arial;   padding: 10px;   background: #f1f1f1; } /* Header/Blog Title */ .header {   padding: 30px;   text-align: center;   background: white; } .header h1 {   font-size: 50px; } /* Style the top navigation bar */ .topnav {   overflow: hidden;   background-color: #333; } /* Style the topnav links */ .topnav a {   float: left;   display: block;   color: #f2f2f2;   text-align: center;   padding: 14px 16px;   text-decoration: none; } /* Change color on hover */ .topnav a:hover {   background-color: #ddd;   color: black; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn {      float: left;   width: 75%; } /* Right column */ .rightcolumn {   float: left;   width: 25%;   background-color:...
Post a Comment
Read more

HTML 2 Columns Responsive Web Design Layout Output

Image
YOUR FULL NAME OR CODE NAME WEB NAME /COVER PHOTO Resize the browser window to see the effect. hISTORY OR PROFILE PRODUCTS/SERVICES CONTACTS LinkS MY ART AND PHOTOGRAPHY PORTFOLIO PHOTOGRAPHY PORTFOLIO Some text.. Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. MY ART PORTFOLIO Title description, Sep 2, 2017 Some text.. Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
Post a Comment
Read more

CSS Layout 3 Rows 3 Columns Grid

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Create three columns that floats next to each other */ .column1 {   float: left;   width: 15%;   padding: 10px;   height: 500px; /* Should be removed. Only for demonstration */   background-color:#8A410A;   color:white; } .column2 {   border: 10px solid #aaa;   float: left;   width: 70%;   padding: 10px;   height: 500px; /* Should be removed. Only for demonstration */ } .column3 {   float: right;   width: 15%;   padding: 10px;   height: 500px; /* Should be removed. Only for demonstration */   background-color:#8A410A;   color:white;    } * {   box-sizing: border-box; } .row::after {   content: "";   clear: both;   display: table; } [class*="col-"] {   float: left;   padding: 15px; } html {   font-family: "Lucida San...
Post a Comment
Read more

3 COLUMN RESPONSIVE LAYOUT

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {   box-sizing: border-box; } /* Create three equal columns that floats next to each other */ .column {   float: left;   width: 33.33%;   padding: 10px;   height: 300px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after {   content: "";   display: table;   clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {   .column {     width: 100%;   } } </style> </head> <body> <h2>Responsive Three Column Layout</h2> <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p> ...
Post a Comment
Read more

create 1 row 2 columns layout in HTML and CSS

Image
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {   box-sizing: border-box; } .row {   display: flex; } /* Create two equal columns that sits next to each other */ .column {   flex: 50%;   padding: 10px;   height: 300px; /* Should be removed. Only for demonstration */ } </style> </head> <body> <h2>Two Equal Columns</h2> <div class="row">   <div class="column" style="background-color:#aaa;">     <h2>Column 1</h2>     <p>Some text..</p>   </div>   <div class="column" style="background-color:#bbb;">     <h2>Column 2</h2>     <p>Some text..</p>   </div> </div> </body> </html>
Post a Comment
Read more