From 8a086cea830f4a5f73a7c981a05704b76e71ca91 Mon Sep 17 00:00:00 2001
From: lok <lokprakash100@gmail.com>
Date: Sat, 1 Feb 2020 12:56:34 +0530
Subject: [PATCH] I have made some few changes

---
 about.html                | 229 +++++++++++++++++++++++++++++++++-----
 index.html                |   2 +-
 resources/style/style.css |  16 ++-
 3 files changed, 217 insertions(+), 30 deletions(-)

diff --git a/about.html b/about.html
index 07b0494a..96fedb63 100644
--- a/about.html
+++ b/about.html
@@ -48,42 +48,215 @@ <h1 class="animated bounce">The Complete Web Developer in 2020</h1>
       <h2 class="animated bounce">Course Content</h2>
 
       <ul class="list-group list-group-flush">
-        <li class="list-group-item">Introduction</li>
-        <li class="list-group-item">How The Internet Works</li>
-        <li class="list-group-item">History Of The Web</li>
-        <li class="list-group-item">HTML 5</li>
-        <li class="list-group-item">Advanced HTML 5</li>
-        <li class="list-group-item">CSS</li>
-        <li class="list-group-item">Advanced CSS</li>
-        <li class="list-group-item">
+        <li class="list-group-item dropDown">Introduction
+          <div class="dropDownContent">
+            <p>
+              In this you will be introduced with the course content and to the community.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">How The Internet Works
+        <div class="dropDownContent">
+            <p>
+              You'll learn how the internet works, inspecting the google, and what is the work of a developer.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">History Of The Web
+        <div class="dropDownContent">
+            <p>
+              You'll start from the history and get introduced with HTML, CSS and Javascript.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">HTML 5
+          <div class="dropDownContent">
+            <p>
+              You'll be learning the basic concepts of HTML such as tags, self closing tags, anchor tags.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">Advanced HTML 5
+          <div class="dropDownContent">
+            <p>
+              You'll be learning with advanced concepts such as submitting forms.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">CSS
+        <div class="dropDownContent">
+            <p>
+              You'll get to know about the CSS and some of the basics in CSS.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Advanced CSS
+        <div class="dropDownContent">
+            <p>
+              You'll get to know some advanced concepts such as animations.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">
           Bootstrap 4, Templates, And Building Your Startup Landing Page
+          <div class="dropDownContent">
+            <p>
+              You'll learn to  use bootstrap in your projects to make it look awesome.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">CSS Grid + CSS Layout
+          <div class="dropDownContent">
+            <p>
+              You'll learn one of the latest features of CSS known as CSS grid.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">Career Of A Web Developer
+        <div class="dropDownContent">
+            <p>
+              You'll know about the recent techs and how to cover your lack of experience.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Javascript
+          <div class="dropDownContent">
+            <p>
+              You'll get to know the power of Java script and implement your new power in a project.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">DOM Manipulation
+        <div class="dropDownContent">
+            <p>
+              You will learn what is meant by DOM and how to manipulate it in order to create some cool website.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Advanced Javascript
+        <div class="dropDownContent">
+            <p>
+              You'll learn some advanced concepts in javascripts such as currying, composing Etc.
+            </p>
+          </div>
         </li>
-        <li class="list-group-item">CSS Grid + CSS Layout</li>
-        <li class="list-group-item">Career Of A Web Developer</li>
-        <li class="list-group-item">Javascript</li>
-        <li class="list-group-item">DOM Manipulation</li>
-        <li class="list-group-item">Advanced Javascript</li>
-        <li class="list-group-item">Command Line</li>
-        <li class="list-group-item">Developer Environment</li>
-        <li class="list-group-item">Git + Github + Open Source Projects</li>
-        <li class="list-group-item">A Day In The Life Of A Developer</li>
-        <li class="list-group-item">NPM + NPM Scripts</li>
-        <li class="list-group-item">React.js + Redux</li>
-        <li class="list-group-item">
+        <li class="list-group-item dropDown">Command Line
+        <div class="dropDownContent">
+            <p>
+              You'll learn to use terminal/command prompt for the web development.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Developer Environment
+        <div class="dropDownContent">
+            <p>
+              You'll configure your editor to make it look like a pro.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Git + Github + Open Source Projects
+        <div class="dropDownContent">
+            <p>
+              You'll learn to contribute to an open source project by learning Git.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">A Day In The Life Of A Developer
+        <div class="dropDownContent">
+            <p>
+              A typical day of a developer.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">NPM + NPM Scripts
+        <div class="dropDownContent">
+            <p>
+              You'll get to know about NPM and how to setup NPM.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">React.js + Redux
+        <div class="dropDownContent">
+            <p>
+              You'll learn one of the upcoming technology known as React and Redux.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">
           HTTP/JSON/AJAX + Asynchronous Javascript
+          <div class="dropDownContent">
+            <p>
+              You'll get hands on in one of the important feature of ES8.
+            </p>
+          </div>
+        
         </li>
-        <li class="list-group-item">Backend Introduction</li>
-        <li class="list-group-item">APIs</li>
-        <li class="list-group-item">FINAL PROJECT: SmartBrain Front-End</li>
-        <li class="list-group-item">Node.js + Express.js</li>
-        <li class="list-group-item">
+        <li class="list-group-item dropDown">Backend Introduction
+        <div class="dropDownContent">
+            <p>
+              You'll be introduced with the backend.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">APIs
+        <div class="dropDownContent">
+            <p>
+              You'll be introduced with APIs and an optional exercise to explore more in it.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">FINAL PROJECT: SmartBrain Front-End
+        <div class="dropDownContent">
+            <p>
+              This is an ultimate part where you'll build the front end for your final project.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">Node.js + Express.js
+        <div class="dropDownContent">
+            <p>
+              You'll get to know about Node and Express.
+            </p>
+          </div>
+        </li>
+        <li class="list-group-item dropDown">
           FINAL PROJECT: SmartBrain Back-End -- Server
+          <div class="dropDownContent">
+            <p>
+              You'll build the backend for your final project.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">Databases
+          <div class="dropDownContent">
+            <p>
+              You'll learn about the databases.
+            </p>
+          </div>
+        
         </li>
-        <li class="list-group-item">Databases</li>
-        <li class="list-group-item">
+        <li class="list-group-item dropDown">
           FINAL PROJECT: SmartBrain Back-End -- Database
+          <div class="dropDownContent">
+            <p>
+              You'll confiure your final project with the database you have learned in this course.
+            </p>
+          </div>
+        
+        </li>
+        <li class="list-group-item dropDown">Production + Deployment
+        <div class="dropDownContent">
+            <p>
+              Finally, deployment.
+            </p>
+          </div>
         </li>
-        <li class="list-group-item">Production + Deployment</li>
         <li class="list-group-item">Where To Go From Here?</li>
         <li class="list-group-item">Bonus:Extra Bits</li>
         <li class="list-group-item">Extra: For Windows Users</li>
diff --git a/index.html b/index.html
index e4def38e..f5e4323a 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@ <h1>Web Development <br>
                         <div class="course-details-content">
                             <h2 class="animated bounce">Why this Course?</h2>
                             <p class="paragraph-block">
-                                <p>Do you dream about working as a web developer?</p>
+                                <p>Do you imagine yourself working as a web developer but don't know where to start</p>
                                 <p>You want to learn the basics that can get you up and running quickly?</p>
                                 <p>Do you want to make money in 2020?</p>
                                 <br>
diff --git a/resources/style/style.css b/resources/style/style.css
index 34b3c96e..6c192dbb 100644
--- a/resources/style/style.css
+++ b/resources/style/style.css
@@ -255,6 +255,20 @@ i:hover {
 .card-body {
   transition: all 0.2s ease-in;
 }
+.dropDown{
+  position: relative;
+  display: inline-block;
+}
+.dropDownContent{
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropDown:hover .dropDownContent {display: block;}
 
 .card:hover {
   background-color: #e6e6e6;
@@ -270,4 +284,4 @@ i:hover {
     margin-left: .5rem; 
     padding: 0px;
   }
-}
\ No newline at end of file
+}