PHGusto ko kasi na mapaganda pa po anu po ma susuggest niyo for my simple blog site di po saaken to kung baga po ginaya ko
lang siya
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: Arial;
padding: 20px;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #f44;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #f44;
width: 100%;
padding: 20px;
background-image: url("alex.jpg");
background-size:cover;
}
/* 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: #f44;
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;
}
}a
</style>
<title>my blog site</title>
</head>
<body>
<div class="header">
<h2>Email</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, September 25 2018</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 25, 2018</h5>
<div class="fakeimg" style="height:200px;"></div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class=""></div><br>
<div class=""></div><br>
<div class=""></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>email</p>
<p>email</p>
<p>email</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
