API tools faq
paste
wojtekw0703

IT Internship Portal

wojtekw0703
Nov 6th, 2020 (edited)
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.55 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html lang="en">
  6. <head>
  7.     <meta charset="utf-8">
  8.     <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
  9.     <!--  All snippets are MIT license http://bootdey.com/license -->
  10.     <title>career list - Bootdey.com</title>
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">
  12.     <link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  13.     <style type="text/css">
  14.         body{
  15.     background:#f5f5f5;
  16.     margin-top:20px;}
  17.  
  18. /* ===== Career ===== */
  19. .career-form {
  20.   background-color: #4e63d7;
  21.   border-radius: 5px;
  22.   padding: 0 16px;
  23. }
  24.  
  25. .career-form .form-control {
  26.   background-color: rgba(255, 255, 255, 0.2);
  27.   border: 0;
  28.   padding: 12px 15px;
  29.   color: #fff;
  30. }
  31.  
  32. .career-form .form-control::-webkit-input-placeholder {
  33.   /* Chrome/Opera/Safari */
  34.   color: #fff;
  35. }
  36.  
  37. .career-form .form-control::-moz-placeholder {
  38.   /* Firefox 19+ */
  39.   color: #fff;
  40. }
  41.  
  42. .career-form .form-control:-ms-input-placeholder {
  43.   /* IE 10+ */
  44.   color: #fff;
  45. }
  46.  
  47. .career-form .form-control:-moz-placeholder {
  48.   /* Firefox 18- */
  49.   color: #fff;
  50. }
  51.  
  52. .career-form .custom-select {
  53.   background-color: rgba(255, 255, 255, 0.2);
  54.   border: 0;
  55.   padding: 12px 15px;
  56.   color: #fff;
  57.   width: 100%;
  58.   border-radius: 5px;
  59.   text-align: left;
  60.   height: auto;
  61.   background-image: none;
  62. }
  63.  
  64. .career-form .custom-select:focus {
  65.   -webkit-box-shadow: none;
  66.           box-shadow: none;
  67. }
  68.  
  69. .career-form .select-container {
  70.   position: relative;
  71. }
  72.  
  73. .career-form .select-container:before {
  74.   position: absolute;
  75.   right: 15px;
  76.   top: calc(50% - 14px);
  77.   font-size: 18px;
  78.   color: #ffffff;
  79.   content: '\F2F9';
  80.   font-family: "Material-Design-Iconic-Font";
  81. }
  82.  
  83. .filter-result .job-box {
  84.   -webkit-box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
  85.           box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
  86.   border-radius: 10px;
  87.   padding: 10px 35px;
  88. }
  89.  
  90. ul {
  91.   list-style: none;
  92. }
  93.  
  94. .list-disk li {
  95.   list-style: none;
  96.   margin-bottom: 12px;
  97. }
  98.  
  99. .list-disk li:last-child {
  100.   margin-bottom: 0;
  101. }
  102.  
  103. .job-box .img-holder {
  104.   height: 65px;
  105.   width: 65px;
  106.   background-color: #4e63d7;
  107.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(78, 99, 215, 0.9)), to(#5a85dd));
  108.   background-image: linear-gradient(to right, rgba(78, 99, 215, 0.9) 0%, #5a85dd 100%);
  109.   font-family: "Open Sans", sans-serif;
  110.   color: #fff;
  111.   font-size: 22px;
  112.   font-weight: 700;
  113.   display: -webkit-box;
  114.   display: -ms-flexbox;
  115.   display: flex;
  116.   -webkit-box-pack: center;
  117.       -ms-flex-pack: center;
  118.           justify-content: center;
  119.   -webkit-box-align: center;
  120.       -ms-flex-align: center;
  121.           align-items: center;
  122.   border-radius: 65px;
  123. }
  124.  
  125. .career-title {
  126.   background-color: #4e63d7;
  127.   color: #fff;
  128.   padding: 15px;
  129.   text-align: center;
  130.   border-radius: 10px 10px 0 0;
  131.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(78, 99, 215, 0.9)), to(#5a85dd));
  132.   background-image: linear-gradient(to right, rgba(78, 99, 215, 0.9) 0%, #5a85dd 100%);
  133. }
  134.  
  135. .job-overview {
  136.   -webkit-box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
  137.           box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
  138.   border-radius: 10px;
  139. }
  140.  
  141. @media (min-width: 992px) {
  142.   .job-overview {
  143.     position: -webkit-sticky;
  144.     position: sticky;
  145.     top: 70px;
  146.   }
  147. }
  148.  
  149. .job-overview .job-detail ul {
  150.   margin-bottom: 28px;
  151. }
  152.  
  153. .job-overview .job-detail ul li {
  154.   opacity: 0.75;
  155.   font-weight: 600;
  156.   margin-bottom: 15px;
  157. }
  158.  
  159. .job-overview .job-detail ul li i {
  160.   font-size: 20px;
  161.   position: relative;
  162.   top: 1px;
  163. }
  164.  
  165. .job-overview .overview-bottom,
  166. .job-overview .overview-top {
  167.   padding: 35px;
  168. }
  169.  
  170. .job-content ul li {
  171.   font-weight: 600;
  172.   opacity: 0.75;
  173.   border-bottom: 1px solid #ccc;
  174.   padding: 10px 5px;
  175. }
  176.  
  177. @media (min-width: 768px) {
  178.   .job-content ul li {
  179.     border-bottom: 0;
  180.     padding: 0;
  181.   }
  182. }
  183.  
  184. .job-content ul li i {
  185.   font-size: 20px;
  186.   position: relative;
  187.   top: 1px;
  188. }
  189. .mb-30 {
  190.     margin-bottom: 30px;
  191. }
  192.     </style>
  193. </head>
  194. <body>
  195. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" integrity="sha256-3sPp8BkKUE7QyPSl6VfBByBroQbKxKG7tsusY2mhbVY=" crossorigin="anonymous" />
  196. <div class="container">
  197.    
  198.             <div class="row">
  199.                 <div class="col-lg-10 mx-auto">
  200.                     <div class="career-search mb-60">
  201.  
  202.                     <div class="filter-result">
  203.                       <?php      
  204.  
  205.  
  206.    $con=mysqli_connect("localhost","root@","","internship_database");
  207.    // Check connection
  208.    if (mysqli_connect_errno())
  209.      {
  210.      echo "Failed to connect to MySQL: " . mysqli_connect_error();
  211.      }
  212.  
  213.  
  214.    $result = mysqli_query($con,"SELECT * FROM internships");
  215.                    
  216.    while($row = mysqli_fetch_array($result))
  217.      {
  218.        $title= $row['job_title'];
  219.        $company = $row['company_name']; //these are the fields that you have stored in your database table employee
  220.        $location = $row['location'];
  221.    
  222. ?>
  223.                    
  224.                              <div class="job-box d-md-flex align-items-center justify-content-between mb-30">
  225.                                  <div class="job-left my-4 d-md-flex align-items-center flex-wrap">
  226.  
  227.                                     <div class="img-holder mr-md-4 mb-md-0 mb-4 mx-auto mx-md-0 d-md-none d-lg-flex">
  228.                                     </div>
  229.                                     <div class="job-content">
  230.  
  231.                                         <h5 class="text-center text-md-left"> <?php echo $title; ?></h5>
  232.                                         <ul class="d-md-flex flex-wrap text-capitalize ff-open-sans">
  233.                                             <li class="mr-md-4">
  234.                                                 <i class="zmdi zmdi-pin mr-2"> <?php echo $company; ?></i>
  235.                                             </li>
  236.                                             <li class="mr-md-4">
  237.                                                 <i class="zmdi zmdi-money mr-2"></i> <?php echo $location; ?>
  238.                                             </li>
  239.                                             <li class="mr-md-4">
  240.                                                 <i class="zmdi zmdi-time mr-2"></i>
  241.                                             </li>
  242.                                         </ul>
  243.                                     </div>
  244.                                 </div>
  245.                                 <div class="job-right my-4 flex-shrink-0">
  246.                                     <a href="#" class="btn d-block w-100 d-sm-inline-block btn-light">Apply now</a>
  247.                                 </div>
  248.                             </div>
  249.   <?php } ?>
  250.  
  251.                     <!-- START Pagination -->
  252.                     <nav aria-label="Page navigation">
  253.                         <ul class="pagination pagination-reset justify-content-center">
  254.                            
  255.                             </li>
  256.                            
  257.                            
  258.                         </ul>
  259.                     </nav>
  260.                     <!-- END Pagination -->
  261.                 </div>
  262.             </div>
  263.  
  264.         </div>
  265. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  266. <script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  267. <script type="text/javascript">
  268.    
  269. </script>
  270. </body>
  271.                            
  272.  
  273. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!