Featured List pure html css

featured-list-pure-html-css.markdown

Featured List pure html css

The featured list widget generalizes your blog posts into categories with primary and secondary post presentation list. It's a tool for catching the readers attention throughout multiple blogging niche fast. See the demo

A Pen by Selim Rana on CodePen.

License.

index.html

<div class="upk-container">
   <div class="upk-featured-list">
		<div class="upk-featured-list-item">
			<div class="upk-featured-list-item-box">
				<div class="upk-featured-image-wrap"><img alt="Club La Costa World Welcomes Back Guests" class="upk-featured-img" src="https://picsum.photos/id/1001/1200/800"></div>
				<div class="upk-featured-list-content">
					<div class="upk-featured-list-counter"></div>
					<div>
						<div class="upk-featured-list-category">
							<a href="#" rel="category tag"><span style="background-color:#15A6EF"></span>Travel</a>
						</div>
						<h3 class="upk-featured-list-title"><a class="title-animation-underline" href="#" title="Club La Costa World Welcomes Back Guests">Club La Costa World Welcomes Back Guests</a></h3>
						<div class="upk-featured-meta">
							<div class="upk-flex upk-flex-middle">
								<div class="upk-featured-list-date">
									August 23, 2021
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upk-featured-list-item">
			<div class="upk-featured-list-item-box">
				<div class="upk-featured-image-wrap"><img alt="Business women having a brainstor meeting" class="upk-featured-img" src="https://picsum.photos/id/1016/1200/800"></div>
				<div class="upk-featured-list-content">
					<div class="upk-featured-list-counter"></div>
					<div>
						<div class="upk-featured-list-category">
							<a href="#" rel="category tag"><span style="background-color:#74F5DE"></span>Corporate</a> <a href="#" rel="category tag"><span style="background-color:#CCDCC1"></span>Business</a>
						</div>
						<h3 class="upk-featured-list-title"><a class="title-animation-underline" href="#" title="Business women having a brainstor meeting">Business women having a brainstor meeting</a></h3>
						<div class="upk-featured-meta">
							<div class="upk-flex upk-flex-middle">
								<div class="upk-featured-list-date">
									August 15, 2021
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upk-featured-list-item">
			<div class="upk-featured-list-item-box">
				<div class="upk-featured-image-wrap"><img alt="The Most Beautiful Beaches In Goa" class="upk-featured-img" src="https://picsum.photos/id/1015/1200/800"></div>
				<div class="upk-featured-list-content">
					<div class="upk-featured-list-counter"></div>
					<div>
						<div class="upk-featured-list-category">
							<a href="#" rel="category tag"><span style="background-color:#15A6EF"></span>Travel</a>
						</div>
						<h3 class="upk-featured-list-title"><a class="title-animation-underline" href="#" title="The Most Beautiful Beaches In Goa">The Most Beautiful Beaches In Goa</a></h3>
						<div class="upk-featured-meta">
							<div class="upk-flex upk-flex-middle">
								<div class="upk-featured-list-date">
									August 1, 2021
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upk-featured-list-item">
			<div class="upk-featured-list-item-box">
				<div class="upk-featured-image-wrap"><img alt="Online Tax Filing For Your Business" class="upk-featured-img" src="https://picsum.photos/id/1025/1200/800"></div>
				<div class="upk-featured-list-content">
					<div class="upk-featured-list-counter"></div>
					<div>
						<div class="upk-featured-list-category">
							<a href="#" rel="category tag"><span style="background-color:#CCDCC1"></span>Business</a>
						</div>
						<h3 class="upk-featured-list-title"><a class="title-animation-underline" href="#" title="Online Tax Filing For Your Business">Online Tax Filing For Your Business</a></h3>
						<div class="upk-featured-meta">
							<div class="upk-flex upk-flex-middle">
								<div class="upk-featured-list-date">
									July 11, 2021
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  
    <!--    demo perpose html start -->
   <a class="button" href="https://bdthemes.net/demo/wordpress/ultimate-post-kit/demo/featured-list/">view wordpress demo</a>
  
  <!--    demo perpose html end-->
</div>

style.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
body {
  // margin: 0;
  // padding: 0;
  // box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
.upk-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.upk-featured-list {
	position: relative;
	counter-reset: number-count;
	.upk-featured-list-item {
		position: relative;
		.upk-featured-list-item-box {
			width: 100%;
		}
		.upk-featured-image-wrap {
			display: none;
			.upk-featured-img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}
		.upk-featured-list-content {
			position: relative;
			padding: 10px 20px;
			display: flex;
			align-items: center;
		}
		.upk-featured-list-counter {
			counter-increment: number-count;
			height: 55px;
			min-width: 55px;
			width: 55px;
			background: #ffedef;
			text-align: center;
			border-radius: 80px;
			position: relative;
			display: inline-table;
			margin-right: 15px;
			&:before {
				content: counter(number-count);
				color: #EF233C;
				font-weight: 600;
				font-size: 18px;
				line-height: 1;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.upk-featured-list-title {
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.4;
			a {
				color: #2B2D42;
        text-decoration: none;
				&:hover {
					color: #EF233C;
				}
			}
		}
		.upk-featured-list-category {
			padding-bottom: 5px;
			display: inline-flex;
			a {
				color: #8D99AE;
				font-size: 13px;
				letter-spacing: .5px;
				display: -webkit-inline-box;
				line-height: 1;
				text-transform: capitalize;
				transition: all .3s ease;
				position: relative;
				display: flex;
				align-items: center;
        text-decoration: none;
				span {
					height: 8px;
					width: 8px;
					display: block;
					border-radius: 50%;
					margin-right: 5px;
				}
				+ {
					a {
						margin-left: 10px;
					}
				}
			}
		}
		.upk-featured-meta {
			display: flex;
			align-items: center;
			position: relative;
			color: #8D99AE;
			font-size: 11px;
			line-height: 1;
			padding-top: 10px;
			font-weight: 500;
			text-transform: uppercase;
			.upk-author-name-wrap {
				display: flex;
				.upk-by {
					font-weight: 700;
					padding-right: 6px;
				}
				.upk-author-name {
					text-decoration: none;
					color: #8D99AE;
					font-weight: 500;
				}
			}
			.upk-separator {
				margin: 0 6px;
				font-weight: bold;
			}
			.upk-post-time {
				margin-left: 5px;
				i {
					margin-right: 2px;
				}
			}
		}
		&:nth-child(1) {
			.upk-featured-image-wrap {
				display: flex;
				position: relative;
				overflow: hidden;
				&::before {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					background: linear-gradient(0deg, #2B2D42 0, rgba(141, 153, 174, 0.1) 100%);
					transition: background .3s ease;
				}
			}
			.upk-featured-list-content {
				position: absolute;
				bottom: 0;
				padding-bottom: 20px;
			}
			.upk-featured-list-title {
				a {
					color: #fff;
					&:hover {
						color: #EF233C;
					}
				}
			}
			.upk-featured-list-category {
				a {
					color: #EDF2F4;
				}
			}
			.upk-featured-meta {
				color: #EDF2F4;
				.upk-author-name-wrap {
					.upk-author-name {
						color: #EDF2F4;
					}
				}
			}
		}
		&:nth-child(2) {
			.upk-featured-list-content {
				padding-top: 20px;
			}
		}
		&:nth-last-child(1) {
			.upk-featured-list-content {
				padding-bottom: 20px;
			}
		}
	}
}
.upk-global-link-yes {
	.upk-featured-list {
		.upk-featured-list-item {
			&:hover {
				cursor: pointer;
			}
		}
	}
}
@media (min-width: 768px) {
	.upk-featured-list {
		.upk-featured-list-item {
			.upk-featured-list-content {
				padding: 15px 30px;
			}
			.upk-featured-list-counter {
				height: 80px;
				width: 80px;
				min-width: 80px;
				margin-right: 20px;
				&:before {
					font-size: 24px;
				}
			}
			.upk-featured-list-title {
				font-size: 22px;
			}
			.upk-featured-meta {
				font-size: 12px;
			}
			.upk-featured-list-category {
				padding-bottom: 8px;
				a {
					font-size: 14px;
				}
			}
			&:nth-child(2) {
				.upk-featured-list-content {
					padding-top: 30px;
				}
			}
			&:nth-child(1) {
				.upk-featured-list-content {
					padding-bottom: 30px;
				}
			}
			&:nth-last-child(1) {
				.upk-featured-list-content {
					padding-bottom: 30px;
				}
			}
		}
	}
}


// demo perposes css
.button {
    background: #f00;
    padding: 18px 20px;
    text-transform: uppercase;
    margin-top: 50px;
  margin-bottom: 50px;
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}