index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/utils.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/mobile.css" />
    <title>CodeBloggers - A Blogging website for Web Developers</title>
  </head>

  <body>
    <nav class="navigation max-width-1 m-auto">
      <div class="nav-left">
        <a href="/">
          <span>CodeBloggers</span>
        </a>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/contact.html">Contact</a></li>
        </ul>
      </div>
      <div class="nav-right">
        <form action="/search.html" method="get">
          <input
            class="form-input"
            type="text"
            name="query"
            placeholder="Article Search"
          />
          <button class="btn">Search</button>
        </form>
      </div>
    </nav>
    <div class="max-width-1 m-auto">
      <hr />
    </div>
    <div class="m-auto content max-width-1 my-2">
      <div class="content-left">
        <h1>A Blogging website for Web Developers</h1>
        <p>
          CodeBloggers is a website which lets you submit an article about Web
          Development which upon approval will be up on our website and you can
          get a good amount of reach from here!
        </p>
        <p>
          "Web development is the process of creating and maintaining websites.
          It involves various technologies such as HTML, CSS, and JavaScript to
          design and build interactive and visually appealing web pages. Web
          developers use their coding skills to bring ideas to life, making the
          internet a dynamic and engaging platform for users worldwide."
        </p>
      </div>
      <div class="content-right">
        <img src="img/bg.png.png" alt="iBlog" />
      </div>
    </div>

    <div class="max-width-1 m-auto">
      <hr />
    </div>
    <div class="home-articles max-width-1 m-auto font2">
      <h2>Featured Articles</h2>
      <div class="home-article">
        <div class="home-article-img">
          <img src="img/html5-banner" alt="article" />
        </div>
        <div class="home-article-content font1">
          <a href="/blogpost.html">
            <h3>HTML5: The Next Generation of Web Markup</h3>
          </a>

          <div>Gautam Bhatt</div>
          <span>07 January | 6 min read</span>
        </div>
      </div>
      <div class="home-article">
        <div class="home-article-img">
          <img src="img/css-banner" alt="article" />
        </div>
        <div class="home-article-content font1">
          <a href="/blogpost.html">
            <h3>Introduction to CSS</h3>
          </a>

          <div>Ritik Pal</div>
          <span>07 January | 6 min read</span>
        </div>
      </div>
      <div class="home-article">
        <div class="home-article-img">
          <img src="img/javascript-banner" alt="article" />
        </div>
        <div class="home-article-content font1">
          <a href="/blogpost.html">
            <h3>Introduction to Javascript</h3>
          </a>

          <div>Shivani Kumari</div>
          <span>07 January | 6 min read</span>
        </div>
      </div>
    </div>

    <div class="footer">
        <span>CodeBloggers - A Blogging website for Web Developers</span>
      <p>Copyright &copy; made by gautam bhatt | All rights reserved</p>
      
    </div>
  </body>
</html>