Notice - single template

single-notice.php

@@ -0,0 +1,584 @@
+<?php
+
+/**
+ * The template for displaying all single notice posts
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
+ *
+ * @package UIU_CSE
+ */
+
+get_header(); ?>
+<?php while (have_posts()) : the_post(); ?>
+
+
+
+	<main id="main" class="site-main" role="main">
+
+		<section id="hero-single">
+
+			<div class="container">
+
+
+				<!-- page title -->
+				<div class="page-title">
+					Notice
+				</div>
+
+				<!-- breadcrumb -->
+				<nav class="breadcrumb" aria-label="breadcrumb">
+					<ul>
+						<li><a href="#">Home</a></li>
+						<li><a href="#">Category</a></li>
+						<li>Page</li>
+					</ul>
+				</nav>
+
+
+
+				<div class="content">
+
+					<!-- main title -->
+					<div class="main-title">
+						100% tuition fee and other fees waiver for meritorious and poor students of underdeveloped regions of bangladesh.
+					</div>
+
+					<div class="publish-date">
+						<span class="title">Publish Date :</span>
+						<span class="date">January 28, 2024</span>
+					</div>
+
+					<div class="links">
+
+						<!-- message -->
+						<a href="mailto:#">
+							<img src="./img/envelope-solid.svg" alt="">
+						</a>
+
+						<!-- printer -->
+						<a onclick="window.print()">
+							<img src="./img/print-solid.svg" alt="">
+						</a>
+
+						<!-- facebook -->
+						<a href="#">
+							<img src="./img/facebook-f.svg" alt="">
+						</a>
+
+						<!-- twitter -->
+						<a href="#">
+							<img src="./img/twitter.svg" alt="">
+						</a>
+
+						<!-- linkedin -->
+						<a href="#">
+							<img src="./img/linkedin-in.svg" alt="">
+						</a>
+
+					</div>
+
+
+				</div>
+			</div>
+
+
+
+		</section>
+
+
+
+
+		<div class="container">
+
+			<section id="notice-container">
+
+
+				<!-- main component -->
+				<div class="main-comp">
+
+					<div class="feature-image-holder">
+						<img src="./img/research_03.jpg" alt="">
+					</div>
+
+
+					<!-- notice details -->
+					<div class="notice-details">
+
+						<h2>Lorem ipsum dolor sit amet.</h2>
+
+						<p>
+							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi, beatae. Inventore nesciunt provident sequi repudiandae molestias, hic aut fugiat aliquid optio amet libero distinctio illum corporis corrupti numquam reiciendis? Unde inventore qui sequi quae totam rem commodi? Amet molestiae quas sapiente ipsum et error dolores eligendi, excepturi suscipit ea repellat.
+						</p>
+
+
+
+
+						<h5>Lorem ipsum dolor sit amet.</h5>
+
+						<p>
+							Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia hic quo enim praesentium saepe magni dicta deserunt earum at minus pariatur dolorum rem repudiandae aperiam odio, labore, maiores sed nihil cupiditate ab necessitatibus sapiente maxime harum laborum? Dolorem reiciendis praesentium, voluptatibus necessitatibus distinctio, voluptatum harum natus earum velit quasi soluta, atque tempora eum dolor totam. Ex, necessitatibus. Cumque, soluta? Quaerat blanditiis, animi cumque voluptatem dignissimos unde eaque necessitatibus et numquam!
+						</p>
+
+						<h5>Lorem ipsum dolor sit amet.</h5>
+
+						<p>
+							Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia hic quo enim praesentium saepe magni dicta deserunt earum at minus pariatur dolorum rem repudiandae aperiam odio, labore, maiores sed nihil cupiditate ab necessitatibus sapiente maxime harum laborum? Dolorem reiciendis praesentium, voluptatibus necessitatibus distinctio, voluptatum harum natus earum velit quasi soluta, atque tempora eum dolor totam. Ex, necessitatibus. Cumque, soluta? Quaerat blanditiis, animi cumque voluptatem dignissimos unde eaque necessitatibus et numquam!
+						</p>
+
+						<h5>Lorem ipsum dolor sit amet.</h5>
+
+						<img src="./img/campus_03.jpg" alt="">
+
+						<p>
+							Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia hic quo enim praesentium saepe magni dicta deserunt earum at minus pariatur dolorum rem repudiandae aperiam odio, labore, maiores sed nihil cupiditate ab necessitatibus sapiente maxime harum laborum? Dolorem reiciendis praesentium, voluptatibus necessitatibus distinctio, voluptatum harum natus earum velit quasi soluta, atque tempora eum dolor totam. Ex, necessitatibus. Cumque, soluta? Quaerat blanditiis, animi cumque voluptatem dignissimos unde eaque necessitatibus et numquam!
+						</p>
+
+					</div>
+
+
+
+				</div>
+
+
+
+				<!-- side component -->
+				<div class="side-comp">
+
+
+					<!--  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>
+
+
+					<!--  news -->
+					<div class="item">
+
+						<!-- title -->
+						<div class="item-title">
+							NEWS
+						</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>
+
+
+			</section>
+
+		</div>
+
+
+	</main>
+
+<?php endwhile; ?>
+<style>
+	#hero-single {
+		padding: 6rem 0 3rem;
+	}
+
+	#hero-single .page-title {
+		font-size: 1.8rem;
+		font-weight: bold;
+		color: #0f465e;
+		font-family: "DM Serif Text", serif;
+		letter-spacing: 3px;
+	}
+
+	#hero-single .breadcrumb {
+		margin-top: 0 !important;
+	}
+
+	#hero-single .breadcrumb li {
+		padding-top: 10px;
+		padding-bottom: 10px;
+		font-size: 0.8rem;
+		font-weight: 600;
+	}
+
+	#hero-single .content {
+		display: block;
+	}
+
+	#hero-single .main-title {
+		margin-top: 1.5rem;
+		font-size: 1.7rem;
+		font-weight: bold;
+		letter-spacing: 2px;
+		line-height: 1.4 !important;
+		color: #333 !important;
+		text-transform: capitalize;
+		font-family: "DM Serif Text", serif;
+	}
+
+	#hero-single .publish-date {
+		margin-top: 0.75rem;
+		font-size: 0.8rem;
+	}
+
+	#hero-single .publish-date .title {
+		font-weight: bold;
+	}
+
+	#hero-single .publish-date .date {
+		margin-left: 0.25rem;
+		font-weight: 600;
+	}
+
+	#hero-single .links {
+		margin-top: 2.5rem;
+		padding-top: 1rem;
+		border-top: 1px solid #000;
+		display: flex;
+		gap: 1.5rem;
+	}
+
+	#hero-single .links a {
+		height: 1.2rem;
+	}
+
+	#hero-single .links a:hover {
+		transform: scale(1.2);
+		opacity: 1 !important;
+	}
+
+	#hero-single .links a img {
+		height: 100%;
+	}
+
+	#notice-info {
+		padding-top: 0;
+		margin-bottom: 1rem;
+	}
+
+	#notice-info .content {
+		background: #0f465e;
+		padding: 1.5rem 2rem;
+		color: #fff;
+	}
+
+	#notice-info .content .single-content {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 0.75rem;
+		font-size: 0.8rem;
+	}
+
+	#notice-info .content .single-content:last-child {
+		margin-bottom: unset;
+	}
+
+	#notice-info .content .single-content .title {
+		min-width: 200px;
+		font-weight: 700;
+		font-size: inherit;
+	}
+
+	#notice-info .content .single-content .detail {
+		font-size: inherit;
+		font-weight: 500;
+	}
+
+	a {
+		transition: all 0.25s ease-in-out;
+	}
+
+	a:hover {
+		opacity: 0.65;
+		text-decoration: none;
+	}
+
+	#notice-container {
+		margin: 0.5rem 0;
+		display: flex;
+		gap: 1rem;
+	}
+
+	@media (max-width: 1000px) {
+		#notice-container {
+			display: block;
+		}
+	}
+
+	#notice-container .main-comp {
+		flex: 5;
+		padding: 0 0.75rem 1rem 0;
+	}
+
+	#notice-container .main-comp .feature-image-holder {
+		width: 100%;
+		margin-bottom: 2rem;
+	}
+
+	#notice-container .main-comp .feature-image-holder img {
+		width: 100%;
+	}
+
+	#notice-container .main-comp .notice-details {
+		margin-top: 1rem;
+	}
+
+	#notice-container .main-comp .notice-details img {
+		width: 100%;
+		margin-bottom: 2rem;
+	}
+
+	#notice-container .side-comp {
+		flex: 2;
+		padding: 0 0.25rem 1rem 0 !important;
+	}
+
+	#notice-container .side-comp .item {
+		margin-bottom: 2rem;
+		border: 1px solid #2c5d73;
+	}
+
+	#notice-container .side-comp .item .item-title {
+		padding: 0.25rem 1rem;
+		text-align: center;
+		background: #2c5d73;
+		color: #fff;
+	}
+
+	#notice-container .side-comp .item .item-container {
+		padding: 0.5rem;
+	}
+
+	#notice-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;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item:last-child {
+		border-bottom: none;
+		margin-bottom: 0rem;
+		padding-bottom: 0.25rem;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .date {
+		font-size: 0.8rem;
+		font-weight: 500;
+		color: #c66f17;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .single-item-title {
+		font-size: 0.8rem;
+		font-weight: 700;
+		color: #2c5d73;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .date-container {
+		display: flex;
+		align-items: center;
+		gap: 0.7rem;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .date-container .date {
+		font-size: 0.75rem;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .date-container .icon {
+		width: 0.75rem;
+		color: #ffffff;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .date-container .icon img {
+		width: 100%;
+	}
+
+	#notice-container .side-comp .item .item-container .single-item .details {
+		font-size: 0.7rem;
+		margin-top: 0.3rem;
+		color: #232323;
+	}
+
+	#notice-container .side-comp .item .news {
+		font-size: 0.7rem !important;
+		padding-bottom: 2rem !important;
+	}
+
+	#notice-container .side-comp .item .view-more {
+		display: flex;
+		align-items: center;
+		padding: 0 0.5rem 0.5rem;
+		gap: 0.5rem;
+	}
+
+	#notice-container .side-comp .item .view-more .icon {
+		width: 1rem;
+	}
+
+	#notice-container .side-comp .item .view-more .icon img {
+		width: 100%;
+	}
+
+	#notice-container .side-comp .item .view-more span {
+		font-size: 0.85rem;
+		color: #2F4858;
+		font-weight: bolder !important;
+		transition: all 0.35s ease-in-out;
+	}
+
+	#notice-container .side-comp .item .view-more:hover {
+		opacity: 1;
+	}
+
+	#notice-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=single-notice.css.map */
+</style>
+<?php get_footer(); ?>