Exam.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exam</title>
<style>

.Bord-Tick-Mark{border: 1px solid #cccccc; border-radius: 5px; background-color: rgb(225,225,225);width: 16px; height: 16px;display: inline-block;}
.Tick-Mark {width: 10px; height: 10px; margin: 3px 0px 0px 3px;}

.main1{display:inline-flex;flex-direction: column;}

.section1{display:inline-flex;flex-direction: row;}

        .footer-fax{ display: flex; width:100%;}
        .flex-item {text-align: center; font-size: 20px;}


        .flex-container { display: flex;  flex-wrap: wrap-reverse;  flex-direction: row; margin-left: 20px; }

        .flex-container2 {  display: inline-flex; flex-direction: row; margin-left: 20px; }
     
           @media (min-width:1000px)
            {
              .flex-section1 { position: relative; width: 180px; height: 100px; margin-right: 20px; margin-top: 30px;}
              .flex-Section1-Img{position:absolute; left: 25px; top: 20px; width: 25px; height: 25px;z-index: 2;}
              .flex-Section1-Rectangle{position:absolute; top: 25px; width: 180px; height: 95px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-UsedSpac1{position:absolute; left:15px; top: 10px; width: 45px; height: 45px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Revenue1{position:absolute; left:15px; top: 10px; width: 45px; height: 45px;background-color: rgb(216, 158, 36); z-index: 1;}
              .flex-Fixed-Issues{position:absolute; left:15px; top: 10px; width: 45px; height: 45px;background-color: rgb(39, 77, 151); z-index: 1;}
              .flex-Followers{position:absolute; left:15px; top: 10px; width: 45px; height: 45px;background-color: rgb(195, 32, 86); z-index: 1;}

              .txt1{text-align: right; font-size: 10px; margin: 10px 10px 0px 0px; }
              .txt2{text-align: right; font-size: 25px; margin: 0px 10px 0px 0px;}
              .hr1{margin:0px 15px 0px 15px;}
              .UsedSpacImg2{width: 15px; height: 15px;}
              .txt3{display: inline-block; font-size: 10px;}
              .ImgTxt{margin:0px 0px 10px 10px;}



              .flex-section2 { position: relative; width: 250px; height: 300px; margin-right: 20px; margin-top: 80px;}
              .flex-Section2-Img{position:absolute; left: 30px; top: 10px; width: 180px; height: 100px;z-index: 2;}
              .flex-Section2-Rectangle{position:absolute; top: 25px; width: 250px; height: 300px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Daily-Sales{position:absolute; left:15px; width: 220px; height: 150px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Email-Subscriptions{position:absolute; left:15px; width: 220px; height: 150px;background-color: rgb(216, 158, 36);z-index: 1;}
              .flex-Completed-Tasks{position:absolute; left:15px; width: 220px; height: 150px;background-color: rgb(39, 77, 151);z-index: 1;}
              .txt4{font-size: 25px; margin: 150px 10px 0px 15px; }
              .txt5{font-size: 20px; margin: 0px 10px 0px 15px;}
              .ImgTxt2{margin:10px 0px 0px 10px; ;}
              .txt33{display: inline-block; font-size: 15px; margin-left: 10px;}
              
       


              .flex-container3 {  display: inline-flex; flex-direction: row; margin-left: 20px; }
              .flex-section3 { position: relative; width: 390px; height: 360px; margin-right: 20px; margin-top: 80px;}
              .flex-Section3-Rectangle{position:absolute; top: 25px; width: 390px; height: 330px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Tasks{ font-size: 17px; color: white; margin-left: 15px; width: 360px; height: 90px;background-color: rgb(216, 158, 36);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}
              .flex-Tasks1{margin-top: -0.5em; font-size: 17px; color: white; margin-left: 15px; width: 360px; height: 90px;background-color: rgb(39, 77, 151);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}

              .Bord-Img{ width: 75px; height: 50px; background-color: rgb(226, 173, 71); display:inline-flex;}
              .Bug-img{margin: 10px 0px 0px 0px; width: 20px; height: 20px; display:inline-flex; }
              .Bug-img1{margin: 10px 0px 10px 15px; width: 20px; height: 20px; display:inline-flex; }



        .bor-txt1{display: inline-block; position:absolute; top: 40px; left: 15px;}
        .bor-txt2{font-size: 12px; margin-top: 10px; display: inline-block; position:absolute; top: 10px; left: 50px;}
        .bor-txt3{  display: inline-block; position:absolute; top: 40px; left: 330px; width: 15px; height: 15px;}
        .bor-txt4{ position:absolute; top: 40px; left: 350px; width: 15px; height: 15px;}
        .bor-txt5{margin:0px 15px 0px 15px; position:absolute; top: 100px; }
        .bor{position: relative;border: 1px solid rgb(234,234,234); margin-top: 50px;}
        .bor1{position: relative;border: 1px solid rgb(234,234,234); margin-top: -1em;}

            .txt-1{display:inline-flex; margin: 0px 5px 5px 10px;}
            .txt-2{display:inline-flex; margin: 10px 5px 5px 5px; }
            .txt-3{margin: 20px 0px 0px 0px; display:inline-flex;}
            .txt-4{font-size:20px ; margin: 10px 0px 0px 10px; }
            .txt-5{font-size:15px ; margin: 10px 0px 0px 10px; }
            .hr2{margin:75px 15px 0px 15px;}
            .txt-6{display: inline-block; margin-right: 20px;color: rgb(91,166,146); margin-left:30px; }
            .txt-7{display: inline-block; margin-right: 80px;color: rgb(91,166,146); margin-right: 50px;}
            .txt-8{display: inline-block; font-size: 10px; margin-left:30px; margin-right: 30px; }
            .txt-9{display: inline-block; font-size: 10px; margin-right: 40px; }
            .txt-10{display: inline-block; font-size: 10px; margin-right: 65px;}
            .txt-11{display: inline-block; font-size: 10px; margin-right: 85px;}
            .txt7{display: inline-block; margin-right: 40px;color: rgb(91,166,146);}
            .item1 {font-size: 15px;  margin-left: 40px; margin-bottom: 20px ;}
            .item2 { font-size: 15px;  margin-left: 20px}
            .item3 {font-size: 15px; margin-left: 20px;}
            .item4 {font-size: 15px; margin-left: 420px;}
            }
            @media (min-width:800px) and (max-width:1000px)
            {
              .flex-section1 { position: relative; width: 350px; height: 200px; margin-right: 20px; margin-top: 30px;}
              .flex-Section1-Img{position:absolute; left: 25px; top: 20px; width: 50px; height: 50px;z-index: 2;}
              .flex-Section1-Rectangle{position:absolute; top: 25px; width: 350px; height: 185px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-UsedSpac1{position:absolute; left:15px; top: 10px; width: 75px; height: 75px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Revenue1{position:absolute; left:15px; top: 10px;  width: 75px; height: 75px; background-color: rgb(216, 158, 36); z-index: 1;}
              .flex-Fixed-Issues{position:absolute; left:15px; top: 10px;  width: 75px; height: 75px; background-color: rgb(39, 77, 151); z-index: 1;}
              .flex-Followers{position:absolute; left:15px; top: 10px;  width: 75px; height: 75px; background-color: rgb(195, 32, 86); z-index: 1;}


             .txt1{text-align: right; font-size: 25px; margin: 30px 20px 0px 0px; }
             .txt2{text-align: right; font-size: 45px; margin: 0px 20px 0px 0px;}
             .hr1{margin:0px 15px 0px 15px;}
             .UsedSpacImg2{width: 20px; height: 20px; margin-top: 10px;}
             .txt3{display: inline-block; font-size: 20px;}
             .ImgTxt{margin:0px 0px 10px 10px; }
             .order1{order: 3;}
             .order2{order: 4;}
             .order3{order: 1;}
             .order4{order: 2;}


             .flex-section2 { position: relative; width: 230px; height: 300px; margin-right: 20px; margin-top: 80px;}
              .flex-Section2-Img{position:absolute; left: 30px; top: 10px; width: 170px; height: 100px;z-index: 2;}
              .flex-Section2-Rectangle{position:absolute; top: 25px; width: 230px; height: 300px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Daily-Sales{position:absolute; left:15px; width: 200px; height: 140px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Email-Subscriptions{position:absolute; left:15px; width: 200px; height: 140px;background-color: rgb(216, 158, 36);z-index: 1;}
              .flex-Completed-Tasks{position:absolute; left:15px; width: 200px; height: 140px;background-color: rgb(39, 77, 151);z-index: 1;}
              .txt4{font-size: 25px; margin: 120px 10px 0px 15px; }
              .txt5{font-size: 20px; margin: 0px 10px 0px 15px;}
              .ImgTxt2{margin:10px 0px 0px 10px; ;}
              .txt33{display: inline-block; font-size: 15px; margin-left: 10px;}


              .flex-container3 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
              .flex-section3 { position: relative; width: 740px; height: 360px; margin-right: 20px; margin-top: 80px;}
              .flex-Section3-Rectangle{position:absolute; top: 25px; width: 740px; height: 360px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Tasks{ font-size: 17px; color: white; margin-left: 15px; width: 710px; height: 90px;background-color: rgb(216, 158, 36);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}
              .flex-Tasks1{margin-top: -0.5em; font-size: 17px; color: white; margin-left: 15px; width: 710px; height: 90px;background-color: rgb(39, 77, 151);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}

              .Bord-Img{ width: 75px; height: 50px; background-color: rgb(226, 173, 71); display:inline-flex;}
              .Bug-img{margin: 10px 0px 0px 0px; width: 20px; height: 20px; display:inline-flex; }
              .Bug-img1{margin: 10px 0px 10px 55px; width: 20px; height: 20px; display:inline-flex; }



        .bor-txt1{display: inline-block; position:absolute; top: 40px; left: 25px;}
        .bor-txt2{font-size: 15px; margin-top: 10px; display: inline-block; position:absolute; top: 10px; left: 100px;}
        .bor-txt3{  display: inline-block; position:absolute; top: 40px; left: 460px; width: 15px; height: 15px;}
        .bor-txt4{ position:absolute; top: 40px; left: 490px; width: 15px; height: 15px;}
        .bor-txt5{margin:0px 15px 0px 15px; position:absolute; top: 100px; }
        .bor{position: relative;border: 1px solid rgb(234,234,234); margin-top: 50px;}
        .bor1{position: relative;border: 1px solid rgb(234,234,234); margin-top: -1em;}

            .txt-1{display:inline-flex; margin: 0px 100px 5px 20px;}
            .txt-2{display:inline-flex; margin: 10px 5px 5px 5px; }
            .txt-3{margin: 20px 0px 0px 50px; display:inline-flex;}
            .txt-4{font-size:20px ; margin: 10px 0px 0px 10px; }
            .txt-5{font-size:15px ; margin: 10px 0px 0px 10px; }
            .hr2{margin:85px 15px 0px 15px;}
            .txt-6{display: inline-block; margin-right: 60px;color: rgb(91,166,146); margin-left:30px; }
            .txt-7{display: inline-block; margin-right: 150px;color: rgb(91,166,146); }
            .txt-8{display: inline-block; font-size: 10px; margin-left:50px; margin-right: 50px; }
            .txt-9{display: inline-block; font-size: 10px; margin-right: 140px; }
            .txt-10{display: inline-block; font-size: 10px; margin-right: 100px;}
            .txt-11{display: inline-block; font-size: 10px; margin-right: 85px;}
            .txt7{font-size: 15px; display: inline-block; margin-right: 80px;color: rgb(91,166,146);}
            .item1 {font-size: 15px;  margin-left: 40px; margin-bottom: 20px ;}
            .item2 { font-size: 15px;  margin-left: 20px}
            .item3 {font-size: 15px; margin-left: 20px;}
            .item4 {font-size: 15px; margin-left: 350px;}
            }
            @media (min-width:650px) and (max-width:800px)
            {
              .flex-section1 { position: relative; width: 260px; height: 170px; margin-right: 20px; margin-top: 30px;}
              .flex-Section1-Img{position:absolute; left: 25px; top: 20px; width: 30px; height: 30px;z-index: 2;}
              .flex-Section1-Rectangle{position:absolute; top: 25px; width: 260px; height: 150px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-UsedSpac1{position:absolute; left:15px; top: 10px; width: 50px; height: 50px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Revenue1{position:absolute; left:15px; top: 10px;  width: 50px; height: 50px; background-color: rgb(216, 158, 36); z-index: 1;}
              .flex-Fixed-Issues{position:absolute; left:15px; top: 10px;  width: 50px; height: 50px; background-color: rgb(39, 77, 151); z-index: 1;}
              .flex-Followers{position:absolute; left:15px; top: 10px;  width: 50px; height: 50px; background-color: rgb(195, 32, 86); z-index: 1;}


             .txt1{text-align: right; font-size: 20px; margin: 10px 20px 0px 0px; }
             .txt2{text-align: right; font-size: 35px; margin: 0px 20px 0px 0px;}
             .hr1{margin:0px 15px 0px 15px;}
             .UsedSpacImg2{width: 20px; height: 20px; margin-top: 10px;}
             .txt3{display: inline-block; font-size: 20px;}
             .ImgTxt{margin:0px 0px 10px 10px; }
             .order1{order: 3;}
             .order2{order: 4;}
             .order3{order: 1;}
             .order4{order: 2;}


             .flex-section2 { position: relative; width: 165px; height: 250px; margin-right: 20px; margin-top: 80px;}
              .flex-Section2-Img{position:absolute; left: 30px; top: 10px; width: 110px; height: 60px;z-index: 2;}
              .flex-Section2-Rectangle{position:absolute; top: 25px; width: 165px; height: 250px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Daily-Sales{position:absolute; left:15px; width: 135px; height: 100px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Email-Subscriptions{position:absolute; left:15px; width: 135px; height: 100px;background-color: rgb(216, 158, 36);z-index: 1;}
              .flex-Completed-Tasks{position:absolute; left:15px; width: 135px; height: 100px;background-color: rgb(39, 77, 151);z-index: 1;}
              .txt4{font-size: 25px; margin: 80px 10px 0px 15px; }
              .txt5{font-size: 20px; margin: 0px 10px 0px 15px;}
              .ImgTxt2{margin:5px 0px 0px 10px; ;}
              .txt33{display: inline-block; font-size: 10px; margin-left: 10px;}


              .flex-container3 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
              .flex-section3 { position: relative; width: 540px; height: 360px; margin-right: 20px; margin-top: 80px;}
              .flex-Section3-Rectangle{position:absolute; top: 25px; width: 540px; height: 360px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Tasks{ font-size: 17px; color: white; margin-left: 15px; width: 510px; height: 90px;background-color: rgb(216, 158, 36);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}
              .flex-Tasks1{margin-top: -0.5em; font-size: 17px; color: white; margin-left: 15px; width: 510px; height: 90px;background-color: rgb(39, 77, 151);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}

              .Bord-Img{ width: 60px; height: 40px; background-color: rgb(226, 173, 71); display:inline-flex;}
              .Bug-img{margin: 10px 0px 0px 0px; width: 20px; height: 20px; display:inline-flex; }
              .Bug-img1{margin: 10px 0px 10px 5px; width: 20px; height: 20px; display:inline-flex; }



        .bor-txt1{display: inline-block; position:absolute; top: 40px; left: 25px;}
        .bor-txt2{font-size: 15px; margin-top: 10px; display: inline-block; position:absolute; top: 10px; left: 100px;}
        .bor-txt3{  display: inline-block; position:absolute; top: 40px; left: 460px; width: 15px; height: 15px;}
        .bor-txt4{ position:absolute; top: 40px; left: 490px; width: 15px; height: 15px;}
        .bor-txt5{margin:0px 15px 0px 15px; position:absolute; top: 100px; }
        .bor{position: relative;border: 1px solid rgb(234,234,234); margin-top: 50px;}
        .bor1{position: relative;border: 1px solid rgb(234,234,234); margin-top: -1em;}

            .txt-1{display:inline-flex; margin: 0px 45px 5px 10px;}
            .txt-2{display:inline-flex; margin: 10px 5px 5px 5px; }
            .txt-3{margin: 20px 0px 0px 50px; display:inline-flex;}
            .txt-4{font-size:20px ; padding: 10px 0px 5px 15px; }
            .txt-5{font-size:15px ; margin: 0px 0px 0px 15px; }
            .hr2{margin:85px 15px 0px 15px;}
            .txt-6{display: inline-block; margin-right: 60px;color: rgb(91,166,146); margin-left:30px; }
            .txt-7{display: inline-block; margin-right: 100px;color: rgb(91,166,146); }
            .txt-8{display: inline-block; font-size: 10px; margin-left:50px; margin-right: 50px; }
            .txt-9{display: inline-block; font-size: 10px; margin-right: 90px; }
            .txt-10{display: inline-block; font-size: 10px; margin-right: 100px;}
            .txt-11{display: inline-block; font-size: 10px; margin-right: 85px;}
            .txt7{font-size: 15px; display: inline-block; margin-right: 70px;color: rgb(91,166,146);}
            .item1 {font-size: 15px;  margin-left: 40px; margin-bottom: 20px ;}
            .item2 { font-size: 15px;  margin-left: 20px}
            .item3 {font-size: 15px; margin-left: 20px;}
            .item4 {font-size: 15px; margin-left: 190px;}
            }
            @media (min-width:500px) and (max-width:650px)
            {
              .flex-section1 { position: relative; width: 190px; height: 120px; margin-right: 20px; margin-top: 30px;}
              .flex-Section1-Img{position:absolute; left: 25px; top: 20px; width: 35px; height: 35px;z-index: 2;}
              .flex-Section1-Rectangle{position:absolute; top: 25px; width: 190px; height: 100px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-UsedSpac1{position:absolute; left:15px; top: 10px; width: 60px; height: 60px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Revenue1{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(216, 158, 36); z-index: 1;}
              .flex-Fixed-Issues{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(39, 77, 151); z-index: 1;}
              .flex-Followers{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(195, 32, 86); z-index: 1;}


             .txt1{text-align: right; font-size: 15px; margin: 5px 10px 0px 0px; }
             .txt2{text-align: right; font-size: 25px; margin: 0px 10px 0px 0px;}
             .hr1{margin:0px 15px 0px 15px;}
             .UsedSpacImg2{width: 15px; height: 15px; margin-top: 5px;}
             .txt3{display: inline-block; font-size: 10px;}
             .ImgTxt{margin:0px 0px 10px 10px; }
             .order1{order: 3;}
             .order2{order: 4;}
             .order3{order: 1;}
             .order4{order: 2;}

             .flex-container2 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
             .flex-section2 { position: relative; width: 400px; height: 280px; margin-right: 20px; margin-top: 80px;}
              .flex-Section2-Img{position:absolute; left: 30px; top: 10px; width: 325px; height: 180px;z-index: 2;}
              .flex-Section2-Rectangle{position:absolute; top: 25px; width: 400px; height: 280px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Daily-Sales{position:absolute; left:15px; width: 370px; height: 200px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Email-Subscriptions{position:absolute; left:15px; width: 370px; height: 200px;background-color: rgb(216, 158, 36);z-index: 1;}
              .flex-Completed-Tasks{position:absolute; left:15px; width: 370px; height: 200px;background-color: rgb(39, 77, 151);z-index: 1;}
              .txt4{font-size: 15px; margin: 180px 10px 0px 15px; }
              .txt5{font-size: 10px; margin: 0px 10px 0px 15px;}
              .ImgTxt2{margin:5px 0px 0px 10px; ;}
              .txt33{display: inline-block; font-size: 10px; margin-left: 10px;}


              .flex-container3 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
              .flex-section3 { position: relative; width: 400px; height: 290px; margin-right: 20px; margin-top: 80px;}
              .flex-Section3-Rectangle{position:absolute; top: 25px; width: 400px; height: 290px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Tasks{ font-size: 17px; color: white; margin-left: 15px; width: 370px; height: 90px;background-color: rgb(216, 158, 36);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}
              .flex-Tasks1{margin-top: -0.5em; font-size: 17px; color: white; margin-left: 15px; width: 370px; height: 90px;background-color: rgb(39, 77, 151);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}

              .Bord-Img{ width: 60px; height: 40px; background-color: rgb(226, 173, 71); display:inline-flex;}
              .Bug-img{margin: 10px 0px 0px 0px; width: 20px; height: 20px; display:inline-flex; }
              .Bug-img1{margin: 10px 0px 10px 5px; width: 20px; height: 20px; display:inline-flex; }



        .bor-txt1{display: inline-block; position:absolute; top: 30px; left: 15px;}
        .bor-txt2{font-size: 10px; margin-top: 5px; display: inline-block; position:absolute; top: 10px; left: 50px;}
        .bor-txt3{  display: inline-block; position:absolute; top: 30px; left: 300px; width: 15px; height: 15px;}
        .bor-txt4{ position:absolute; top: 30px; left: 330px; width: 15px; height: 15px;}
        .bor-txt5{margin:0px 15px 0px 15px; position:absolute; top: 100px; }
        .bor{position: relative;border: 1px solid rgb(234,234,234); margin-top: 50px;}
        .bor1{position: relative;border: 1px solid rgb(234,234,234); margin-top: -1em;}

            .txt-1{display:inline-flex; margin: 0px 15px 5px 5px;}
            .txt-2{display:inline-flex; margin: 10px 5px 5px 5px; }
            .txt-3{margin: 20px 0px 0px 20px; display:inline-flex;}
            .txt-4{font-size:20px ; padding: 10px 0px 5px 15px; }
            .txt-5{font-size:15px ; margin: 0px 0px 0px 15px; }
            .hr2{margin:65px 15px 0px 15px;}
            .txt-6{display: inline-block; margin-right: 40px;color: rgb(91,166,146); margin-left:20px; }
            .txt-7{display: inline-block; margin-right: 50px;color: rgb(91,166,146); }
            .txt-8{display: inline-block; font-size: 10px; margin-left:25px; margin-right: 50px; }
            .txt-9{display: inline-block; font-size: 10px; margin-right: 40px; }
            .txt-10{display: inline-block; font-size: 10px; margin-right: 60px;}
            .txt-11{display: inline-block; font-size: 10px; margin-right: 85px;}
            .txt7{font-size: 15px; display: inline-block; margin-right: 40px;color: rgb(91,166,146);}
            .flex-item {text-align: center; font-size: 20px;}
            .footer-fax{ display: flex; width:100%; font-size: 15px;}
            .item1 {font-size: 10px;  margin-left: 30px}
            .item2 { font-size: 10px;  margin-left: 20px}
            .item3 {font-size: 10px; margin-left: 20px;}
            .item4 {font-size: 10px; margin-left: 140px;}
            }
            @media (max-width:500px)
            {
              .flex-section1 { position: relative; width: 320px; height: 120px; margin-right: 20px; margin-top: 30px;}
              .flex-Section1-Img{position:absolute; left: 25px; top: 20px; width: 35px; height: 35px;z-index: 2;}
              .flex-Section1-Rectangle{position:absolute; top: 25px; width: 320px; height: 100px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-UsedSpac1{position:absolute; left:15px; top: 10px; width: 60px; height: 60px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Revenue1{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(216, 158, 36); z-index: 1;}
              .flex-Fixed-Issues{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(39, 77, 151); z-index: 1;}
              .flex-Followers{position:absolute; left:15px; top: 10px;  width: 60px; height: 60px; background-color: rgb(195, 32, 86); z-index: 1;}


             .txt1{text-align: right; font-size: 15px; margin: 5px 10px 0px 0px; }
             .txt2{text-align: right; font-size: 25px; margin: 0px 10px 0px 0px;}
             .hr1{margin:0px 15px 0px 15px;}
             .UsedSpacImg2{width: 15px; height: 15px; margin-top: 5px;}
             .txt3{display: inline-block; font-size: 10px;}
             .ImgTxt{margin:0px 0px 10px 10px; }
             .order1{order: 4;}
             .order2{order: 3;}
             .order3{order: 2;}
             .order4{order: 1;}

             .flex-container2 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
             .flex-section2 { position: relative; width: 320px; height: 280px; margin-right: 20px; margin-top: 80px;}
              .flex-Section2-Img{position:absolute; left: 30px; top: 10px; width: 260px; height: 180px;z-index: 2;}
              .flex-Section2-Rectangle{position:absolute; top: 25px; width: 320px; height: 280px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Daily-Sales{position:absolute; left:15px; width: 290px; height: 200px;background-color: rgb(68, 139, 0);z-index: 1;}
              .flex-Email-Subscriptions{position:absolute; left:15px; width: 290px; height: 200px;background-color: rgb(216, 158, 36);z-index: 1;}
              .flex-Completed-Tasks{position:absolute; left:15px; width: 290px; height: 200px;background-color: rgb(39, 77, 151);z-index: 1;}
              .txt4{font-size: 15px; margin: 180px 10px 0px 15px; }
              .txt5{font-size: 10px; margin: 0px 10px 0px 15px;}
              .ImgTxt2{margin:5px 0px 0px 10px; ;}
              .txt33{display: inline-block; font-size: 10px; margin-left: 10px;}


              .flex-container3 {  display: inline-flex; flex-direction: column; margin-left: 20px; }
              .flex-section3 { position: relative; width: 320px; height: 290px; margin-right: 20px; margin-top: 80px;}
              .flex-Section3-Rectangle{position:absolute; top: 25px; width: 320px; height: 290px; box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.45);z-index: -1;}

              .flex-Tasks{ font-size: 17px; color: white; margin-left: 15px; width: 290px; height: 90px;background-color: rgb(216, 158, 36);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}
              .flex-Tasks1{margin-top: -0.5em; font-size: 17px; color: white; margin-left: 15px; width: 290px; height: 90px;background-color: rgb(39, 77, 151);z-index: 1;box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.45);}

              .Bord-Img{ width: 60px; height: 40px; background-color: rgb(226, 173, 71); display:inline-flex;}
              .Bug-img{margin: 10px 0px 0px 0px; width: 20px; height: 20px; display:inline-flex; }
              .Bug-img1{margin: 10px 0px 0px 5px; width: 20px; height: 20px; display:inline-flex; }



        .bor-txt1{display: inline-block; position:absolute; top: 25px; left: 10px;}
        .bor-txt2{font-size: 10px; margin-top: 5px; display: inline-block; position:absolute; top: 10px; left: 35px;}
        .bor-txt3{  display: inline-block; position:absolute; top: 25px; left: 265px; width: 15px; height: 15px;}
        .bor-txt4{ position:absolute; top: 25px; left: 285px; width: 15px; height: 15px;}
        .bor-txt5{margin:0px 15px 0px 15px; position:absolute; top: 100px; }
        .bor{position: relative;border: 1px solid rgb(234,234,234); margin-top: 50px;}
        .bor1{position: relative;border: 1px solid rgb(234,234,234); margin-top: -1em;}

            .txt-1{display:inline-flex; margin: 0px 5px 5px 5px;}
            .txt-2{display:inline-flex; margin: 10px 0px 5px 0px; }
            .txt-3{margin: 20px 0px 0px 0px; display:inline-flex;}
            .txt-4{font-size:20px ; padding: 10px 0px 5px 15px; }
            .txt-5{font-size:15px ; margin: 0px 0px 0px 15px; }
            .hr2{margin:65px 15px 0px 15px;}
            .txt-6{display: inline-block; margin-right: 20px;color: rgb(91,166,146); margin-left:20px; }
            .txt-7{display: inline-block; margin-right: 30px;color: rgb(91,166,146); }
            .txt-8{display: inline-block; font-size: 10px; margin-left:25px; margin-right: 30px; }
            .txt-9{display: inline-block; font-size: 10px; margin-right: 20px; }
            .txt-10{display: inline-block; font-size: 10px; margin-right: 40px;}
            .txt-11{display: inline-block; font-size: 10px; margin-right: 60px;}
            .txt7{font-size: 15px; display: inline-block; margin-right: 30px;color: rgb(91,166,146);}
            .flex-item {text-align: center; font-size: 20px;}
            .footer-fax{ display: flex; width:100%; font-size: 15px;}
            .item1 {font-size: 10px;  margin-left: 30px}
            .item2 { font-size: 10px;  margin-left: 10px}
            .item3 {font-size: 10px; margin-left: 10px;}
            .item4 {font-size: 10px; margin-left: 90px;}
            }

</style>


</head>
<body style="background-color: rgb(234, 234, 234); margin:0px; padding-top: 0px;">

  <header style=" font-size: 25px; margin-bottom: 50px; margin-left: 30px;"> <p>Dashboard</p> </header>


<main id="Main2" class="main1">

<section class="flex-container">

 
<div class="flex-section1 order1">
  <img class="flex-Section1-Img" src="icons_exam_task1/data_white.svg" title="data_white" alt="data_white">
  <div class="flex-UsedSpac1"></div>
  <div class="flex-Section1-Rectangle">
    <p class="txt1">Used Space</p>
    <p class="txt2">49/50 GB</p>
    <br><hr class="hr1">
    <div class="ImgTxt">
    <img class="UsedSpacImg2"  src="icons_exam_task1/alert.png" title="alert" alt="alert" >
    <p class="txt3">Get more space...</p>
    </div>
  </div>
</div>

<div class="flex-section1 order2">
  <img class="flex-Section1-Img" src="icons_exam_task1/shop_white.svg" title="shop_white" alt="shop_white">
  <div class="flex-Revenue1"></div>
  <div class="flex-Section1-Rectangle">
    <p class="txt1">Revenue</p>
    <p class="txt2">$ 34,245</p>
    <br><hr class="hr1">
    <div class="ImgTxt">
    <img class="UsedSpacImg2" src="icons_exam_task1/calendar.png" title="calendar" alt="calendar" >
    <p class="txt3" >Last 24 Hours</p>
    </div>
  </div>
</div>

<div class="flex-section1 order3">
  <img class="flex-Section1-Img" src="icons_exam_task1/tag_white.svg" title="tag_white" alt="tag_white">
  <div class="flex-Fixed-Issues"></div>
  <div class="flex-Section1-Rectangle">
    <p class="txt1">Fixed Issues</p>
    <p class="txt2">75</p>
    <br><hr class="hr1">
    <div class="ImgTxt">
    <img class="UsedSpacImg2" src="icons_exam_task1/down.png" title="down" alt="down" >
    <p class="txt3" >Tracked from Github</p>
    </div>
  </div>
</div>

<div class="flex-section1 order4">
  <img class="flex-Section1-Img" src="icons_exam_task1/paperplane_white.svg" title="paperplane_white" alt="paperplane_white">
  <div class="flex-Followers"></div>
  <div class="flex-Section1-Rectangle">
    <p class="txt1">Followers</p>
    <p class="txt2">+ 245</p>
    <br><hr class="hr1">
    <div class="ImgTxt">
    <img class="UsedSpacImg2" src="icons_exam_task1/time.png" title="time" alt="time" >
    <p class="txt3" >Just updated</p>
    </div>
  </div>
</div>



</section>


<section class="flex-container2">

  <div class="flex-section2">
    <img class="flex-Section2-Img" src="icons_exam_task1/graphics.svg" title="graphics" alt="graphics">
    <div class="flex-Daily-Sales"></div>
    <div class="flex-Section2-Rectangle">
      <p class="txt4">Daily Sales</p>
      <p class="txt5">55% increase in today</p><p class="txt5">sales</p>
      <br><hr class="hr1">
      <div class="ImgTxt2">
      <img class="Section2-Img2" src="icons_exam_task1/time.png" title="time" alt="time" >
      <p class="txt33" >updated 4 minutes ago</p>
      </div>
    </div>
  </div>

  <div class="flex-section2">
    <img class="flex-Section2-Img" src="icons_exam_task1/graphics.svg" title="graphics" alt="graphics">
    <div class="flex-Email-Subscriptions"></div>
    <div class="flex-Section2-Rectangle">
      <p class="txt4">Email Subscriptions</p>
      <p class="txt5">Last Campaign Performance</p>
      <br><hr class="hr1">
      <div class="ImgTxt2">
      <img class="Section2-Img2" src="icons_exam_task1/time.png" title="time" alt="time" >
      <p class="txt33" >campaign sent 2 daus ago</p>
      </div>
    </div>
  </div>

  <div class="flex-section2">
    <img class="flex-Section2-Img" src="icons_exam_task1/graphics.svg" title="graphics" alt="graphics">
    <div class="flex-Completed-Tasks"></div>
    <div class="flex-Section2-Rectangle">
      <p class="txt4">Completed Tasks</p>
      <p class="txt5">Last Campaign Performance</p>
      <br><hr class="hr1">
      <div class="ImgTxt2">
      <img class="Section2-Img2" src="icons_exam_task1/time.png" title="time" alt="time" >
      <p class="txt33" >campaign event 2 days ago</p>
      </div>
    </div>
  </div>
</section>


<section class="flex-container3">

  <div class="flex-section3">

    <div class="flex-Tasks">
       <p class="txt-1">Tasks:</p> 
       <div class="Bord-Img"> 
        <img class="Bug-img" src="icons_exam_task1/bug.svg"  title="bug" alt="bug"> 
        <p class="txt-2" >Bugs</p>
      </div>
       
      <div  class="txt-3"> 
        <img class="Bug-img1" src="icons_exam_task1/web.svg"  title="web" alt="web"> 
        <p class="txt-2">Webside</p>
      </div>

      <div  class="txt-3"> 
        <img class="Bug-img1" src="icons_exam_task1/cloud.svg" title="cloud" alt="cloud"> 
        <p class="txt-2" >Server</p>
      </div>
      </div>

       <div class="flex-Section3-Rectangle">

      <div class="bor">
        <div class="Bord-Tick-Mark bor-txt1"><img class="Tick-Mark" src="icons_exam_task1/tick-mark.png" title="tick-mark" alt="tick-mark"></div>
         <div class="bor-txt2">
         <p>Sign contact for "What are conference organizers afraid</p>
         <p >of?</p>
        </div>
        <img class="bor-txt3" src="icons_exam_task1/edit.png" title="edit" alt="edit">
        <img class="bor-txt4" src="icons_exam_task1/remove.png" title="remove" alt="remove">
       
    <p style="margin: 0px;"></p>
    <hr class="hr2">
      </div>
    
      <div class="bor1">
        <div class="Bord-Tick-Mark bor-txt1"></div>
         <div class="bor-txt2">
         <p >Lines From Great Rusian Literature? Or E-maile From</p>
         <p >My Boss?</p>
        </div>
        <img class="bor-txt3" src="icons_exam_task1/edit.png" title="edit" alt="edit">
        <img class="bor-txt4" src="icons_exam_task1/remove.png" title="remove" alt="remove">
        <p style="margin: 0px;"></p>
    <hr class="hr2">
      </div>

      <div class="bor1">
        <div class="Bord-Tick-Mark bor-txt1"></div>
         <div class="bor-txt2">
         <p >Sign contact for "What are conference organizers afraid</p>
         <p >of?</p>
        </div>
        <img class="bor-txt3" src="icons_exam_task1/edit.png" title="edit" alt="edit">
        <img class="bor-txt4" src="icons_exam_task1/remove.png" title="remove" alt="remove">
        <p style="margin: 0px;"></p>
    <hr class="hr2">
      </div>

      <div class="bor1">
        <div class="Bord-Tick-Mark bor-txt1"><img class="Tick-Mark" src="icons_exam_task1/tick-mark.png" title="tick-mark" alt="tick-mark"></div>
         <div class="bor-txt2">
         <p >Sign contact for "What are conference organizers afraid</p>
         <p >of?</p>
        </div>
        <img class="bor-txt3" src="icons_exam_task1/edit.png" title="edit" alt="edit">
        <img class="bor-txt4" src="icons_exam_task1/remove.png" title="remove" alt="remove">
      </div>

    </div>

  </div>


  <div class="flex-section3">

    <div class="flex-Tasks1">
      <div>
     <p class="txt-4">Employees Stats</p>
     <p class="txt-5">New employees on 19th September,2019</p>
    </div>
    </div>

     <div class="flex-Section3-Rectangle">

      <div style="margin-top:70px;">
        <p class="txt-6">ID</p>
         <p class="txt-7">Name</p>
         <p class="txt7">Salary</p><p class="txt7">Country</p>
         <p style="margin: 0px;"></p>
         <hr class="hr1" style="margin-top: 0px;">
       </div>

       <div>
        <p class="txt-8">1</p>
         <p class="txt-9">Dakota Rice</p>
         <p class="txt-10">$36.738</p><p class="txt-11" >Niger</p>
         <p style="margin: 0px;"></p>
         <hr class="hr1" style="margin-top: 0px;">
       </div>

       <div>
        <p class="txt-8">1</p>
         <p class="txt-9">Dakota Rice</p>
         <p class="txt-10">$36.738</p><p class="txt-11" >Niger</p>
         <p style="margin: 0px;"></p>
         <hr class="hr1" style="margin-top: 0px;">
       </div>

       <div>
        <p class="txt-8">1</p>
         <p class="txt-9">Dakota Rice</p>
         <p class="txt-10">$36.738</p><p class="txt-11" >Niger</p>
         <p style="margin: 0px;"></p>
         <hr class="hr1" style="margin-top: 0px;">
       </div>

       <div>
        <p class="txt-8">1</p>
         <p class="txt-9">Dakota Rice</p>
         <p class="txt-10">$36.738</p><p class="txt-11" >Niger</p>
         <p style="margin: 0px;"></p>
         <hr class="hr1" style="margin-top: 0px;">
       </div>

       
       <div>
        <p class="txt-8">1</p>
         <p class="txt-9">Dakota Rice</p>
         <p class="txt-10">$36.738</p><p class="txt-11" >Niger</p>
       </div>
     </div>
  </div>


</section>

</main>

<hr class="hr1" style="margin-bottom:30px; margin-top: 50px;">

<footer >
  <div class="footer-fax">
  <div class="flex-item item1">ABOUT</div>
  <div class="flex-item item2">BLOG</div>
  <div class="flex-item item3">LICENSES</div>
  <div class="flex-item item4">2019-made with love</div>
</div>
</footer>
</body>
</html>