<?php
/**
* Template Name: Course Description
*
* @package UIU_CSE
*/
get_header();
?>
<?php while (have_posts()) : the_post(); ?>
<main id="primary" class="site-main">
<section id="archive-hero">
<div class="container">
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#">UG Program</a></li>
<li>Course Description</li>
</ul>
</nav>
<div class="content">
<!-- left content -->
<div class="left-content">
<div class="main-title">Course Description</div>
<div class="short-details">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor ducimus eius magni non.
</div>
<div class="links">
<!-- message -->
<a href="#">
<img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
</a>
<!-- printer -->
<a href="#">
<img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
</a>
<!-- facebook -->
<a href="#">
<img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
</a>
<!-- twitter -->
<a href="#">
<img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
</a>
<!-- linkedin -->
<a href="#">
<img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
</a>
</div>
</div>
<!-- right content -->
<div class="right-content">
<img src="<?php echo (get_template_directory_uri()) ?>/img/campus_07.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="container">
<section id="course-description-container">
<!-- side component -->
<div class="side-comp">
<!-- link -->
<div class="item">
<!-- title -->
<div class="item-title">
UG PROGRAM (B.SC IN CSE)
</div>
<!-- item container -->
<div class="link-container">
<ul>
<li>
<a href="#">Course Plan</a>
</li>
<li>
<a href="#">Course Description</a>
</li>
<li>
<a href="#">Course Plan (Old)</a>
</li>
<li>
<a href="#">Course Description (New)</a>
</li>
<li>
<a href="#">Mentor List</a>
</li>
</ul>
</div>
</div>
<!-- notice -->
<div class="item">
<!-- title -->
<div class="item-title">
NOTICES
</div>
<!-- item container -->
<div class="item-container">
<a class="single-item" href="#">
<div class="date">
January 28, 2024
</div>
<div class="details">
Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
</div>
</a>
<a class="single-item" href="#">
<div class="date">
January 28, 2024
</div>
<div class="details">
Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
</div>
</a>
<a class="single-item" href="#">
<div class="date">
January 28, 2024
</div>
<div class="details">
Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
</div>
</a>
<a class="single-item" href="#">
<div class="date">
January 28, 2024
</div>
<div class="details">
Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
</div>
</a>
<a class="single-item" href="#">
<div class="date">
January 28, 2024
</div>
<div class="details">
Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
</div>
</a>
</div>
<!-- view more button -->
<a class="view-more" href="#">
<div class="icon">
<img src="./img/square-plus-solid.svg" alt="">
</div>
<span>
View more
</span>
</a>
</div>
</div>
<!-- main component -->
<div class="main-comp">
<article>
<!-- <h2>List of Courses</h2> -->
<?php //the_content();
?>
<?php while (have_rows('course_list')) : the_row(); ?>
<div class="label label-group">
<?php the_sub_field('course_group_title'); ?>
</div>
<?php while (have_rows('course_categories')) : the_row(); ?>
<div class="label label-category">
<?php the_sub_field('course_category_name'); ?>
</div>
<?php while (have_rows('courses')) : the_row(); ?>
<div id="accordion" class="accordion">
<button class="accordion-btn">
<?php the_sub_field('course_name'); ?>
</button>
<div class="accordion-body">
<ul class="course-info">
<li>
<span class="title">Course Code: </span>
<span class="data"><?php the_sub_field('course_code'); ?></span>
</li>
<li>
<span class="title">Credit Hour: </span>
<span class="data"><?php the_sub_field('credit_hour'); ?></span>
</li>
<li>
<span class="title">Prerequisite: </span>
<span class="data"><?php the_sub_field('prerequisite'); ?></span>
</li>
</ul>
<p class="details">
<?php the_sub_field('course_details'); ?>
</p>
</div>
</div>
<?php
endwhile ?>
<?php
endwhile ?>
<?php
endwhile ?>
<!-- summery label -->
<div class="label label-summery">
Summary of Course Curriculum
</div>
<!-- summery table -->
<div class="summery-table">
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Group</th>
<th scope="col">Theory</th>
<th scope="col">Laboratory</th>
<th scope="col">Final Year Design Project</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Language</td>
<td>6.0</td>
<td></td>
<td></td>
<td>6.0</td>
</tr>
<tr>
<th scope="row">2</th>
<td>General Education</td>
<td>14.0</td>
<td></td>
<td></td>
<td>14.0</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Basic Sciences</td>
<td>6.0</td>
<td>1.0</td>
<td></td>
<td>7.0</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Mathematics</td>
<td>12.0</td>
<td></td>
<td></td>
<td>12.0</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Other Engineering</td>
<td>9.0</td>
<td>1.0</td>
<td></td>
<td>10.0</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Core Courses</td>
<td>51.0</td>
<td>14.0</td>
<td></td>
<td>65.0</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Elective Courses</td>
<td>15.0</td>
<td></td>
<td></td>
<td>15.0</td>
</tr>
<tr>
<th scope="row">8</th>
<td>University Required Courses</td>
<td></td>
<td>2.0</td>
<td></td>
<td>2.0</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Final Year Design Project</td>
<td></td>
<td></td>
<td>6.0</td>
<td>6.0</td>
</tr>
<tr>
<th scope="col"></th>
<th scope="col">Total</th>
<th scope="col">113.0</th>
<th scope="col">18.0</th>
<th scope="col">6.0</th>
<th scope="col">137.0</th>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</section>
</section>
</main><!-- #main -->
<?php endwhile; // end of the loop.
?>
<style>
#accordion {
margin-bottom: 0.5rem;
border: 1px solid #ccd4d7;
border-radius: 0;
overflow: hidden;
margin-left: 30px;
}
#accordion .accordion-btn {
margin-bottom: unset;
padding: 0.25rem 1rem;
font-weight: 500;
font-size: 0.8rem;
background-color: transparent;
color: #333;
background: #f5f5f5;
border: none;
border-radius: 0;
text-align: start;
margin: unset;
max-width: unset;
}
#accordion .accordion-btn:focus {
border: none;
box-shadow: none;
}
#accordion .accordion-body {
padding: 0.75rem;
font-size: 0.8rem;
display: none;
}
#accordion .accordion-body.show {
display: block;
}
#archive-hero {
padding: 2rem 0;
background: #f3f0ec;
}
#archive-hero .content {
display: flex;
align-items: start;
}
#archive-hero .content .left-content {
padding: 1rem;
padding-left: 0 !important;
flex: 1;
}
#archive-hero .content .left-content .main-title {
font-size: 2.2rem;
font-weight: 500;
color: #000000;
}
#archive-hero .content .left-content .short-details {
margin-top: 1.5rem;
font-size: 1.1rem;
font-weight: 400;
}
#archive-hero .content .left-content .links {
margin-top: 2rem;
display: flex;
gap: 1.8rem;
}
#archive-hero .content .left-content .links a {
height: 1.3rem;
}
#archive-hero .content .left-content .links a:hover {
transform: scale(1.1);
opacity: 1 !important;
}
#archive-hero .content .left-content .links a img {
height: 100%;
}
#archive-hero .content .right-content {
padding: 0 0 1rem 2rem !important;
flex: 1;
align-self: end;
}
#archive-hero .content .right-content img {
width: 100%;
}
a {
transition: all 0.25s ease-in-out;
}
a:hover {
opacity: 0.65;
text-decoration: none;
}
#course-description-container {
margin-top: 3rem;
display: flex;
gap: 1rem;
}
@media (max-width: 1000px) {
#course-description-container {
flex-direction: column;
}
#course-description-container .main-comp {
order: 0;
flex: 1;
}
#course-description-container .side-comp {
order: 1;
flex: 1;
}
}
#course-description-container .main-comp {
flex: 7;
padding: 0 0.75rem 1rem 0;
}
#course-description-container .main-comp article {
margin-top: 0;
padding-top: 1rem;
}
#course-description-container .main-comp article h2 {
font-weight: 500;
text-align: start;
color: #000;
}
#course-description-container .main-comp article .label {
margin-bottom: 0.5rem;
padding: 0.25rem 1rem;
width: -moz-fit-content;
width: fit-content;
font-weight: 600;
font-size: 0.9rem;
border-radius: 0;
}
#course-description-container .main-comp article .label-group {
margin-top: 2rem;
margin-bottom: 1rem;
background: #2c5d73;
color: #fff;
width: 100%;
}
#course-description-container .main-comp article .label-category {
color: #2C5D73;
width: 100%;
margin-top: 1.5rem;
margin-left: 15px;
padding: 0;
}
#course-description-container .main-comp article .label-summery {
background: #f68b1f;
color: #fff;
margin-top: 4rem;
border-radius: 0;
width: 100%;
}
#course-description-container .main-comp article .course-info {
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
#course-description-container .main-comp article .course-info li {
list-style: none;
margin-bottom: unset;
}
#course-description-container .main-comp article .course-info .title {
font-weight: 600;
color: #2c5d73;
}
#course-description-container .main-comp article .course-info .data {
margin-left: 0.25rem;
font-size: 0.75rem;
font-weight: 500;
color: #000000;
}
#course-description-container .main-comp article .details {
font-size: 0.75rem;
margin-bottom: 0.25rem;
}
#course-description-container .main-comp article .summery-table {
margin-top: 1.5rem;
}
#course-description-container .main-comp article .summery-table table {
border: 1px solid #000;
}
#course-description-container .main-comp article .summery-table th,
#course-description-container .main-comp article .summery-table td {
font-size: 0.75rem;
padding: 0.5rem;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
#course-description-container .main-comp article .summery-table th {
font-weight: 700;
}
#course-description-container .main-comp article .summery-table td {
font-weight: 500;
}
#course-description-container .side-comp {
flex: 2;
padding: 0 0.25rem 1rem 0 !important;
}
#course-description-container .side-comp .item {
margin-bottom: 2rem;
padding: 1rem;
background-color: blanchedalmond;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
}
#course-description-container .side-comp .item .item-title {
padding: 0.25rem 1rem 0.75rem;
text-align: center;
border-bottom: 3px solid #F68B1F;
color: #000;
font-weight: 700;
font-size: 0.7rem;
}
#course-description-container .side-comp .item .item-container {
padding: 0.5rem;
}
#course-description-container .side-comp .item .item-container .single-item {
display: block;
margin-bottom: 0.75rem;
padding-bottom: 2rem;
border-bottom: 1px solid #2c5d73;
transition: all 0.25s ease-in-out;
}
#course-description-container .side-comp .item .item-container .single-item:last-child {
border-bottom: none;
margin-bottom: 0rem;
padding-bottom: 0.25rem;
}
#course-description-container .side-comp .item .item-container .single-item .date {
font-size: 0.8rem;
font-weight: 500;
color: #c66f17;
}
#course-description-container .side-comp .item .item-container .single-item .single-item-title {
font-size: 0.8rem;
font-weight: 700;
color: #2c5d73;
}
#course-description-container .side-comp .item .item-container .single-item .date-container {
display: flex;
align-items: center;
gap: 0.7rem;
}
#course-description-container .side-comp .item .item-container .single-item .date-container .date {
font-size: 0.75rem;
}
#course-description-container .side-comp .item .item-container .single-item .date-container .icon {
width: 0.75rem;
color: #ffffff;
}
#course-description-container .side-comp .item .item-container .single-item .date-container .icon img {
width: 100%;
}
#course-description-container .side-comp .item .item-container .single-item .details {
font-size: 0.7rem;
margin-top: 0.3rem;
color: #232323;
}
#course-description-container .side-comp .item .link-container {
padding-top: 0.25rem;
}
#course-description-container .side-comp .item .link-container ul {
margin-bottom: unset;
}
#course-description-container .side-comp .item .link-container ul li {
list-style: none;
}
#course-description-container .side-comp .item .link-container a {
display: block;
color: #333;
font-size: 0.8rem;
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 1px solid #c5c5c5;
}
#course-description-container .side-comp .item .link-container a:hover {
opacity: 1 !important;
color: #ff860d;
}
#course-description-container .side-comp .item .news {
font-size: 0.7rem !important;
padding-bottom: 2rem !important;
}
#course-description-container .side-comp .item .view-more {
display: flex;
align-items: center;
padding: 0 0.5rem 0.5rem;
gap: 0.5rem;
}
#course-description-container .side-comp .item .view-more .icon {
width: 1rem;
}
#course-description-container .side-comp .item .view-more .icon img {
width: 100%;
}
#course-description-container .side-comp .item .view-more span {
font-size: 0.85rem;
color: #2F4858;
font-weight: bolder !important;
transition: all 0.35s ease-in-out;
}
#course-description-container .side-comp .item .view-more:hover {
opacity: 1;
}
#course-description-container .side-comp .item .view-more:hover span {
color: #E55807;
}
@media print {
head,
header,
footer {
display: none;
}
main {
padding-top: 0 !important;
margin-top: 0 !important;
}
#archive-hero {
margin: 0;
}
#notice-container {
padding: 0;
}
}
/*# sourceMappingURL=course-description.css.map */
</style>
<?php
get_footer();