html blog templates

<!DOCTYPE> <html> <head> <title>Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>

blog templates html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSR6SO04GHo8BYUFhCfYsa0zYFcJU3doLpeow&usqp=CAU">
<style>
* {
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body  {
  background-image: url("https://media.giphy.com/media/BHNfhgU63qrks/giphy.gif");
  background-color: #cccccc;
  font-family: Arial;
  padding: 20px;
}
p{
  color : rgb(255, 196, 0)
}
/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

/* 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;
}


.fakeimg {
  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;
}
h2{
  color : rgb(255, 0, 0)
}
/* 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;
  }
}
</style>
</head>
<body>
<div class="header">
  <title>SAM BLOG</title>
  <h2>SAM'S CODING BLOG</h2>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>EDITORS I USE</h2>
      <h5>Code Editors</h5>
      <img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/01/000-VS-Code.png" alt="vscode" width="400" height="333">
      <img src="https://pbs.twimg.com/profile_images/502135348663578624/-oslcYof.png" alt="p5js" width="400" height="333">
      <p></p>
      <p>.</p>
    </div>
    <div class="card">
      <h2>Follow Me On CodePen:</h2>
      <img src="https://assets.editor.p5js.org/5fb117e4611b90002435b515/fd822bc6-996f-426b-af9a-0565fd2566d0.jpg" alt="p5js" width="1000" height="333">
      <a href="https://codepen.io/ss2-apps" target="_blank" style="text-align:center;">CodePen</a>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <img src="https://assets.editor.p5js.org/5fb117e4611b90002435b515/eeef3c9c-4d68-42cc-91e2-c4595c33456d.jpg" alt="sam" width="300" height="333">
      <p>I am Sameeraz i am 13years old.</p>
    </div>
    <div class="card">
      <h3>Popular Websites</h3>
      <img src="https://assets.editor.p5js.org/5fb117e4611b90002435b515/f750eb79-7612-436b-b02b-460a7d2d03c8.jpg" alt="sam" width="300" height="333">
      <a href="https://samrecorder.netlify.app" target="_blank" style="text-align:center;">__________Visit This Website__________</a>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <a href="https://twitter.com/SAMEERAZ7" target="_blank" style="text-align:center;">______________Twitter_________________</a>
    </div>
  </div>
</div>

<div class="footer">
  <h2></h2>
</div>

</body>
</html>

Posted by: Guest on March-16-2021

Source

Code answers related to "html blog templates"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "html blog templates"

Code answers related to "html blog templates"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us