Skip to content

Instantly share code, notes, and snippets.

@patmifsud

patmifsud/index.html

Last active December 15, 2022 21:04
Show Gist options
  • Save patmifsud/f6a32b2ca0ccbcce1ae74f84b883d401 to your computer and use it in GitHub Desktop.
Save patmifsud/f6a32b2ca0ccbcce1ae74f84b883d401 to your computer and use it in GitHub Desktop.
Download ZIP
VOZSY News
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>K-POP - BTS Army Sets Record for Fastest Sell-Out of Concert Tickets and Cosmetic Sales.</h2>
<div style="background-image: url(https://live.staticflickr.com/7355/12986783935_f1dd15bac4_c.jpg); background-size: cover; background-position: center; height: 250px; width: 100%; display:block;" > </div>
<!-- https://www.flickr.com/photos/koreanet/12986783935 Korea_Mnet_BTS_03 -->
<p style="padding:17px 0 15px 0;
padding: 17px 0 15px 0;
font-size: 19px;
font-weight: 400;
color: #565656;
">
The BTS Army is showing their love and support for the K-Pop group BTS by setting a record for the fastest sell-out of concert tickets and cosmetic products. The record-breaking sales come ahead of the band's year-long hiatus due to three of the members commencing their mandatory military service.
</p>
<p>
The band's record-breaking concert tickets sold out in less than 15 minutes. This is the fastest sell-out in the history of the K-Pop industry and it shows the fans' dedication and love for the group.
</p>
<p>
The demand for the group's cosmetic line, "BT21", has also been unprecedented. The products have been selling out in record time, with many orders not even making it to the shelves. The group's fans have been purchasing the products as a way to show their support for the group during the hiatus.
</p>
<p>
In a statement, the group expressed their gratitude for the support they have been receiving. They said, "We want to thank all our fans for their incredible support throughout this time. We hope they will continue to support us and our music when we come back."
</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
vozsy-news.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment