home.html

  <div class="container text-center">
    <div class="row justify-content-center">
      <div class="col-10 col-md-10 col-lg-8 col-xl-7">
        <h4 class="display-4 text-primary mt-3 mb-2">Meeting Log</h4>
        <p class="lead">
          This simple app creates meetings, allows people to check in, and
          picks random users to award giveaways. It's a good example of a
          Single Page Application which includes connection to a database and
          routing. It's a practical way to learn
          <a href="https://vuejs.org/">Vue.js</a>
          with
          <a href="https://firebase.google.com">Firebase</a>.
        </p>

        <router-link
          class="btn btn-outline-primary mr-2"
          to="/register"
        >Register</router-link>
        <router-link
          class="btn btn-outline-primary mr-2"
          to="/login"
        >Log In</router-link>
        <router-link
          class="btn btn-primary"
          to="/meetings"
        >Meetings</router-link>
      </div>
    </div>
  </div>

Tes

What is the design

Rdd

body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
direction: rtl;
}

header {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}

nav a {
margin: 0 10px;
color: #fff;
text-decoration: none;
}

.hero {
text-align: center;
padding: 30px;
background-color: #ddd;
}

.products {
display: flex;
justify-content: center;
gap: 20px;
padding: 30px;
}

.product {
background-color: white;
padding: 15px;
border-radius: 8px;
width: 250px;
box-shadow: 0 0 5px #aaa;
text-align: center;
}

.product img {
width: 100%;
}

button {
background-color: #007bff;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

footer {
text-align: center;
padding: 20px;
background-color: #222;
color: white;
margin-top: 30px;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
direction: rtl;
}

header {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}

nav a {
margin: 0 10px;
color: #fff;
text-decoration: none;
}

.hero {
text-align: center;
padding: 30px;
background-color: #ddd;
}

.products {
display: flex;
justify-content: center;
gap: 20px;
padding: 30px;
}

.product {
background-color: white;
padding: 15px;
border-radius: 8px;
width: 250px;
box-shadow: 0 0 5px #aaa;
text-align: center;
}

.product img {
width: 100%;
}

button {
background-color: #007bff;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

footer {
text-align: center;
padding: 20px;
background-color: #222;
color: white;
margin-top: 30px;
}