无法找出我的代码Javascrips / html / css有什么问题

Question

对于我的学校练习，我必须创建3个可点击的标签，当它被点击时，它应该打开另一个窗口this should be the result when clicked.

我现在已经查看了很多次代码，但我找不到错误。所以，如果有人可以帮助我，那就太棒了。

亲切的问候。

$xml=simplexml_load_file("http://www.example.com/sample.xml") or die("Error: 
Cannot create object");
$count = count($xml->Assignment);
for($i=0;$i<$count;$i++)
{
$Id = $xml->Assignment[$i]->Id;
$Status = $xml->Assignment[$i]->Status;
$Location = $xml->Assignment[$i]->Location;
$Fram = $xml->Assignment[$i]->Fram;
$Destination = $xml->Assignment[$i]->Destination;
$Assignment = $xml->Assignment[$i]->Assignment;
$Amount = $xml->Assignment[$i]->Amount;
$Units = $xml->Assignment[$i]->Units;
$Pay = $xml->Assignment[$i]->Pay;
$PilotFee = $xml->Assignment[$i]->PilotFee;
$Expires = $xml->Assignment[$i]->Expires;
$ExpireDateTime = $xml->Assignment[$i]->ExpireDateTime;
$Type = $xml->Assignment[$i]->Type;
$Express = $xml->Assignment[$i]->Express;
$Locked = $xml->Assignment[$i]->Locked;
$stmt = $db->prepare("insert into jobs values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
$stmt->bindParam(1, $Id);
$stmt->bindParam(2, $Status);
$stmt->bindParam(3, $Location);
$stmt->bindParam(4, $Fram);
$stmt->bindParam(5, $Destination);
$stmt->bindParam(6, $Assignment);
$stmt->bindParam(7, $Amount);
$stmt->bindParam(8, $Units);
$stmt->bindParam(9, $Pay);
$stmt->bindParam(10, $PilotFee);
$stmt->bindParam(11, $Expires);
$stmt->bindParam(12, $ExpireDateTime);
$stmt->bindParam(13, $Type);
$stmt->bindParam(14, $Express);
$stmt->bindParam(15, $Locked);
$stmt->execute();
printf($Id.'<br/>');
printf($Status.'<br/>');
printf($Location.'<br/>');
printf($Fram.'<br/>');
printf($Destination.'<br/>');
printf($Assignment.'<br/>');
printf($Amount.'<br/>');
printf($Units.'<br/>');
printf($Pay.'<br/>');
printf($PilotFee.'<br/>');
printf($Expires.'<br/>');
printf($ExpireDateTime.'<br/>');
printf($Type.'<br/>');
printf($Express.'<br/>');
printf($Locked.'<br/>');
// Get all data in Variables and Execute MYSQLi Prepared Statements
// ----  //
}

body {
  font-family: 'Roboto 2', 'Helvetica Neue';
  margin: 0;
  background: #DAD4D4;
  text-align: center;
}
.header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background: #70C26F;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
}
li {
  background: #70C26F;
  list-style-type: none;
}
.menu {
  left: -9999px;
  position: absolute;
  top: -9999px;
}
.menu-cirkel {
  display: none;
  cursor: pointer;
  display: block;
  position: fixed;
  top: 15px;
  z-index: 99;
  width: 70px;
  height: 70px;
  transition: all 400ms ease-in-out;
  border: 2px solid #D34237;
  border-radius: 50%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-cirkel:hover {
  border-color: #416EF8;
}

/*Insert strepen voor en na menu-streep*/
.menu-cirkel .menu-streep,
.menu-cirkel .menu-streep:before,
.menu-cirkel .menu-streep:after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  width: 35px;
  cursor: pointer;
  background: #D34237;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
}
.menu-cirkel:hover .menu-streep,
.menu-cirkel:hover .menu-streep:before,
.menu-cirkel:hover .menu-streep:after {
  background-color: #416EF8;
}

/*menu-streep positioneren*/
.menu-cirkel .menu-streep {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}
.menu-cirkel .menu-streep:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}
.menu-cirkel .menu-streep:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}

/*drawer definieren*/
.drawer {
  position: fixed;
  top: 100px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  height: 10%;
  visibility: hidden;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  width: 100%;
  box-shadow: 0px 8px 10px rgba(0,0,0,0.5);
}

/*Menu centreren*/
.menu-cirkel {
  left: 50%;
  -webkit-transform: translate3d(-50, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

/*On click*/
.menu:checked .menu-cirkel {
  border-color: #D34237;
}
.menu:checked ~ .menu-cirkel .menu-streep {
  background-color: transparent;
}
.menu:checked ~ .menu-cirkel .menu-streep:before {
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translatex(-50%) rotate(45deg);
}
.menu:checked ~ .menu-cirkel .menu-streep:after {
  transform: translateX(-50%) translateY(-10px);
  rotate(-45deg);

-webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
  top: 10px;
}
/*drawer slide down animatie*/
.drawer {
  z-index: 3;
  transition-duration: 500ms;
  background: #70C26F;
}
.drawer {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, -100%, 0);
}
.menu:checked ~ .drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
}

div {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
  margin: 0;
  width: 100%:
}
li {
  background: #70C26F;
  list-style-type: none;
}
li:hover {
  background: #0AFA76;
  opacity: 0.4; filter: alpha(opacity=4);
}

/*Tabs*/
.tabs {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  text-align: center;
}
.tab {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  margin: 10px;
  overflow: hidden;
  text-align: center;
  width: 20%;
  height: 50px;
  line-height: 48px;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.tab:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#tab1 {
  background-color: #F4DB33;
}
#tab2 {
  background-color: #962FF8;
}
#tab3 {
  background-color: #DC3C84;
}

/*Cards*/
.cards {
  position: relative;
  top: 150px;
  left: 60px;
  height: 300px;
  width: 80%;
  border-radius: 4px;
  text-align: start;
  overflow: hidden;
  background: #FFF;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.content-left {
  float: left;
  width: 22%;
  height: 300px;
  padding: 15px;
  text-align: center;
}
.content-right {
  padding-top: 15px;
  padding-left: 15px;
  float: right;
  width: 60%;
  height: 300px;
}
.x-icon {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 10px;
  font-size: 2.5em;
  background-color: #70C26F;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.x-icon:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#card1 .content-left {
  background-color: #F4DB33;
}
#card2 .content-left {
  background-color: #972FF8;
}
#card3 .content-left {
  background-color: #DC3C84;
}