Skip to content

Instantly share code, notes, and snippets.

@patmifsud

patmifsud/index.html

Last active January 10, 2023 02:45
Show Gist options
  • Save patmifsud/14d8a2814d281b43085741c09a6dfc86 to your computer and use it in GitHub Desktop.
Save patmifsud/14d8a2814d281b43085741c09a6dfc86 to your computer and use it in GitHub Desktop.
Download ZIP
Verity e.g. 2 Chocolate
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>
School board replaces chocolate and candy in cafeterias with new healthy alternatives
</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;
">
The school board at Madison School District has made the decision to remove chocolate and candy from their cafeterias and replace them with healthier alternatives.
</p>
<p>
This change was made in an effort to promote better nutrition and healthier eating habits among students.
</p><p>
The new options will include a variety of fruits and vegetables, as well as whole grain snacks and drinks. These options are not only healthier, but they also provide important nutrients that are necessary for growing bodies and minds.
</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="address@email.com">
<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-2-chocolate.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment