Rework header and landing page completely
This commit is contained in:
Marcel
parent
7f887a99b0
commit
8fd22c9a9a
|
|
@ -49,7 +49,7 @@
|
|||
hreflang="fr">
|
||||
</head>
|
||||
<body>
|
||||
<header class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top <?= isset($_SESSION['user']) ? 'loggedIn' : '' ?>" role="banner">
|
||||
<header class="navbar navbar-expand-lg fixed-top <?= isset($_SESSION['user']) ? 'loggedIn' : '' ?>" role="banner">
|
||||
<div>
|
||||
<button class="menu-icon">
|
||||
<span></span>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 386.48" class="navbar-logo-svg">
|
||||
<defs>
|
||||
<style>.a {
|
||||
fill: #fff;
|
||||
fill: #2272FF;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
|
@ -80,28 +80,7 @@
|
|||
<input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
|
||||
</div>
|
||||
|
||||
<div class="navbar-action">
|
||||
<a href="#" class="navbar-action-btn" role="button" id="searchButton" data-toggle="tooltip" data-placement="bottom" title="Suchen">
|
||||
<i class="fa fa-search"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<div class="navbar-action">
|
||||
<div class="dropdown">
|
||||
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-action-btn">
|
||||
<i class="fa fa-bell"></i>
|
||||
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="loadingSpinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-action">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
|
||||
|
|
@ -131,13 +110,28 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-action">
|
||||
<div class="dropdown">
|
||||
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-action-btn">
|
||||
<i class="fa fa-bell"></i>
|
||||
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="loadingSpinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="navbar-action">
|
||||
<a href="<?= base_url('login?r=' . urlencode(base64_encode(uri_string()))) ?>" class="navbar-action-btn" role="button" data-toggle="tooltip" data-placement="bottom" title="<?= lang('header_login') ?>">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926 534" id="login-icon">
|
||||
<defs>
|
||||
<style>.z {
|
||||
fill: #fff;
|
||||
fill: #757575;
|
||||
}</style>
|
||||
</defs>
|
||||
<path class="z"
|
||||
|
|
@ -147,16 +141,11 @@
|
|||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<div id="navbar-swipe-open d-block d-md-none"></div>
|
||||
<div class="side-navigation">
|
||||
<span class="side-title">
|
||||
<img src="<?= base_url('assets/images/logo.png'); ?>" id="headerLogo" alt="logo">
|
||||
</span>
|
||||
<nav class="side-navigation-content">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -346,7 +335,7 @@
|
|||
<form id="postForm" enctype="multipart/form-data" method="POST">
|
||||
<input type="hidden" value="-1" id="replyTo">
|
||||
<div class="form-group has-feedback-right" id="content">
|
||||
<div class="form-control" id="contentField" contenteditable style="min-height:100px"
|
||||
<div class="form-control max-length-input" max-length="1000" id="contentField" contenteditable style="min-height:100px"
|
||||
required></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
|
|||
|
|
@ -110,15 +110,15 @@
|
|||
<?= lang('home_slider_video_des'); ?>
|
||||
</p>
|
||||
<a class="boxed btn btn-md animation animated-item-3"
|
||||
href="<?= $video['post_url'] ?>" target="_blank">
|
||||
href="<?= $video['url'] ?>" target="_blank">
|
||||
<?= lang('home_slider_video_btn') ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 hidden-xs animation animated-item-4">
|
||||
<div class="centered">
|
||||
<a href="<?= $video['post_url'] ?>" target="_blank">
|
||||
<img src="<?= $video['post_img_source'] ?>" class="img-fluid">
|
||||
<a href="<?= $video['url'] ?>" target="_blank">
|
||||
<img src="<?= $video['imageSource'] ?>" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,56 +141,152 @@
|
|||
</section>
|
||||
<!--/#main-slider-->
|
||||
|
||||
<section class="container-fluid p-0">
|
||||
<div class="container">
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h1><?= lang('home_channels_title') ?></h1>
|
||||
</div>
|
||||
<section class="container">
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Wer bin ich eigentlich?</h1>
|
||||
<p class="lead">Mein Name ist Marcel und seit einigen Jahren programmiere ich leidenschaftlich. In dieser Zeit habe ich alle möglichen Sprachen und Frameworks mir selbst beigebracht und die unterschiedlichsten Projekte auf die Beine gestellt -
|
||||
unter anderem auch diese Website. Weitere Hobbies von mir sind Design, Schreiben, Animation, Fotografie und Videoschnitt. All das zusammen verpacke ich in meinen YouTube-Videos, die ich mittlerweile seit 2013 produziere. Dazu habe
|
||||
ich verschiedene Kanäle erstellt, die ich im Nachfolgenden erläutern werde. Falls ihr noch mehr über mich erfahren wollt, könnt ihr dies sehr einfach auf der Über mich-Seite.</p>
|
||||
<a href="<?= base_url('about') ?>" class="btn btn-primary">Über mich</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tilted-columns">
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/59768b61257e439b593ff2fb112d5079" alt="KingOfDog Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">KingOfDog</h1>
|
||||
<h3 class="column-desc"><?= lang('home_kingofdog_des') ?></h3>
|
||||
<div class="row my-2">
|
||||
<div class="col-md-4">
|
||||
<div class="list-group" id="yt-channels-tabs" role="tablist">
|
||||
<a href="#yt-channel-kingofdog" class="list-group-item list-group-item-action active" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdog" id="yt-channel-kingofdog-tab">KingOfDog</a>
|
||||
<a href="#yt-channel-zeybefx" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zebyefx" id="yt-channel-zeybefx-tab">ZebyeFX</a>
|
||||
<a href="#yt-channel-zeybeofficial" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zeybeofficial" id="yt-channel-zeybeofficial-tab">ZebyeOfficial</a>
|
||||
<a href="#yt-channel-kingofdogint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogint" id="yt-channel-kingofdogint-tab">KingOfDog International</a>
|
||||
<a href="#yt-channel-kingofdogtv" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogtv" id="yt-channel-kingofdogtv-tab">KingOfDogTV</a>
|
||||
<a href="#yt-channel-minepoint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-minepoint" id="yt-channel-minepoint-tab">MinePoint</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/3c930821892961aba30c7f91df1e5d4e" alt="ZeybeFX Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">ZeybeFX</h1>
|
||||
<h3 class="column-desc"><?= lang('home_zeybefx_des') ?></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/54c5963da3587342cb34336fd15c87aa" alt="ZeybeOfficial Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">ZeybeOfficial</h1>
|
||||
<h3 class="column-desc"><?= lang('home_zeybeofficial_des') ?></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/7b3fd0b5fb3ef9565f396a266db14a64" alt="KingOfDog International Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">KingOfDog International</h1>
|
||||
<h3 class="column-desc"><?= lang('home_kingofdogint_des') ?></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/d904d757da59e2d514d9b12604b9c8b6" alt="KingOfDogTV Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">KingOfDogTV</h1>
|
||||
<h3 class="column-desc"><?= lang('home_kingofdogtv_des') ?></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tilted-column">
|
||||
<img class="column-image" src="/f/1771967ab185e4d62ff5963977032fd8" alt="MinePoint Logo">
|
||||
<div class="column-caption">
|
||||
<h1 class="column-title">MinePoint</h1>
|
||||
<h3 class="column-desc"><?= lang('home_minepoint_des') ?></h3>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="tab-content" id="nav-yt-channel-content">
|
||||
<div class="tab-pane fade show active" id="yt-channel-kingofdog" role="tabpanel" aria-labelledby="yt-channel-kingofdog-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/59768b61257e439b593ff2fb112d5079?w=160') ?>" alt="KingOfDog Logo">
|
||||
<h3>KingOfDog</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_kingofdog_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://youtube.com/KingOfDog" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="yt-channel-zeybefx" role="tabpanel" aria-labelledby="yt-channel-zeybefx-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/3c930821892961aba30c7f91df1e5d4e?w=160') ?>" alt="ZeybeFX Logo">
|
||||
<h3>ZeybeFX</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_zeybefx_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="yt-channel-zeybeofficial" role="tabpanel" aria-labelledby="yt-channel-zeybeofficial-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/54c5963da3587342cb34336fd15c87aa?w=160') ?>" alt="ZeybeOfficial Logo">
|
||||
<h3>ZeybeOfficial</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_zeybeofficial_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="yt-channel-kingofdogint" role="tabpanel" aria-labelledby="yt-channel-kingofdogint-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/7b3fd0b5fb3ef9565f396a266db14a64?w=160') ?>" alt="KingOfDog International Logo">
|
||||
<h3>KingOfDog International</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_kingofdogint_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="yt-channel-kingofdogtv" role="tabpanel" aria-labelledby="yt-channel-kingofdogtv-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/d904d757da59e2d514d9b12604b9c8b6?w=160') ?>" alt="KingOfDogTV Logo">
|
||||
<h3>KingOfDogTV</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_kingofdogtv_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://www.youtube.com/channel/UCNiPkMSdFR3ERemtlVTdtIQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="yt-channel-minepoint" role="tabpanel" aria-labelledby="yt-channel-minepoint-tab">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="yt-channel-title">
|
||||
<img src="<?= base_url('/f/1771967ab185e4d62ff5963977032fd8?w=160') ?>" alt="MinePoint Logo">
|
||||
<h3>MinePoint</h3>
|
||||
</div>
|
||||
|
||||
<p class="yt-channel-desc">
|
||||
<?= lang('home_minepoint_des') ?>
|
||||
</p>
|
||||
|
||||
<a href="https://www.youtube.com/channel/UC2KTZbfkUo-Afc_JZpTZ0sQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,7 +295,7 @@
|
|||
<section class="section-parallax section-green">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-md-6 offset-md-3 text-center">
|
||||
<h1>KOD Network</h1>
|
||||
<p class="lead">
|
||||
Jeder kennt die etablierten Netzwerke wie YouTube, Twitter, Instagram etc. Aber warum sollte man nicht einfach mal aus Spaß und um den Algorithmus-Giganten entgegenzuwirken sein eigenes soziales Netzwerk entwickeln? <br>
|
||||
|
|
@ -207,9 +303,6 @@
|
|||
</p>
|
||||
<a href="<?= base_url('posts/popular') ?>" class="btn btn-default round">Beliebte Posts</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -227,7 +320,7 @@
|
|||
<h2><?= $activeUser['displayname'] ?></h2>
|
||||
</a>
|
||||
<small><?= $activeUser['follower_count'] ?> Followers | online
|
||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
|
||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new DateTime(), new DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -245,7 +338,7 @@
|
|||
</a>
|
||||
<small><?= $newestUser['follower_count'] ?> Followers |
|
||||
registriert
|
||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
|
||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new DateTime(), new DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -264,7 +357,7 @@
|
|||
<section class="section-parallax section-orange">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 offset-md-3 text-center">
|
||||
<h1>Portfolio</h1>
|
||||
<p class="lead">
|
||||
Seit ich angefangen habe YouTube-Videos hochzuladen, bin ich auch langsam in Richtung Design, Programmieren, Fotografie, Videoschnitt, Animation etc. hineingeraten. Mit der Zeit haben sich einige mehr oder weniger gute Projekte angehäuft,
|
||||
|
|
@ -396,7 +489,7 @@
|
|||
<section class="section-parallax section-red">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 offset-md-3 text-center">
|
||||
<h1>Blog</h1>
|
||||
<p class="lead">
|
||||
Seid ihr an Programmierung, Design, Technik, Internet, Aktuellem, Gaming, zufälligem Kram und mehr interessiert? Dann ist mein Blog zwar nicht die erste Anlaufstelle, dennoch könnte man ihn eventuell ein-zwei Mal berücksichtigen. Schaut
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ section.midnight-blue a::after {
|
|||
background: white;
|
||||
}
|
||||
|
||||
a:not(.btn):hover, a:not(.btn):focus {
|
||||
color: #3b7ae3 !important;
|
||||
a:not(.btn):not(.list-group-item):hover, a:not(.btn):not(.list-group-item):focus {
|
||||
color: #3b7ae3;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
.navbar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
justify-content: normal;
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px auto 50px 50px;
|
||||
grid-template-areas: "menuButton . center firstAction secondAction";
|
||||
grid-template-columns: 50px 240px auto 185px 50px 50px;
|
||||
grid-template-areas: "menuButton logo center . secondAction firstAction";
|
||||
grid-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar.loggedIn {
|
||||
grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
|
||||
grid-template-areas: "menuButton . . center firstAction secondAction thirdAction";
|
||||
grid-template-columns: 50px 240px auto 5px 50px 180px;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container {
|
||||
grid-area: center;
|
||||
display: block;
|
||||
height: 100%;
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo {
|
||||
position: relative;
|
||||
min-width: 240px;
|
||||
width: 50%;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
transition: opacity .25s;
|
||||
|
|
@ -35,39 +34,38 @@
|
|||
|
||||
.navbar .navbar-logo-container .navbar-logo-svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
height: 45px;
|
||||
-moz-transform: translate(calc(-50% - 55px), -50%);
|
||||
-ms-transform: translate(calc(-50% - 55px), -50%);
|
||||
-o-transform: translate(calc(-50% - 55px), -50%);
|
||||
-webkit-transform: translate(calc(-50% - 55px), -50%);
|
||||
transform: translate(calc(-50% - 55px), -50%);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform: translate(calc(-50% + 100px), -50%);
|
||||
transform: translate(calc(-50% + 35px), -50%);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
color: #757575;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
font-size: 24px;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action {
|
||||
height: auto;
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -79,42 +77,30 @@
|
|||
grid-area: secondAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(6) {
|
||||
grid-area: thirdAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #757575;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:active,
|
||||
.navbar .navbar-action-btn:focus {
|
||||
color: #fff !important;
|
||||
color: #555555 !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:hover {
|
||||
color: #ddd !important;
|
||||
}
|
||||
|
||||
.navbar-action-btn #login-icon .z {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #logo-icon .z {
|
||||
fill: #ddd;
|
||||
color: #6d6d6d !important;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #login-icon .y {
|
||||
-webkit-transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
-webkit-transition: all .2s;
|
||||
transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
animation: arrow-pointing 1.5s infinite;
|
||||
}
|
||||
|
||||
|
|
@ -133,26 +119,26 @@
|
|||
*/
|
||||
|
||||
.navbar-logo svg, .navbar-logo svg .a {
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .b {
|
||||
-webkit-transform: translateX(-100px);
|
||||
-moz-transform: translateX(-100px);
|
||||
-ms-transform: translateX(-100px);
|
||||
-o-transform: translateX(-100px);
|
||||
-webkit-transform: translateX(-100px);
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .c {
|
||||
-webkit-transform: translateX(100px);
|
||||
-moz-transform: translateX(100px);
|
||||
-ms-transform: translateX(100px);
|
||||
-o-transform: translateX(100px);
|
||||
-webkit-transform: translateX(100px);
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
|
|
@ -182,62 +168,49 @@
|
|||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-title {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(calc(-50% + 55px), -50%);
|
||||
transform: translate(calc(-50% + 45px), -50%);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-svg {
|
||||
transform: translateX(calc(-50% - 55px));
|
||||
transform: translate(calc(-50% - 55px), -50%);
|
||||
}
|
||||
|
||||
#searchButton > i.fa {
|
||||
transform-origin: 25% 25%;
|
||||
transition: transform .5s;
|
||||
transform-origin: 25% 25%;
|
||||
}
|
||||
|
||||
#searchButton:hover i.fa {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
-moz-transform: rotateZ(360deg);
|
||||
-ms-transform: rotateZ(360deg);
|
||||
-o-transform: rotateZ(360deg);
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.navbar .navbar-search {
|
||||
pointer-events: none;
|
||||
grid-area: center;
|
||||
z-index: 1;
|
||||
grid-area: center;
|
||||
}
|
||||
|
||||
.navbar .navbar-search input.form-control {
|
||||
width: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
transition: all .25s;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search input.form-control {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#userMenuButton {
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
color: #444 !important;
|
||||
border-radius: 25px;
|
||||
padding: 4px 25px 4px 4px;
|
||||
border-radius: 25px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
color: #444 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#userMenuButton:hover {
|
||||
background: rgba(0, 0, 0, .08);
|
||||
}
|
||||
|
||||
#userMenuButton img {
|
||||
|
|
@ -249,11 +222,6 @@
|
|||
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
|
||||
}
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*transform: scale(.75) translateX(25px);*/
|
||||
/*margin-top: -8px;*/
|
||||
/*}*/
|
||||
|
||||
#userMenuButton {
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
@ -267,35 +235,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*.navbar {*/
|
||||
/*height: 60px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*margin-left: auto;*/
|
||||
/*margin-top: 17px;*/
|
||||
/*}*/
|
||||
|
||||
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.125em;
|
||||
background-color: #fff;
|
||||
width: 0.75em;
|
||||
height: 0.05em;
|
||||
left: 0.255em;
|
||||
display: block;
|
||||
width: 0.45em;
|
||||
height: 0.04em;
|
||||
border-radius: 0;
|
||||
background-color: #757575;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 3.75rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 25px;
|
||||
transform: scale(.8);
|
||||
z-index: 1041;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 3.75rem;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
|
@ -303,12 +268,6 @@
|
|||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
transform: scale(.8);
|
||||
position: fixed;
|
||||
left: 25px;
|
||||
top: 0;
|
||||
z-index: 1041;
|
||||
}
|
||||
|
||||
.menu-icon span {
|
||||
|
|
@ -316,13 +275,13 @@
|
|||
}
|
||||
|
||||
.menu-icon:before {
|
||||
content: "";
|
||||
margin-top: -0.275em;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.menu-icon:after {
|
||||
content: "";
|
||||
margin-top: 0.225em;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.menu-icon:before, .menu-icon:after {
|
||||
|
|
@ -335,21 +294,21 @@
|
|||
}
|
||||
|
||||
.menu-icon span:before, .menu-icon span:after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-webkit-transition: 0.25s ease;
|
||||
transition: 0.25s ease;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-icon span:before {
|
||||
-webkit-transform: translateY(-0.25em);
|
||||
transform: translateY(-0.25em);
|
||||
-webkit-transform: translateY(-0.15em);
|
||||
transform: translateY(-0.15em);
|
||||
}
|
||||
|
||||
.menu-icon span:after {
|
||||
-webkit-transform: translateY(0.25em);
|
||||
transform: translateY(0.25em);
|
||||
-webkit-transform: translateY(0.15em);
|
||||
transform: translateY(0.15em);
|
||||
}
|
||||
|
||||
.menu-icon.is-open span, .menu-icon.is-open:before, .menu-icon.is-open:after, .menu-icon.is-open span:before, .menu-icon.is-open span:after {
|
||||
|
|
@ -366,123 +325,52 @@
|
|||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Navbar brand svg */
|
||||
/*.navbar-brand {*/
|
||||
/*padding: 7px;*/
|
||||
/*transition: padding 0.3s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-brand svg {*/
|
||||
/*position: absolute;*/
|
||||
/*left: 50%;*/
|
||||
/*transform: translateX(-50%);*/
|
||||
/*height: 45px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*height: 60px;*/
|
||||
/*margin-top: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul {*/
|
||||
/*display: grid;*/
|
||||
/*grid-template-columns: 1fr 2fr auto;*/
|
||||
/*align-items: center;*/
|
||||
/*grid-gap: 10px;*/
|
||||
/*list-style: none;*/
|
||||
/*cursor: default;*/
|
||||
/*height: 60px;*/
|
||||
/*margin: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*font-size: 30px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li a.navbar-link {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*color: #fff !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li #notificationMenuButton {*/
|
||||
/*height: 30px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li #notificationMenuButton .fa {*/
|
||||
/*display: block;*/
|
||||
/*margin: 0 auto;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.navbar-content ul li:hover a.navbar-link,*/
|
||||
/*.navbar-content ul li:active a.navbar-link,*/
|
||||
/*.navbar-content ul li:focus a.navbar-link {*/
|
||||
/*color: #ddd !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge {*/
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*right: 0;*/
|
||||
/*font-size: 14px;*/
|
||||
/*transform: translate(25%, -50%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge:empty {*/
|
||||
/*opacity: 0;*/
|
||||
/*}*/
|
||||
|
||||
#notificationMenu {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
#notificationMenu .list-group {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
#notificationMenu a:not(.disabled) {
|
||||
color: #333 !important;
|
||||
background-color: #2272ff1a;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
#notificationMenu a:hover,
|
||||
#notificationMenu a:active,
|
||||
#notificationMenu a:focus {
|
||||
color: #fff !important;
|
||||
background-color: #2272ff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#logo-container {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
#logo-container, #logo-container * {
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
}
|
||||
|
||||
.logo-container:hover .b {
|
||||
-webkit-transform: translateX(-100px);
|
||||
-moz-transform: translateX(-100px);
|
||||
-ms-transform: translateX(-100px);
|
||||
-o-transform: translateX(-100px);
|
||||
-webkit-transform: translateX(-100px);
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.logo-container:hover .c {
|
||||
-webkit-transform: translateX(100px);
|
||||
-moz-transform: translateX(100px);
|
||||
-ms-transform: translateX(100px);
|
||||
-o-transform: translateX(100px);
|
||||
-webkit-transform: translateX(100px);
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
|
|
@ -512,57 +400,27 @@
|
|||
}
|
||||
|
||||
.logo-container {
|
||||
width: 500px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#logo-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 18px;
|
||||
transform: translateX(calc(-50% + 100px));
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
font-size: 24px;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo-container:hover #logo-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateX(calc(-50% + 55px));
|
||||
}
|
||||
|
||||
.logo-container:hover #logo-container {
|
||||
transform: translateX(calc(-50% - 55px));
|
||||
width: 500px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#login-icon {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar-link svg, .navbar-link i {
|
||||
display: block;
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
.navbar-link span {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,35 +2,35 @@
|
|||
#main-slider .carousel-item {
|
||||
height: calc(100vh - 60px);
|
||||
background: no-repeat center;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item .carousel-caption {
|
||||
top: 0;
|
||||
height: 600px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block !important;
|
||||
height: 600px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity ease-in-out 500ms;
|
||||
-moz-transition: opacity ease-in-out 500ms;
|
||||
-o-transition: opacity ease-in-out 500ms;
|
||||
-webkit-transition: opacity ease-in-out 500ms;
|
||||
transition: opacity ease-in-out 500ms;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item.active .carousel-caption {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity ease-in-out 500ms;
|
||||
-moz-transition: opacity ease-in-out 500ms;
|
||||
-o-transition: opacity ease-in-out 500ms;
|
||||
-webkit-transition: opacity ease-in-out 500ms;
|
||||
transition: opacity ease-in-out 500ms;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item .carousel-caption .container {
|
||||
top: auto;
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item .carousel-content {
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
|
||||
#main-slider .carousel-item .boxed {
|
||||
padding: 10px 15px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item a.boxed {
|
||||
|
|
@ -62,16 +62,16 @@
|
|||
}
|
||||
|
||||
#main-slider .carousel-item .btn {
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
transition: ease-in-out .1s;
|
||||
}
|
||||
|
||||
#main-slider .carousel-item .btn:hover {
|
||||
border-width: 0;
|
||||
padding: 13px 18px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
#main-slider .active .animation.animated-item-1 {
|
||||
|
|
@ -106,20 +106,35 @@
|
|||
animation: fadeInUp 300ms linear 1200ms both;
|
||||
}
|
||||
|
||||
.yt-channel-title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.yt-channel-title img {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.yt-channel-title h3 {
|
||||
display: inline-block;
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
.tilted-column {
|
||||
position: relative;
|
||||
transform: skewX(-6deg);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: calc((100% / 3) + 6px + (32px / 3));
|
||||
height: 33vw;
|
||||
display: inline-block;
|
||||
margin-left: -6px;
|
||||
overflow: hidden;
|
||||
border-right: 10px solid transparent;
|
||||
transform: skewX(-6deg);
|
||||
}
|
||||
|
||||
.tilted-column:nth-child(3n+1) {
|
||||
margin-left: -24px;
|
||||
margin-right: 0 !important;
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.tilted-column:nth-child(3n+3) {
|
||||
|
|
@ -128,34 +143,34 @@
|
|||
}
|
||||
|
||||
.tilted-column > .column-image {
|
||||
width: 100%;
|
||||
transform: skewX(6deg) scale(1.1);
|
||||
width: 100%;
|
||||
transition: transform .8s;
|
||||
}
|
||||
|
||||
.tilted-column > .column-caption {
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
top: 100%;
|
||||
left: 56%;
|
||||
opacity: 0;
|
||||
transform: skewX(6deg) translate(-50%, 0);
|
||||
width: 75%;
|
||||
opacity: 0;
|
||||
transition: all .8s;
|
||||
}
|
||||
|
||||
.tilted-column > .column-caption > .column-title,
|
||||
.tilted-column > .column-caption > .column-desc {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
padding: 4px 16px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
color: #fff;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.tilted-column > .column-caption > .column-desc {
|
||||
width: 100%;
|
||||
font-size: 1.25vw;
|
||||
font-weight: bolder;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tilted-column:hover > .column-image {
|
||||
|
|
@ -185,8 +200,8 @@
|
|||
}
|
||||
|
||||
.tilted-column:nth-child(2n+1) {
|
||||
margin-left: -24px;
|
||||
margin-right: 0 !important;
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.tilted-column:nth-child(2n + 2) {
|
||||
|
|
@ -205,10 +220,10 @@
|
|||
|
||||
@media (max-width: 575px) {
|
||||
.tilted-column {
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
margin: 10px 0 !important;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.tilted-column > .column-image {
|
||||
|
|
@ -347,46 +362,46 @@
|
|||
}
|
||||
|
||||
.social-media-list .social-media-item.twitter:hover .icon-md {
|
||||
color: #4099FF;
|
||||
background-color: white;
|
||||
color: #4099FF;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.youtube:hover .icon-md {
|
||||
color: #e52d27;
|
||||
background-color: white;
|
||||
color: #e52d27;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.google-plus:hover .icon-md {
|
||||
color: #d34836;
|
||||
background-color: white;
|
||||
color: #d34836;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item._500px:hover .icon-md {
|
||||
color: #0099e5;
|
||||
background-color: white;
|
||||
color: #0099e5;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.patreon:hover .icon-md {
|
||||
color: #E6461A;
|
||||
background-color: white;
|
||||
color: #E6461A;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.steam:hover .icon-md {
|
||||
color: #0A2341;
|
||||
background-color: white;
|
||||
color: #0A2341;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.github:hover .icon-md {
|
||||
color: #000;
|
||||
background-color: white;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.twitch:hover .icon-md {
|
||||
color: #6441A4;
|
||||
background-color: white;
|
||||
color: #6441A4;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item.spotify:hover .icon-md {
|
||||
color: #1ED760;
|
||||
background-color: white;
|
||||
color: #1ED760;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue
Block a user