diff --git a/course-main-page.html b/course-main-page.html
index 00b489d..28ffb67 100644
--- a/course-main-page.html
+++ b/course-main-page.html
@@ -3,132 +3,168 @@
  <head>
   <title>Course Page</title>
   <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
-  <style>
-	@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
-.transition {
-  transition: .3s cubic-bezier(.3, 0, 0, 1.3)
-}
-
-.card {
-  background-color: #fff;
-  height: 400px;
-  width: 300px;
-  position: relative;
-  margin: 20px;
-  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-  overflow: hidden;
-  float:left;
-}
-
-.card:hover {
-  box-shadow: 0px 30px 30px rgba(0,0,0,0.2);
-}
-
-.card_circle {
-  height: 380px;
-  width: 450px;
-  background-color: #2196F3;
-  position: absolute;
-  border-radius: 50%;
-  margin-left: -75px;
-  margin-top: -270px;
-}
-
-.card:hover .card_circle {
-  border-radius: 0;
-  margin-top: -270px;
-}
-
-h2 {
-  text-align: center;
-  margin-top: 210px;
-  position: absolute;
-  z-index: 1;
-  font-size: 26px;
-  color: #2196F3;
-  width: 100%;
-  font-family: 'Noto Sans', serif;
-}
-
-h2 small {
-  font-weight: normal;
-  font-size: 65%;
-  color: #2b2b2b;
-  padding: 0 10px;
-  line-height:0.5;
-}
-
-.card:hover h2 {
-  margin-top: 15px;
-  color: #fff;
-}
-
-.card:hover h2 small {
-  color: #fff;
-}
-
-p {
-  color:#2b2b2b; 
-  position: absolute;
-  bottom:-100%;
-  padding: 20px;
-  font-family: 'Noto Sans', serif;
-  font-size:17px;
- 
-}
-
-.card:hover .pone{
-  bottom:0%;
-}
-.card:hover .ptwo{
-  bottom:15%;
-}
-.card:hover .pthree{
-  bottom:15%;
-}
-
-.fa, .fas, .fab{
-	position: absolute;
-    z-index: 1;
-	top: 150px;
-    left: 40%;
-	font-size:55px;
-}
-
-.fa-user-circle{
-	color:#2b2b2b;
-}
-.card:hover .fa, .card:hover .fas, .card:hover .fab{
-	top: -60px;
-}
-
-.card:hover .fa-user-circle{
-	color:#fff;
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="css/course-main-page.css">
  </head>
  <body>
-    <h1>DEFINITION</h1>
+   <h1>Courses</h1>
+    <div class="container-fluid" id="big_data">
+      <h3>Big Data</h3>
       <div class="card transition">
       <i class="fas fa-book transition"></i>
-      <h2 class="transition">Oxford Dictionary<br><small>Search Engine Optimization</small></h2>
+      <h2 class="transition">Big Data 1<br><small>Small Introduction</small></h2>
       <div class="card_circle transition"></div>
-        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with search engine optimization and social media marketing’</p> 
+        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with Small Introduction and social media marketing’</p> 
       </div>
 
       <div class="card transition">
-      <i class="fab fa-wikipedia-w transition"></i>
-      <h2 class="transition">Wiki<br><small>Search Engine Optimization</small></h2>
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Big Data 2<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition ptwo">SEO is the process of affecting the visibility of a website or a web page in a web search engine's unpaid results — often referred to as "natural," "organic," or "earned" results.</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Big Data 3<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Big Data 4<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+    </div>
+	 
+
+    <div class="container-fluid" id="big_data">
+      <h3>Machine Learning</h3>
+      <div class="machine_learning">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Machine Learning 1<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with Small Introduction and social media marketing’</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Machine Learning 2<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition ptwo">SEO is the process of affecting the visibility of a website or a web page in a web search engine's unpaid results — often referred to as "natural," "organic," or "earned" results.</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Machine Learning 3<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Machine Learning 4<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+    </div>
+	 
+
+    <div class="container-fluid" id="devops">
+      <h3>DevOps</h3>
+      <div class="machine_learning">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">DevOps 1<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with Small Introduction and social media marketing’</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">DevOps 2<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition ptwo">SEO is the process of affecting the visibility of a website or a web page in a web search engine's unpaid results — often referred to as "natural," "organic," or "earned" results.</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">DevOps 3<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">DevOps 4<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+    </div>
+	 
+	 
+    <div class="container-fluid" id="cloud_computing">
+      <h3>Cloud Computing</h3>
+      <div class="machine_learning">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Cloud Computing 1<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with Small Introduction and social media marketing’</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Cloud Computing 2<br><small>Small Introduction</small></h2>
       <div class="card_circle transition"></div>
         <p class="transition ptwo">SEO is the process of affecting the visibility of a website or a web page in a web search engine's unpaid results — often referred to as "natural," "organic," or "earned" results.</p> 
       </div>
 
       <div class="card transition">
-      <i class="fab fa-cuttlefish transition"></i>
-      <h2 class="transition">Climb Online<br><small>Search Engine Optimization</small></h2>
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Cloud Computing 3<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Cloud Computing 4<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+    </div>
+	 
+	 
+   <div class="container-fluid" id="web_development">
+      <h3>Web Development</h3>
+      <div class="machine_learning">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Web Development 1<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition pone">The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.<br>‘the key to getting more traffic lies in integrating content with Small Introduction and social media marketing’</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Web Development 2<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="transition ptwo">SEO is the process of affecting the visibility of a website or a web page in a web search engine's unpaid results — often referred to as "natural," "organic," or "earned" results.</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Web Development 3<br><small>Small Introduction</small></h2>
+      <div class="card_circle transition"></div>
+        <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
+      </div>
+
+      <div class="card transition">
+      <i class="fas fa-book transition"></i>
+      <h2 class="transition">Web Development 4<br><small>Small Introduction</small></h2>
       <div class="card_circle transition"></div>
         <p class="tran  sition pthree">SEO is a marketing discipline that aims to improve the organic position of a website within the Search Engine Results Pages [SERPs].</p> 
       </div>
+    </div>
+  
     </body>
   </html>
