home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - QuizApp</title>
    <link rel="stylesheet" href="homestyle.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="header">
        <p class="title">My Quiz App</p>
    </div>
    <div class="heading">
        <h1>Let's Play</h1>
        <p class="lead">Test your Skills</p>
    </div>

    <!-- carousel Implementation-->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="html.png" class="d-block w-50" alt="Html" style="margin-left: 25%;align-content:center;width:150px;height: 350px;">
            <div class="htmlcard1">
                <h5>HTML</h5>
                <p>If you want to test your html skills click below button</p>
                <button class="cta">
                    <span><a href="htmlQuiz.html" style="text-decoration: none;">Click me</a></span>
                    <svg width="15px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                    </svg>
                </button>
            </div>
          </div>
          <div class="carousel-item">
            <img src="css.jpg" class="d-block w-50" alt="Css" style="margin-left: 25%;align-content:center;width:150px;height: 350px;">
            <div class="csscard1">
            <h5>CSS</h5>
              <p>If you want to test your Css skills click below button</p>
              <button class="cta">
                <span><a href="cssQuiz.html" style="text-decoration: none;">Click me</a></span>
                <svg width="15px" height="10px" viewBox="0 0 13 10">
                  <path d="M1,5 L11,5"></path>
                  <polyline points="8 1 12 5 8 9"></polyline>
                </svg>
              </button>
            </div>
          </div>
          <div class="carousel-item">
            <img src="js.png" class="d-block w-50" alt="js" style="margin-left: 25%;align-content:center;width:150px;height: 350px;">
            <div class="jscard1">
            <h5>Java Script</h5>
              <p>If you want to test your java script skills click below button</p>
              <button class="cta">
                <span><a href="jsQuiz.html" style="text-decoration: none;">Click me</a></span>
                <svg width="15px" height="10px" viewBox="0 0 13 10">
                  <path d="M1,5 L11,5"></path>
                  <polyline points="8 1 12 5 8 9"></polyline>
                </svg>
              </button>
            </div>
          </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev" style="color: black;">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    <!-- <div class="footer">
        <p>Copy right Vardhan Creations</p>
    </div> -->
    <div class="fixed-bottom" id="footer">
        <p>&copy;Copy right Vardhan Creations</p>
    </div>
</body>
</html>