diff --git a/NBA Images/alleniverson.jpg b/NBA Images/alleniverson.jpg
new file mode 100644
index 0000000..34eab17
Binary files /dev/null and b/NBA Images/alleniverson.jpg differ
diff --git a/NBA Images/kareemabduljabber.jpg b/NBA Images/kareemabduljabber.jpg
new file mode 100644
index 0000000..2211301
Binary files /dev/null and b/NBA Images/kareemabduljabber.jpg differ
diff --git a/NBA Images/kevindurant.jpg b/NBA Images/kevindurant.jpg
new file mode 100644
index 0000000..48339d1
Binary files /dev/null and b/NBA Images/kevindurant.jpg differ
diff --git a/NBA Images/kobebryant.jpg b/NBA Images/kobebryant.jpg
new file mode 100644
index 0000000..d178ec6
Binary files /dev/null and b/NBA Images/kobebryant.jpg differ
diff --git a/NBA Images/larrybird.jpg b/NBA Images/larrybird.jpg
new file mode 100644
index 0000000..1cd553c
Binary files /dev/null and b/NBA Images/larrybird.jpg differ
diff --git a/NBA Images/lebronjames.jpg b/NBA Images/lebronjames.jpg
new file mode 100644
index 0000000..6929984
Binary files /dev/null and b/NBA Images/lebronjames.jpg differ
diff --git a/NBA Images/magicjohnson.jpg b/NBA Images/magicjohnson.jpg
new file mode 100644
index 0000000..9c77d17
Binary files /dev/null and b/NBA Images/magicjohnson.jpg differ
diff --git a/NBA Images/michaeljordan.jpg b/NBA Images/michaeljordan.jpg
new file mode 100644
index 0000000..bb2561e
Binary files /dev/null and b/NBA Images/michaeljordan.jpg differ
diff --git a/NBA Images/stephcurry.jpg b/NBA Images/stephcurry.jpg
new file mode 100644
index 0000000..184fa3a
Binary files /dev/null and b/NBA Images/stephcurry.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ae1474e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,189 @@
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    
+    <title>Favorite Basketball Players</title>
+    
+    <!-- CSS -->
+    <link rel="stylesheet" href="styles.css">
+
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+    
+</head>
+
+<body> 
+
+  <div class="navbar">
+  <h4>COPIOUS SPORTS</h4>
+  <a class="active" href="#home">HOME</a>
+  <a href="#players">PLAYERS</a>
+  <a href="#about">ABOUT</a>
+  <a href="#blog">BLOG</a>
+  <a href="#contact">CONTACT</a>
+  </div>
+  
+
+  <div class="card-group">
+    <div class="card">
+      <img class="card-img-top" src="NBA Images/michaeljordan.jpg" alt="Card image cap">
+      <div class="card-body">
+        <h5 class="card-title">MICHAEL JORDAN</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+    <div class="card">
+      <img class="card-img-top" src="NBA Images/magicjohnson.jpg" alt="Card image cap">
+      <div class="card-body">
+        <h5 class="card-title">MAGIC JOHNSON</h5>
+        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+    <div class="card">
+      <img class="card-img-top" src="NBA Images/lebronjames.jpg" alt="Card image cap">
+      <div class="card-body">
+        <h5 class="card-title">LEBRON JAMES</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+  </div>
+
+    
+
+    <div class="card-group">
+      <div class="card">
+        <img class="card-img-top" src="NBA Images/larrybird.jpg" alt="Card image cap">
+        <div class="card-body">
+          <h5 class="card-title">LARRY BIRD</h5>
+          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        </div>
+        <div class="card-footer">
+          <small class="text-muted">Last updated 3 mins ago</small>
+        </div>
+      </div>
+      <div class="card">
+        <img class="card-img-top" src="NBA Images/alleniverson.jpg" alt="Card image cap">
+        <div class="card-body">
+          <h5 class="card-title">ALLEN IVERSON</h5>
+          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+        </div>
+        <div class="card-footer">
+          <small class="text-muted">Last updated 3 mins ago</small>
+        </div>
+      </div>
+      <div class="card">
+        <img class="card-img-top" src="NBA Images/kobebryant.jpg" alt="Card image cap">
+        <div class="card-body">
+          <h5 class="card-title">KOBE BRYANT</h5>
+          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
+        </div>
+        <div class="card-footer">
+          <small class="text-muted">Last updated 3 mins ago</small>
+        </div>
+      </div>
+    </div>
+
+      <div class="card-group">
+        <div class="card">
+          <img class="card-img-top" src="NBA Images/kareemabduljabber.jpg" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title">KAREEM ABDUL JABBAR</h5>
+            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+          </div>
+          <div class="card-footer">
+            <small class="text-muted">Last updated 3 mins ago</small>
+          </div>
+        </div>
+        <div class="card">
+          <img class="card-img-top" src="NBA Images/stephcurry.jpg" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title">STEPHEN CURRY</h5>
+            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+          </div>
+          <div class="card-footer">
+            <small class="text-muted">Last updated 3 mins ago</small>
+          </div>
+        </div>
+        <div class="card">
+          <img class="card-img-top" src="NBA Images/kevindurant.jpg" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title">KEVIN DURANT</h5>
+            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
+          </div>
+          <div class="card-footer">
+            <small class="text-muted">Last updated 3 mins ago</small>
+          </div>
+        </div>
+      </div>
+      <!-- button -->
+
+      <button type="text" class="button">Older Post</button>
+      
+      
+        <!-- Footer -->
+        <footer class="footer">
+          <div class="container py-5">
+            <div class="row py-4">
+              <div class="col-lg-4 col-md-6 mb-4 mb-lg-0"><img src="img/logo.png" alt="" width="180" class="mb-3">
+                <h2 style="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:red">COPIOUS SPORTS</h2>
+                <p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+                <ul class="list-inline mt-4">
+                  <li class="list-inline-item"><a href="#" target="_blank" title="twitter"><i class="fa fa-twitter"></i></a></li>
+                  <li class="list-inline-item"><a href="#" target="_blank" title="facebook"><i class="fa fa-facebook"></i></a></li>
+                  <li class="list-inline-item"><a href="#" target="_blank" title="instagram"><i class="fa fa-instagram"></i></a></li>
+                  <li class="list-inline-item"><a href="#" target="_blank" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
+                  <li class="list-inline-item"><a href="#" target="_blank" title="vimeo"><i class="fa fa-vimeo"></i></a></li>
+                </ul>
+              </div>
+              <div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
+                <h6 class="text-uppercase font-weight-bold mb-4">Resent Post</h6>
+                <ul class="list-unstyled mb-0">
+                  <li class="mb-2"><a href="#" class="text-muted">Top 5 Dead or Alive</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">Positionless</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">The Goat</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">College For What?</a></li>
+                </ul>
+              </div>
+              <div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
+                <h6 class="text-uppercase font-weight-bold mb-4">Social Media</h6>
+                <ul class="list-unstyled mb-0">
+                  <li class="mb-2"><a href="#" class="text-muted">Facebook</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">Twitter</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">Instagram</a></li>
+                  <li class="mb-2"><a href="#" class="text-muted">YouTube</a></li>
+                </ul>
+              </div>
+              <div class="col-lg-4 col-md-6 mb-lg-0">
+                <h6 class="text-uppercase font-weight-bold mb-4">Subscribe</h6>
+                <p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.</p>
+                <div class="p-1 rounded border">
+                  <div class="input-group">
+                    <input type="email" placeholder="Enter email" aria-describedby="button-addon1" class="form-control border-0 shadow-0">
+                    <div class="input-group-append">
+                      <button id="button-addon1" type="submit"` class="btn btn-link"><i class="fa fa-paper-plane"></i></button>
+                    </div>
+                      <button type="text" class="btn-subscribe">SUBSCRIBE</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="copyright">
+                  <p></p></div>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..1b58343
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,118 @@
+/* black background for navbar */
+.navbar {
+    background-color: black;
+    overflow: hidden;
+    margin-bottom: 5px;
+    margin-top: 5px;
+  
+  }
+  
+  /* navbar text */
+  .navbar a {
+    color: #f2f2f2;
+    font-weight: bold;
+    padding-top: 0px;
+    padding-left: 10px;
+    text-decoration: none;
+    font-size: 11px;
+    margin-right: 50px;
+    margin-left: 0px;
+  }
+
+  /* Change the color of links with hover */
+  .navbar a:hover {
+    background-color: rgb(165, 154, 154);
+    color: black;
+  }
+
+  /* Card group css */
+  .card-group{
+    margin-left: 60px;
+    margin-right: 60px;
+    
+  }
+
+  .card{
+    margin: 10px 10px 10px 10px;
+  }
+  
+  .card-body{
+    height: 140px;
+
+  }
+  .card-text{
+    font-size: 13px;
+    padding-top: 0%;
+  }
+  
+  .card-title{
+    text-align: center;
+    font-weight: bold;
+  }
+
+/* Copious Sports */
+  h4{
+    margin-left: 0px;
+    margin-top: 70px;
+    margin-right: 230px;
+    font-family: Impact;
+    color: red;
+    padding-top: 10px;
+    padding-left: 50px;
+  }
+ 
+  .button{
+    border-radius: 5px;
+    background-color: black;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    margin-left: 70px;
+    margin-top: 50px; 
+    margin-bottom: 0px;
+    width: 150px; 
+    
+  }
+
+  footer{
+    background: #000000;
+    background-size: 10px;
+    color:white;
+    margin-top: 50px;
+   
+    
+    .links{
+      ul list-style-type: none;
+      li a{
+        color: white;
+        transition: color .2s;}
+        &:hover{
+          text-decoration:none;
+          color: #4180CB;
+        padding-top: 10px; 
+        padding-bottom: 0px;
+      }
+      
+      
+    .about-company{
+      i{font-size: 25px;}
+    }
+      a{
+        color:white;
+        transition: color .2s;
+        &:hover{color:#4180CB}
+      }
+   
+    .location{
+      i{font-size: 18px;}
+  
+      } 
+
+    h3{
+    font-family: Impact;
+    color: red;
+    }
+    
+    .copyright{
+      font-size: 2px;
+    }
