Jack Man Jack Man - 6 months ago 15
jQuery Question

Why are my links leaking for my profile picture on my website?

I have a div that shows the instructors information. On click of their username or picture, the user will go to their instructor page. However, when I hover over the instructor picture, a blue line appears and I noticed there is an entire section of leaked link information.



/* clear settings */

body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */

/* nav */

#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */

/* courses.php */

/* course intro */

#course_body {
background: #F4F4F4;
}

#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}

#intro_title {
width: 562px;
position: relative;
top: 2px;
}

#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}

/* end of course intro */

/* course facts */

#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 750px;
font-size: 20px;
height: 115px;
}

.Rating {
position: relative;
width: 125px;
height: 25px;
top: -5px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}

#facts_ratings {
position: relative;
top: -6px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

#course_length {
position: relative;
top: -57px;
left: 200px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
position: relative;
top: -84px;
left: 280px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}

.fillSquare {
width: 12px;
height: 12px;
background: #666;
}

.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}

#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}

/* end of skill level */

/* Wish List button */

#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}

#empty_heart {
color: #FF827F;
}

#course_wish_text {
position: relative;
left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
}

#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
position: relative;
left: 120px;
top: 3px;
}

#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
position: relative;
top: -15px;
width: 325px;
}

#teacher_div a {
text-decoration: none;
color: #00698C;
}

#teacher_div a:hover {
text-decoration: underline;
}

#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
position: relative;
top: -15px;
}

/* End of Teacher div */

/* end of courses.php */

<?php

require "connect.php";

?>

<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>

<body id='course_body'>
<!-- nav -->
<div id='nav'>

</div>
<!-- end of nav -->

<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Programming Languages</a></li>
<li><a href="#">Game Development</a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Software Testing</a></li>
<li><a href="#">Software Engineering</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">E-Commerce</a></li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a></li>
<li><a href="#">Entrepreneurship</a></li>
<li><a href="#">Communications</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Data and Anylytics</a></li>
<li><a href="#">Home Business</a></li>
<li><a href="#">Human Resources</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a></li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a></li>
<li><a href="#">Operating Systems</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a></li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a></li>
<li><a href="#">SAP</a></li>
<li><a href="#">Intuit</a></li>
<li><a href="#">Salesforce</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a></li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a></li>
<li><a href="#">Personal Finance</a></li>
<li><a href="#">Career Development</a></li>
<li><a href="#">Parenting & Relationships</a></li>
<li><a href="#">Happiness</a></li>
<li><a href="#">Religion & Spirituality</a></li>
<li><a href="#">Personal Brand Building</a></li>
<li><a href="#">Creativity</a></li>
<li><a href="#">Influence</a></li>
<li><a href="#">Self Esteem</a></li>
<li><a href="#">Stress Management</a></li>
<li><a href="#">Memory and Study Skills</a></li>
<li><a href="#">Motivation</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a></li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a></li>
<li><a href="#">User Experience</a></li>
<li><a href="#">Game Design</a></li>
<li><a href="#">Design Thinking</a></li>
<li><a href="#">3D & Animation</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Architectural Design</a></li>
<li><a href="#">Interior Design</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a></li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Marketing Fundamentals</a></li>
<li><a href="#">Analystics & Automation</a></li>
<li><a href="#">Public Relations</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Video & Mobile Marketing</a></li>
<li><a href="#">Content Marketing</a></li>
<li><a href="#">Non-Digital Marketing</a></li>
<li><a href="#">Growth Hacking</a></li>
<li><a href="#">Affiliate Marketing</a></li>
<li><a href="#">Product Marketing</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a></li>
<li class="dir"><a href="#">Arts & Crafts</a></li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Home Improvement</a></li>
<li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a></li>
<li class="dir"><a href="#">Photography Fundamentals</a></li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a></li>
<li><a href="#">Black & White</a></li>
<li><a href="#">Photography Tools</a></li>
<li><a href="#">Mobile Photography</a></li>
<li><a href="#">Travel Photography</a></li>
<li><a href="#">Commercial Photography</a></li>
<li><a href="#">Wedding Photography</a></li>
<li><a href="#">Video Design</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a></li>
<li class="dir"><a href="#">General Health</a></li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Mental Health</a></li>
<li><a href="#">Dieting</a></li>
<li><a href="#">Self Defense</a></li>
<li><a href="#">Safety & First Aid</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Meditation</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a></li>
<li class="dir"><a href="#">Spanish</a></li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a></li>
<li><a href="#">Japanese</a></li>
<li><a href="#">Portuguese</a></li>
<li><a href="#">Chinese</a></li>
<li><a href="#">Russian</a></li>
<li><a href="#">Latin</a></li>
<li><a href="#">Arabic</a></li>
<li><a href="#">Hebrew</a></li>
<li><a href="#">Italian</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a></li>
<li class="dir"><a href="#">Production</a></li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a></li>
<li><a href="#">Music Techniques</a></li>
<li><a href="#">Music Software</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a></li>
<li class="dir"><a href="#">Math & Science</a></li>
<li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
<!-- end of info nav -->

<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->

<!-- Course Facts -->
<div id='course_facts'>
<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>

<meter min="0" max="5" value="1.73"></meter>
</div>
<!-- End of Star Ratings -->

<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->

<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>

<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->

<span id='skill_level'> Intermediate </span>

</span> </span>
<!-- End of Skill Level -->

<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->

</div>
<!-- End of Course Facts -->


<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>

<br> <br> <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>

<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div>

</div>
<!-- End of Teacher Div -->





Screenshot of leaked link content

Visual Aid

In other words, if you hover over this particular section, there is a link. This is a mistake. I only want a link for the instructors name and their picture. How do I fix this error?

SIDE NOTE: For some reason, the Stack Overflow editor isn't rendering the "Skill Level" positioning and the positioning of the Wish List button correctly. These errors don't correlate in any way to the links leaking...

Answer

I made some edits to your css and the problem was fixed, but take care that when you want to centered element you should use text-align:center , not change their positions by left and right .

/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* courses.php */

/* course intro */

#course_body {
  background: #F4F4F4;
}

#course_intro {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: 40px;
  left: 50px;
}

#intro_title {
  width: 562px;
  position: relative;
  top: 2px;
}

#intro_video {
  width: 375px;
  height: 210px;
  position: relative;
  top: -7px;
}

/* end of course intro */

/* course facts */

#course_facts {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: -311px;
  left: 750px;
  font-size: 20px;
  height: 115px;
}

  .Rating {
  position: relative;
  width: 125px;
  height: 25px;
  top: -5px;
}
.Rating svg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}
.Rating meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
  background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
  background: #FF7867;
}

#facts_ratings {
  position: relative;
  top: -6px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_length {
  position: relative;
  top: -57px;
  left: 200px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_time {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 18px;
  color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
  position: relative;
  top: -84px;
  left: 280px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.fillSquare, .emptySquare {
  display: inline-block;
  position: relative;
  left: 80px;
}

.fillSquare {
  width: 12px;
  height: 12px;
  background: #666;
}

.emptySquare {
  width: 12px;
  height: 12px;
  background: #B8B8B8;
}

#skill_level {
  position: relative;
  left: 85px;
  top: -2px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  color: #2E3D49;
}

/* end of skill level */

/* Wish List button */

#course_wish {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  position: absolute;
  width: 87px;
  padding: 5px;
  position: relative;
  top: -65px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
  border-radius: 3px;
}

#empty_heart {
  color: #FF827F;
}

#course_wish_text {
  position: relative;
  left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
  width: 326px;
  border: 1px solid #ddd;
  background: white;
  position: relative;
  left: 1002px;
  padding: 15px;
  top: -280px;
  text-align:center;
}

#teacher_picture {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

#teacher_name {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
}

#teacher_div a {
  text-decoration: none;
  color: #00698C;
}

#teacher_div a:hover {
  text-decoration: underline;
}

#teacher_tagLine {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #999;
  text-align: center;
  width: 325px;
}

/* End of Teacher div */

/* end of courses.php */
<?php

require "connect.php";

?>

<!DOCTYPE html>
<html>
  <head>
    <title> Hacked Genius </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='main.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src='main.js'></script>
  </head>

  <body id='course_body'>
    <!-- nav -->
      <div id='nav'>

      </div>
    <!-- end of nav -->

    <!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Apps</a></li>
      <li><a href="#">Programming Languages</a></li>
      <li><a href="#">Game Development</a></li>
      <li><a href="#">Databases</a></li>
      <li><a href="#">Software Testing</a></li>
      <li><a href="#">Software Engineering</a></li>
      <li><a href="#">Development Tools</a></li>
      <li><a href="#">E-Commerce</a></li>
    </ul>
  </li>
  <li><a href="#">Business</a>
    <ul>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Entrepreneurship</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Management</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Strategy</a></li>
      <li><a href="#">Operations</a></li>
      <li><a href="#">Project Management</a></li>
      <li><a href="#">Business Law</a></li>
      <li><a href="#">Data and Anylytics</a></li>
      <li><a href="#">Home Business</a></li>
      <li><a href="#">Human Resources</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li><a href="#">IT & Software</a>
    <ul>
      <li class="dir"><a href="#">IT Certification</a></li>
      <li class="dir"><a href="#">Network & Security</a>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Operating Systems</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
    <ul>
      <li class="dir"><a href="#">Microsoft</a></li>
      <li class="dir"><a href="#">Apple</a>
      <li><a href="#">Google</a></li>
      <li><a href="#">SAP</a></li>
      <li><a href="#">Intuit</a></li>
      <li><a href="#">Salesforce</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
    <ul>
      <li class="dir"><a href="#">Personal Transformation</a></li>
      <li class="dir"><a href="#">Productivity</a>
      <li><a href="#">Leadership</a></li>
      <li><a href="#">Personal Finance</a></li>
      <li><a href="#">Career Development</a></li>
      <li><a href="#">Parenting & Relationships</a></li>
      <li><a href="#">Happiness</a></li>
      <li><a href="#">Religion & Spirituality</a></li>
      <li><a href="#">Personal Brand Building</a></li>
      <li><a href="#">Creativity</a></li>
      <li><a href="#">Influence</a></li>
      <li><a href="#">Self Esteem</a></li>
      <li><a href="#">Stress Management</a></li>
      <li><a href="#">Memory and Study Skills</a></li>
      <li><a href="#">Motivation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
    <ul>
      <li class="dir"><a href="#">Web Design</a></li>
      <li class="dir"><a href="#">Graphic Design</a>
      <li><a href="#">Design Tools</a></li>
      <li><a href="#">User Experience</a></li>
      <li><a href="#">Game Design</a></li>
      <li><a href="#">Design Thinking</a></li>
      <li><a href="#">3D & Animation</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Architectural Design</a></li>
      <li><a href="#">Interior Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
    <ul>
      <li class="dir"><a href="#">Digital Marketing</a></li>
      <li class="dir"><a href="#">Search Engine Optimization</a>
      <li><a href="#">Social Media Marketing</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Marketing Fundamentals</a></li>
      <li><a href="#">Analystics & Automation</a></li>
      <li><a href="#">Public Relations</a></li>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Video & Mobile Marketing</a></li>
      <li><a href="#">Content Marketing</a></li>
      <li><a href="#">Non-Digital Marketing</a></li>
      <li><a href="#">Growth Hacking</a></li>
      <li><a href="#">Affiliate Marketing</a></li>
      <li><a href="#">Product Marketing</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
    <ul>
      <li class="dir"><a href="#">Life Hacks</a></li>
      <li class="dir"><a href="#">Arts & Crafts</a></li>
      <li class="dir"><a href="#">Food & Beverage</a>
      <li><a href="#">Beauty & Makeup</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Gaming</a></li>
      <li><a href="#">Home Improvement</a></li>
      <li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
    <ul>
      <li class="dir"><a href="#">Digital Photography</a></li>
      <li class="dir"><a href="#">Photography Fundamentals</a></li>
      <li class="dir"><a href="#">Portraits</a>
      <li><a href="#">Landscape</a></li>
      <li><a href="#">Black & White</a></li>
      <li><a href="#">Photography Tools</a></li>
      <li><a href="#">Mobile Photography</a></li>
      <li><a href="#">Travel Photography</a></li>
      <li><a href="#">Commercial Photography</a></li>
      <li><a href="#">Wedding Photography</a></li>
      <li><a href="#">Video Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
    <ul>
      <li class="dir"><a href="#">Fitness</a></li>
      <li class="dir"><a href="#">General Health</a></li>
      <li class="dir"><a href="#">Sports</a>
      <li><a href="#">Nutrition</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Mental Health</a></li>
      <li><a href="#">Dieting</a></li>
      <li><a href="#">Self Defense</a></li>
      <li><a href="#">Safety & First Aid</a></li>
      <li><a href="#">Dance</a></li>
      <li><a href="#">Meditation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
    <ul>
      <li class="dir"><a href="#">English</a></li>
      <li class="dir"><a href="#">Spanish</a></li>
      <li class="dir"><a href="#">German</a>
      <li><a href="#">French</a></li>
      <li><a href="#">Japanese</a></li>
      <li><a href="#">Portuguese</a></li>
      <li><a href="#">Chinese</a></li>
      <li><a href="#">Russian</a></li>
      <li><a href="#">Latin</a></li>
      <li><a href="#">Arabic</a></li>
      <li><a href="#">Hebrew</a></li>
      <li><a href="#">Italian</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
    <ul>
      <li class="dir"><a href="#">Instruments</a></li>
      <li class="dir"><a href="#">Production</a></li>
      <li class="dir"><a href="#">Music Fundamentals</a>
      <li><a href="#">Vocal</a></li>
      <li><a href="#">Music Techniques</a></li>
      <li><a href="#">Music Software</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
    <ul>
      <li class="dir"><a href="#">Social Science</a></li>
      <li class="dir"><a href="#">Math & Science</a></li>
      <li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
 <!-- end of info nav -->
 
    <!-- Course Introduction -->
      <div id='course_intro'>
        <div id='intro_title'>
          Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
        <video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
      </div>
    <!-- End of Course Introduction -->
    
    <!-- Course Facts -->
      <div id='course_facts'>
        <!-- Star Ratings -->
         <span id='facts_ratings'> 400 Ratings </span>
                  <div class="Rating">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
            <defs>
              <path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
            </defs>
            <use fill="white" fill-rule="evenodd" xlink:href="#a"/>
          </svg>
        
          <meter min="0" max="5" value="1.73"></meter>
        </div>
        <!-- End of Star Ratings -->
        
        <!-- Length -->
         <span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
        <!-- End of Length -->
        
        <!-- Skill Level -->
         <span id='course_skillText'> Skill Level <br> <span id='course_skill'>
         
         <!-- Skill Boxes -->
          <div class='fillSquare'></div> <div class='fillSquare'></div>  <div class='emptySquare'></div>
         <!-- End of Skill Boxes -->
         
         <span id='skill_level'> Intermediate </span>
         
         </span> </span>
        <!-- End of Skill Level -->
        
        <!-- Wish List Button -->
          <div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
        <!-- End of Wish List Button -->
        
      </div>
                <!-- End of Course Facts -->
                
                
                <!-- Teacher Div -->
                  <div id='teacher_div'>
                    <a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
                    
                   <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
                   
                   <div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div>
                   
                  </div>
                <!-- End of Teacher Div -->