Skip to content

Instantly share code, notes, and snippets.

@patmifsud

patmifsud/index.html

Created December 15, 2022 22:52
Show Gist options
  • Save patmifsud/6ced308b9729a086e5b792c23bee5449 to your computer and use it in GitHub Desktop.
Save patmifsud/6ced308b9729a086e5b792c23bee5449 to your computer and use it in GitHub Desktop.
Download ZIP
Verity e.g. 3 Lottery
Raw
index.html
<body>
<!-- <link href="./style.css" type="text/css" rel="stylesheet" /> -->
<main>
<nav class="navbar">
<ul class="nav-items ">
<li class="nav-item sm-hidden">
<ul class="social-icons">
<li class="nav-item facebook">
<i class="fab fa-facebook-f"></i>
</li>
<li class="nav-item twitter">
<i class="fab fa-twitter"></i>
</li>
<li class="nav-item instagram">
<i class="fab fa-instagram"></i>
</li>
<li class="nav-item youtube">
<i class="fab fa-youtube"></i>
</li>
</ul>
</li>
<li class="nav-item hamburger md-hidden">
<i class="fas fa-bars"></i>
</li>
<li class="nav-item">
<h1 class="logo">DAILY&nbsp;IMPRESSION</h1>
</li>
<li class="nav-item search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
<section class="bg-light">
<div class="">
<ul class="nav-sub dim">
<li>
<a href="#">
Entertainment
</a>
</li>
<li>
<a href="#">Fashion</a>
</li>
<li>
<a href="#">Sports</a>
</li>
<li>
<a href="#">Technology</a>
</li>
<li>
<a href="#">Videos</a>
</li>
</ul>
<section class="top-news container ">
<aside class="trending dim">
<div class="badge-header">
<h2 class="badge">Trending</h2>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="trending image">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="trending image">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="trending image">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="trending image">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="trending image">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
</aside>
<div class="middle">
<article class="card-main">
<h2>
Chemists look to virtual lottery to distribute anti itching medications during shortage
</h2>
<div style="background-image: url(https://firebasestorage.googleapis.com/v0/b/playalong-5474f.appspot.com/o/internalAssets%2Ftemp%2Fcandybg.png?alt=media&token=7d23bbe4-7925-43d8-a36c-16a9fb1bcd2d); background-size: cover; background-position: center; height: 250px; width: 100%; display:block;" > </div>
<p style="padding:17px 0 15px 0;
padding: 17px 0 15px 0;
font-size: 19px;
font-weight: 400;
color: #565656;
">Feeling scratchy? As demand for anti-itching medications has skyrocketed, chemists have had to find creative ways to distribute their limited supply of the medications. In an effort to make sure that everyone has access to the medications, many chemists have turned to a virtual lottery system to ensure fairness.</p>
<p>
The virtual lottery system works by allowing customers to register for a chance to win the anti-itching medications. Those who register are randomly selected and can then purchase the medications from the chemist of their choice. The virtual lottery system ensures that the limited supply of medications is evenly distributed and that everyone can get the relief they need.
</p>
<p>The lottery system has been well-received by customers, who appreciate the fairness and transparency of the system. It also allows chemists to manage their limited supply of medications more effectively, as customers are only able to purchase a certain amount of the medications through the lottery system.
</p>
<!-- <span class="pulledquote">
" We want to thank all our fans for their incredible support"
</span>
<br /> <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Possimus rem corrupti praesentium porro, incidunt at
exercitationem. Ipsum, nostrum. Illo praesentium, assumenda
sed minus sunt delectus, sint tempora amet impedit vero
aspernatur voluptatum eum, illum veniam unde corporis deserunt
nesciunt in? -->
</p>
</article>
</div>
<aside class="latest dim">
<div class="badge-header">
<h2 class="badge">
<i class="fas fa-star"></i>Latest</h2>
</div>
<ul class="list-latest">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquam, sunt?</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquam, sunt?</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquam, sunt?</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquam, sunt?</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquam, sunt?</li>
</ul>
</aside>
</section>
<section id="fashion" class="container dim">
<header class="section-header">
<h2 class="title">Fashion</h2>
<p>VIEW MORE NEWS <i class="fas fa-chevron-circle-right"></i></p>
</header>
<section class="fashion container">
<article class="card left">
<div class="card-image">
<img src="https://source.unsplash.com/1600x900/?fashion"
style="width: 100%; min-height: 200px; object-fit: cover;"
alt="Fashion image">
<div class="badge-title">
<h3>Lorem ipsum dolor sit amet consectetur. Review</h3>
<p class="">Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Aut beatae ut similique architecto debitis dicta
recusandae perspiciatis repellat illum necessitatibus?</p>
</div>
</div>
</article>
<article class="card right">
<div class="card-image">
<img src="https://source.unsplash.com/1600x900/?fashion"
alt="Fashion image">
<div class="badge-title">
<h3>Lorem ipsum dolor sit amet consectetur. Review</h3>
<p class="">Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Aut beatae ut similique architecto debitis dicta
recusandae perspiciatis repellat illum necessitatibus?</p>
</div>
</div>
</article>
</section>
</section>
<section id="more-news" class="container dim">
<header class="section-header">
<h2 class="title">More Videos</h2>
<p>VIEW MORE NEWS <i class="fas fa-chevron-circle-right"></i></p>
</header>
<section class="more-news">
<div class="cards">
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="video cover">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="video cover">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
<div class="card trending">
<div class="card-image">
<img src="https://source.unsplash.com/user/erondu/300x200"
alt="video cover">
<p class="text-mute">Entertainment</p>
</div>
<div class="body">
<div class="inner">
<h3 class="title">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</h3>
</div>
</div>
</div>
</div>
<div class="subscribe-bar dim">
<h2>Subscribe and follow DAILY&nbsp;IMPRESSION</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos, eos.</p>
<p class="sub-title">
<span><i class="fas fa-envelope"></i> Newsletter</span>
</p>
<input class="subscribe" type="text"
placeholder="[email protected]">
<h3 class="logo-text h2">Subscribe Now</h3>
<ul class="social-btns">
<li class="btn btn-facebook">
<span><i class="fab fa-facebook-f"></i> Facebook </span>
</li>
<li class="btn btn-twitter">
<span><i class="fab fa-twitter"></i> Twitter</span>
</li>
<li class="btn btn-instagram">
<span><i class="fab fa-instagram"></i> Instagram</span>
</li>
<li class="btn btn-youtube">
<span><i class="fab fa-youtube"></i> Youtube</span>
</li>
<li class="btn btn-snapchat">
<span><i class="fab fa-snapchat-ghost"></i> Snapchat</span>
</li>
<li class="btn btn-podcast">
<span><i class="fas fa-podcast"></i> Podcast</span>
</li>
</ul>
</div>
</section>
</section>
</div>
</section>
<footer>
<div class="container top dim">
<h2 class="logo">DAILY&nbsp;IMPRESSION</h2>
<ul class="social-icons">
<li class="nav-item facebook">
<i class="fab fa-facebook-f"></i>
</li>
<li class="nav-item pinterest">
<i class="fab fa-pinterest-p"></i>
</li>
<li class="nav-item rss">
<i class="fas fa-rss"></i>
</li>
<li class="nav-item email">
<i class="far fa-envelope"></i>
</li>
<li class="nav-item google">
<i class="fab fa-google"></i>
</li>
<li class="nav-item twitter">
<i class="fab fa-twitter"></i>
</li>
<li class="nav-item instagram">
<i class="fab fa-instagram"></i>
</li>
<li class="nav-item youtube">
<i class="fab fa-youtube"></i>
</li>
</ul>
<ul class="nav-basic light">
<li>Entertainment</li>
<li>Fashion</li>
<li>Sports</li>
<li>Technology</li>
<li>Videos</li>
</ul>
<p class="sub-footer">Copyright &#169; 2020 VOZSY News. All rights
reserved.</p>
</div>
</footer>
</main>
</body>
Raw
style.css
/* need to map over */
/* make it for social media colors */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Oswald", sans-serif;
}
/* quick helper classes */
.dim {
opacity: 0.3;
filter: saturate(0%);
}
.no-border, .no-border * {
border-bottom: none!important;
}
.pulledquote{
display: inline-block;
padding: 30px 40px 10px 50px;
font-style: italic;
font-size: 1.2rem;
color: #2aead3;
font-family: "Russo One", sans-serif;
}
/* elements */
h1 {
font-size: 2.5rem;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
img {
width: 100%;
height: auto;
}
footer {
background-color: #0c0c0c;
}
footer .top {
background-color: #0c0c0c;
display: grid;
grid-template-areas: "logo" "social" "nav";
justify-content: center;
justify-items: center;
padding: 2rem;
border-bottom: solid rgba(255, 255, 255, 0.15) 2px;
}
footer .top .logo {
grid-area: logo;
}
footer .top .social-icons {
grid-area: social;
justify-content: center;
padding: 1rem 0;
border-bottom: solid rgba(255, 255, 255, 0.15) 2px;
width: 100%;
}
footer .top .nav-basic {
grid-area: nav;
padding: 1.5rem 0;
}
footer .top .sub-footer {
border-top: solid rgba(255, 255, 255, 0.15) 2px;
color: #fff;
padding: 2rem 0 0 0;
text-align: center;
width: 100%;
}
@media only screen and (min-width: 600px) {
footer .container .nav-basic {
grid-template-columns: repeat(5, auto);
}
footer .container .nav-basic li {
padding: 1rem;
}
}
.sm-hidden {
display: none;
}
.md-hidden {
display: block;
}
.logo {
font-weight: bolder;
font-size: 1.8rem;
color: #2aead3;
font-family: "Russo One", sans-serif;
}
.logo-text {
font-size: 1.4rem;
color: #2aead3;
}
.bg-dark {
background-color: black;
color: #fff;
}
.bg-light {
background-color: #fff;
color: #000;
}
.text-primary {
color: #2aead3;
}
.text-mute {
color: #5e5e5e;
font-size: 0.75rem;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.col {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 100%;
max-width: 100%;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1400px;
}
.advert {
position: fixed;
z-index: -1000;
width: 100%;
}
.advertisment {
width: 50%;
margin: 0 auto;
text-align: center;
}
.badge-header {
margin-bottom: 3rem;
border-bottom: 2px solid black;
width: 100%;
padding: 0 1rem 0;
background-color: #fff;
}
.badge-header .badge {
position: relative;
top: 29px;
justify-content: center;
align-items: center;
display: flex;
margin: 0 auto;
width: 65%;
padding: 1rem;
background-color: #000;
text-align: center;
color: #fff;
}
.badge-header .badge i {
margin-right: 0.5rem;
}
.badge-title {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
}
.badge-grey {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
background-color: #9e9e9e;
font-weight: 200;
text-align: center;
}
.badge-grey i {
margin-bottom: 1rem;
width: 100%;
font-size: 2.5rem;
}
.badge-play-overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 0.5rem 1rem;
}
/* badge colors */
.badge-entertainment {
background-color: #9c27b0;
}
.badge-fashion {
background-color: #87ceeb;
}
.badge-sports {
background-color: #ff5722;
}
.badge-technology {
background-color: #4caf50;
}
.badge-videos {
background-color: #009688;
}
.nav-basic {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(1, auto);
grid-row-gap: 2rem;
align-items: center;
}
.nav-basic.light {
color: #fff;
}
.nav-sub {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, auto);
grid-row-gap: 2rem;
align-items: center;
display: none;
padding: 1rem;
justify-content: center;
border-bottom: 1px solid #ddd;
}
.nav-sub.light {
color: #fff;
}
.nav-sub li {
padding: 1rem;
}
.nav-sub li a {
padding-bottom: 0.5rem;
text-decoration: none;
color: #000;
}
.nav-sub li a:hover {
border-bottom: #2aead3 solid 4px;
}
@media only screen and (min-width: 600px) {
.nav-sub {
display: grid;
}
}
/* add later */
.navbar {
background-color: #000000;
color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.navbar .nav-items {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto);
justify-content: center;
align-items: center;
justify-items: inherit;
}
.navbar .nav-items .nav-item {
padding: 0 0.5rem;
}
.navbar .nav-items .nav-item.hamburger {
color: #777777;
font-size: 2rem;
}
.navbar .nav-items .nav-item.search {
font-size: 1.5rem;
color: #777777;
text-align: right;
}
/* rename a new one*/
.social-icons {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
list-style: none;
color: #fff;
}
.social-icons .nav-item {
padding: 7px !important;
background-color: rgba(255, 255, 255, 0.15);
margin: 0.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
font-size: 1.1rem;
}
.social-icons .nav-item.facebook:hover {
background-color: #4267b2;
}
.social-icons .nav-item.twitter:hover {
background-color: #1da1f2;
}
.social-icons .nav-item.youtube:hover {
background-color: #ff0000;
}
.social-icons .nav-item.instagram:hover {
background-color: #c13584;
}
.social-icons .nav-item.pinterest:hover {
background-color: #e60023;
}
.social-icons .nav-item.google:hover {
background-color: #f4b400;
}
.social-icons .nav-item.rss:hover {
background-color: #e58738;
}
.social-icons .nav-item.email:hover {
background-color: #2da112;
}
@media only screen and (max-width: 413px) and (min-width: 374px) {
}
@media only screen and (max-width: 599px) and (min-width: 413px) {
}
@media only screen and (max-width: 800px) and (min-width: 600px) {
.navbar .nav-items .nav-item {
padding: 0 1.5rem;
}
}
@media only screen and (min-width: 800px) {
.navbar .nav-items {
grid-template-columns: 3fr 1fr 3fr !important;
}
.navbar .nav-items .nav-item {
padding: 0 2.5rem;
}
.sm-hidden {
display: block;
}
.md-hidden {
display: none;
}
}
@media only screen and (min-width: 1367px) {
.navbar .nav-items {
justify-items: center;
}
}
@media only screen and (min-width: 1800px) {
}
.card {
display: flex;
margin: 1rem 0;
padding-right: 1rem;
}
.card.trending {
border-top: solid grey 1px;
}
.card .card-image {
position: relative;
}
.card .card-image.with-text img {
opacity: 0.5;
}
.card .card-image img {
width: 100%;
height: 100%;
}
.card .card-image .text-mute {
color: #5e5e5e;
font-size: 0.75rem;
position: absolute;
bottom: 0;
background-color: #2aead3;
padding: 0.5rem;
color: #fff;
width: 100%;
}
.card .card-image .title {
position: absolute;
top: 0;
padding: 0.5rem;
}
.card .body {
padding: 0.5rem;
}
.card .body .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.card .body .inner .title {
font-size: 0.95rem;
}
/* need to remove redundancies */
.card-w-badge {
display: flex;
margin: 1rem 0;
padding-right: 1rem;
flex-direction: column;
}
.card-w-badge .card-image {
position: relative;
}
.card-w-badge .card-image img {
width: 100%;
height: 100%;
}
.card-w-badge .card-image .badge-text {
position: absolute;
top: 0;
padding: 0.5rem;
}
.card-w-badge .body {
padding: 0.5rem 0;
}
.card-w-badge .body p {
font-weight: 300;
}
.card-sub {
display: flex;
margin: 1rem 0 0 0;
padding-right: 1rem;
flex-direction: column;
}
.card-sub .card-image {
position: relative;
}
.card-sub .card-image img {
width: 100%;
height: 100%;
}
.card-sub .card-image .badge-text {
position: absolute;
top: 0;
padding: 0.5rem;
}
.card-sub .body {
padding: 0.5rem 0 0 0;
}
.card-sub .body p {
font-weight: 300;
}
.card-main p {
padding: 0.5rem 0 1rem 0;
font-weight: 300;
}
.cards {
padding-left: 1rem;
padding-right: 1rem;
}
.list-latest {
list-style: none;
margin: 0;
padding: 0;
}
.list-latest li {
padding: 0.5rem 1rem 1rem 0rem;
border-bottom: 1px solid #ddd;
margin-right: 1rem;
font-weight: 300;
transition: color 1s;
}
.list-latest li:hover {
color: red;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 1rem;
}
.section-header .title {
text-align: center;
}
.top-news {
display: grid;
grid-template-columns: repeat(1, auto);
}
.top-news .middle {
grid-column-start: 1;
grid-row-start: 1;
}
.top-news .middle h2 {
text-align: center;
font-size: 2rem;
padding: 1.2rem 0;
}
@media only screen and (max-width: 1000px) and (min-width: 750px) {
.top-news {
display: grid;
grid-template-columns: auto 1fr 1fr;
grid-column-gap: 0;
}
.top-news .trending {
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 4;
}
.top-news .trending .card {
flex-direction: column;
}
.top-news .middle {
grid-column: 1 / span 3;
grid-row-start: 1;
}
.top-news .latest {
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;
}
}
@media only screen and (min-width: 1400px) {
.top-news {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-column-gap: 1rem;
}
.top-news .middle {
grid-column-start: auto;
grid-row-start: auto;
}
}
.sub-middle {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.entertainment {
display: grid;
grid-template-columns: 1fr;
}
@media only screen and (min-width: 750px) {
.entertainment {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
@media only screen and (max-width: 750px) {
#entertainment .section-header .title {
font-size: 1.4rem;
}
}
.more-news {
display: grid;
grid-template-columns: 3fr 1fr;
}
@media only screen and (min-width: 750px) and (max-width: 1300px) {
.more-news {
grid-template-columns: 3fr 2fr;
}
}
@media only screen and (max-width: 750px) {
.more-news {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
.technology,
.fashion,
.sports {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, auto);
grid-row-gap: 1rem;
}
@media only screen and (min-width: 750px) {
.technology,
.fashion,
.sports {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-template-rows: repeat(2, auto);
}
.technology .left,
.fashion .left,
.sports .left {
grid-column-start: 1;
grid-column-end: 3;
}
.technology .right,
.fashion .right,
.sports .right {
grid-column-start: 3;
grid-column-end: 5;
}
}
@media only screen and (max-width: 750px) {
.card.left,
.card.right {
justify-content: center;
}
.technology .card .card-image img,
.fashion .card .card-image img,
.sports .card .card-image img {
height: 250px;
object-fit: cover;
}
.technology .badge-title,
.fashion .badge-title,
.sports .badge-title {
bottom: 5px;
}
.advertisment {
width: 100%;
}
.sub-middle {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (min-width: 750px) and (max-width: 1300px) {
.technology .left,
.fashion .left,
.sports .left {
grid-column-start: 1;
grid-column-end: 2;
}
.technology .right,
.fashion .right,
.sports .right {
grid-column-start: 2;
grid-column-end: 3;
}
.fashion,
.technology,
.sports {
grid-template-columns: repeat(2, auto);
grid-auto-rows: auto;
}
}
.videos {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, auto);
grid-row-gap: 1rem;
}
@media only screen and (min-width: 750px) {
.videos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-template-rows: repeat(4, auto);
}
.videos .card.main {
grid-column-start: 1;
grid-column-end: 3;
}
.videos .left {
grid-column-start: 1;
grid-column-end: 3;
}
.videos .right {
grid-column-start: 3;
grid-column-end: 5;
}
}
.btn {
text-decoration: none;
color: #fff;
margin: 0.6rem 0.6rem 0.6rem 0;
border-radius: 5px;
padding: 10px 25px;
border: none;
}
.social-btns {
list-style: none;
margin: 0;
padding: 0;
}
.btn.btn-facebook {
background-color: #4267b2;
}
.btn.btn-facebook i {
margin-right: 0.5rem;
}
.btn.btn-twitter {
background-color: #1da1f2;
}
.btn.btn-twitter i {
margin-right: 0.5rem;
}
.btn.btn-youtube {
background-color: #ff0000;
}
.btn.btn-youtube i {
margin-right: 0.5rem;
}
.btn.btn-instagram {
background-color: #c13584;
}
.btn.btn-instagram i {
margin-right: 0.5rem;
}
.btn.btn-pinterest {
background-color: #e60023;
}
.btn.btn-pinterest i {
margin-right: 0.5rem;
}
.btn.btn-google {
background-color: #f4b400;
}
.btn.btn-google i {
margin-right: 0.5rem;
}
.btn.btn-rss {
background-color: #e58738;
}
.btn.btn-rss i {
margin-right: 0.5rem;
}
.btn.btn-email {
background-color: #2da112;
}
.btn.btn-email i {
margin-right: 0.5rem;
}
.btn.btn-logo {
background-color: #2aead3;
}
.btn.btn-logo i {
margin-right: 0.5rem;
}
.btn.btn-snapchat {
background-color: #fffc00;
color: #000;
}
.btn.btn-snapchat i {
margin-right: 0.5rem;
}
.btn.btn-podcast {
background-color: #8f35cb;
}
.btn.btn-podcast i {
margin-right: 0.5rem;
}
.subscribe-bar {
margin: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-top: 10px solid #2aead3;
}
.subscribe-bar h2 {
font-size: 1.9rem;
font-weight: bolder;
}
.subscribe-bar p {
color: #888282;
}
.subscribe-bar .sub-title {
color: #000;
font-size: 1.8rem;
}
.subscribe-bar::before {
border-top: 2px solid black;
}
input.subscribe {
border: none;
background-color: #fff;
margin: 1rem 0;
padding: 0.5rem 0;
border-bottom: 1px solid #ddd;
width: 100%;
}
Raw
verity-e-g-3-lottery.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment