HTML Code Sample Responsive Web Design Layout 2 columns
<!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: #f1f1f1;
padding-left: 20px;
}
/* Sample image */
.divphotos {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>YOUR FULL NAME OR CODE NAME WEB NAME /COVER PHOTO </h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
<a href="profile.HTML">hISTORY OR PROFILE </a>
<a href="#PRODUCTS">PRODUCTS/SERVICES </a>
<a href="#CONTACTS">CONTACTS</a>
<a href="#LinkS" style="float:right">LinkS</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>MY ART AND PHOTOGRAPHY PORTFOLIO </h2>
<h5> PHOTOGRAPHY PORTFOLIO </h5>
<div class="divphotos" style="height:200px;">
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
</div>
<p>Some text..</p>
<p>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.</p>
</div>
<div class="card">
<h2>MY ART PORTFOLIO</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="divphotos" style="height:200px;">
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
</div>
<p>Some text..</p>
<p>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.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="divphotos" style="height:100px;">
<img src="german.jfif" alt="dogs" width= 150 height =80 valign="center" ></img>
<img src="german.jfif" alt="dogs" width= 150 height =80 valign="center" ></img>
</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="divphotos"><p> <img src="radialsymmetry.gif" alt="dogs" width= 300 height =150 valign="middle" ></img>
</p></div>
<div class="divphotos"><p> <img src="german.jfif" alt="dogs" width= 150 height =80 valign="middle" ></img>
</p></div>
<div class="divphotos"><p> <img src="german.jfif" alt="dogs" width= 150 height =80 valign="middle" ></img>
</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>your Social Media and Portfolio Links Here...</h2>
</div>
</body>
</html>
Comments
Post a Comment