Skip to content

Instantly share code, notes, and snippets.

@patmifsud

patmifsud/index.html

Last active February 27, 2023 23:51
Show Gist options
  • Save patmifsud/5855bd50fb64a74c1486306b79840b6f to your computer and use it in GitHub Desktop.
Save patmifsud/5855bd50fb64a74c1486306b79840b6f to your computer and use it in GitHub Desktop.
Download ZIP
Verity e.g. 4 key lime
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">BigOven</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>
Killer Key Lime Pie Recipe
</h2>
<div style="background-image: url(https://unsplash.com/photos/JKCOI3w2uko/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTF8fGxpbWUlMjBwaWV8ZW58MHx8fHwxNjc3NTQxNTMw&force=true&w=640); background-size: cover; background-position: center; height: 300px; 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;
">Made with ordinary limes, this “Key lime” pie is just as to die for as the real deal — plus it’s easier to make.
</p>
<p>
I use Persian limes, otherwise known as ordinary supermarket limes, to make my “Key lime” pie. Unless you live in the Florida Keys, key limes are near impossible to find.
</p>
<p>Furthermore, they’re so tiny that you’d need to juice at least twenty of them for this recipe. No thank you! Ordinary limes make an exceptional Key lime pie, and they are a much better alternative to bracingly tart bottled Key lime juice. This pie tastes every bit as authentic as the real deal — plus it’s easier to make.
</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: 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: 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