Breaking News: Grepper is joining You.com. Read the official announcement!

blog html css

Sivasubramaniyam V answered on July 12, 2023 Popularity 8/10 Helpfulness 2/10

answer blog html css

related blog template html css

blog html css

Comment

<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Blog Post Title</h2>
      <p>Author - Date</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis vestibulum quam, sit amet laoreet mauris. Curabitur tincidunt odio ut dui dapibus, eu faucibus odio suscipit. Vivamus condimentum tortor at massa tincidunt, ac scelerisque mi feugiat.</p>
      <a href="#">Read More</a>
    </article>

    <article>
      <h2>Another Blog Post Title</h2>
      <p>Author - Date</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis vestibulum quam, sit amet laoreet mauris. Curabitur tincidunt odio ut dui dapibus, eu faucibus odio suscipit. Vivamus condimentum tortor at massa tincidunt, ac scelerisque mi feugiat.</p>
      <a href="#">Read More</a>
    </article>
  </main>

  <footer>
    <p>&copy; 2023 My Blog. All rights reserved.</p>
  </footer>
</body>
</html>


/* Reset some default styles */
body, h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

/* Global styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 20px;
}

article {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
}

article h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

article p {
  margin-bottom: 10px;
}

article a {
  color: #333;
  text-decoration: none;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

Popularity 8/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css html

Link to this answer
Share Copy Link

Contributed on Jul 12 2023

Sivasubramaniyam V

0 Answers Avg Quality 2/10

Closely Related Answers

blog template html css

Comment

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Blog</title>
    <style>
      /* Reset some default styles */
      body, ul {
        margin: 0;
        padding: 0;
      }
      /* Blog post styles */
      .post {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f5f5f5;
      }
      .post h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      .post p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="post">
      <h2>Sample Blog Post</h2>
      <p>This is the content of the blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="post">
      <h2>Another Blog Post</h2>
      <p>This is another blog post content. Duis mollis placerat risus, ut eleifend ex fringilla ac.</p>
    </div>
  </body>
</html>

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

blog html css

Contents

More Related Answers

blog html css

Closely Related Answers

blog template html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.