Hero section for archive pages

archive-notice.php

@@ -0,0 +1,198 @@
+<?php
+
+/**
+ * The template for displaying notice archive page
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package UIU_CSE
+ */
+
+get_header();
+?>
+
+<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="#">Category</a></li>
+					<li>Page</li>
+				</ul>
+			</nav>
+
+			<div class="content">
+
+				<!-- left content -->
+				<div class="left-content">
+
+					<div class="main-title">Notice</div>
+
+					<div class="short-details">
+						As a graduate you will have access to all University of London alumni services.
+					</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">
+
+		<div id="notice-container">
+			<?php if (have_posts()) : ?>
+				<?php while (have_posts()) : the_post(); ?>
+
+					<!-- single notice -->
+					<div class="notice">
+						<div class="image">
+							<img src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
+						</div>
+
+
+						<div class="details">
+
+							<!-- date -->
+							<div class="date-container">
+								<!-- icon -->
+								<span class="icon">
+									<img src="<?php echo (get_template_directory_uri()) ?>/img/calendar-days-regular.svg" alt="">
+								</span>
+								<!-- date -->
+								<span class="date">
+									June 4th, 2023
+								</span>
+							</div>
+
+							<div class="title">
+								<a href="<?php echo get_permalink(); ?>">
+									<?php echo get_the_title(); ?>
+								</a>
+							</div>
+
+						</div>
+					</div>
+
+				<?php endwhile; ?>
+				<?php the_posts_navigation(); ?>
+			<?php
+			else :
+				get_template_part('template-parts/content', 'none');
+			endif;
+			?>
+
+		</div>
+
+	</section>
+</main><!-- #main -->
+
+<style>
+	#notice-container {
+		padding: 2rem 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1.5rem;
+	}
+
+	#notice-container .notice {
+		width: calc(25% - 1.5rem);
+		margin-bottom: 1rem !important;
+	}
+
+	#notice-container .notice .image {
+		width: 100%;
+		border-bottom: 4px solid #F68B1F;
+		overflow: hidden;
+	}
+
+	#notice-container .notice .image img {
+		width: 100%;
+		transition: 5s;
+	}
+
+	#notice-container .notice .image img:hover {
+		transform: scale(1.5);
+	}
+
+	#notice-container .notice .details {
+		padding: 0.25rem;
+	}
+
+	#notice-container .notice .details .date-container {
+		margin-top: 0.75rem;
+		font-size: 0.7rem;
+		font-weight: 700;
+		color: #2c5d73;
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	#notice-container .notice .details .date-container .icon {
+		width: 0.7rem;
+	}
+
+	#notice-container .notice .details .date-container .icon img {
+		width: 100%;
+	}
+
+	#notice-container .notice .details .title {
+		margin-top: 0.75rem;
+		font-size: 0.9rem;
+		color: #2c5d73;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	#notice-container .notice .details .title a {
+		color: inherit !important;
+	}
+
+	/*# sourceMappingURL=archive-notice.css.map */
+</style>
+<?php
+get_footer();

css/theme-styles.css

@@ -16,10 +16,6 @@ p {
   font-size: 16px;
 }
 
-img {
-  border-radius: 10px;
-}
-
 .grid {
   gap: 30px;
 }
@@ -2150,4 +2146,54 @@ section#lower-nav nav ul > li > a > img {
 
 #search-button:hover {
   background-color: #F68B1F;
-}/*# sourceMappingURL=navbar.css.map */
+}/*# sourceMappingURL=navbar.css.map */
+
+
+/* Archive Hero section */
+
+#archive-hero {
+  padding: 2rem 0 4rem;
+  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%;
+}

img/calendar-days-regular-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192h80v56H48V192zm0 104h80v64H48V296zm128 0h96v64H176V296zm144 0h80v64H320V296zm80-48H320V192h80v56zm0 160v40c0 8.8-7.2 16-16 16H320V408h80zm-128 0v56H176V408h96zm-144 0v56H64c-8.8 0-16-7.2-16-16V408h80zM272 248H176V192h96v56z"/></svg>

img/calendar-days-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#2c5d73}</style><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>

img/calendar-days-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>

img/clipboard-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>

img/envelope-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>

img/facebook-f.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>

img/linkedin-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg>

img/print-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>

img/square-plus-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>

img/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>