A little self-set challenge to create a xmas advent calendar using javascript and css grid with a little animation and a hint of 3d. Works best in desktop.
Merry Christmas! I hope you enjoy!
<link rel="preconnect" href="https://fonts.googleapis.com"> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet"> | |
html { | |
font-family: 'Comfortaa', cursive !important; | |
} |
:root{--message-bubble-bg:#363636;--achievement-fg:inherit;--achievement-bg:#272727;--article-card-bg:#272727;--article-card-fg:#aaa;--article-card-head-fg:#aaa;--article-card-time-fg:#aaa;--bbcode-input-header-bg:#1b2438;--bbcode-input-bg:#1b2438;--bbcode-input-body-bg:#232b41;--bbcode-input-border:1px solid #555;--bbcode-input-border-radius:5px;--button-filled-bg:#444;--button-filled-border:none;--button-filled-border-radius:9999px;--button-filled-fg:#ddd;--button-outlined-bg:inherit;--button-outlined-border:1px solid #555;--button-outlined-border-radius:9999px;--button-outlined-fg:currentColor;--button-text-bg:inherit;--button-text-border:none;--button-text-border-radius:5px;--button-text-fg:currentColor;--comparison-divider-fg:#fff;--comparison-button-fg:#fff;--data-table-fg:inherit;--data-table-th-bg:#19191b;--data-table-thead-border:none;--data-table-tr-border:1px solid #404040;--data-table-tr-even-bg:#1b2438;--data-table-tr-hover-bg:#232b41;--data-table-tr-odd-bg:#232b41;--data-table-tfoot-border:none; |
<h1>Simple Pure CSS Drop Down Menu</h1> | |
<nav id="primary_nav_wrap"> | |
<ul> | |
<li class="current-menu-item"><a href="#">Home</a></li> | |
<li><a href="#">Menu 1</a> | |
<ul> | |
<li><a href="#">Sub Menu 1</a></li> | |
<li><a href="#">Sub Menu 2</a></li> | |
<li><a href="#">Sub Menu 3</a></li> | |
<li><a href="#">Sub Menu 4</a> |
/* ========================================================================== | |
++++++++++ [Blue Night Theme for PTP - by @PuNkFuSe] ++++++++++ | |
========================================================================== */ | |
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | |
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | |
TABLE OF CONTENTS | |
++++++++++++++++++++++++++++++++ | |
1.0 - Reset CSS | |
1.1 - Normalize.css | |
1.2 - Custom Reset |
@charset "UTF-8"; | |
@import url(https://fonts.googleapis.com/css?family=Material + Icons); | |
@import url(https://fonts.googleapis.com/css?family=Roboto:300, 400, 700); | |
@import url(https://fonts.googleapis.com/css?family=Roboto + Condensed:300, 400, 700); | |
@import url(https://fonts.googleapis.com/css?family=Source + Sans + Pro:300, 400, 700); | |
#morecast:before, | |
#toggle_add_similar_movies:before, | |
#toggleaddtags:before { | |
font-family: "Roboto"; | |
} |
#hoeapp-wrapper, #main-content, .inner-content { | |
background: radial-gradient(at 30% top, rgba(31, 40, 73, 1) 0%, rgba(8, 28, 36, 1) 70%) !important; | |
} | |
#hoe-header { | |
background: rgba(0, 0, 0, 0.34) !important; | |
} | |
.breadcrumb, .col-md-10, .ratio-bar { | |
background: rgba(0, 0, 0, 0.33) !important; |
#hoeapp-wrapper, #main-content, .inner-content { | |
background-color:#303030 | |
} | |
#hoeapp-container[hoe-color-type=lpanel-bg5].hoe-minimized-lpanel #hoe-left-panel, .hoe-right-header[hoe-color-type=header-bg5] { | |
background:#222 | |
} | |
.ratio-bar { | |
background-color:#303030 |
@extends('layout.default') | |
@section('title') | |
<title>@lang('torrent.torrents') - {{ config('other.title') }}</title> | |
@endsection | |
@section('breadcrumb') | |
<li> | |
<a href="{{ route('torrents.index') }}" itemprop="url" class="l-breadcrumb-item-link"> | |
<span itemprop="title" class="l-breadcrumb-item-link-title">@lang('torrent.torrents')</span> |
<?php | |
/** | |
* NOTICE OF LICENSE. | |
* | |
* UNIT3D is open-sourced software licensed under the GNU General Public License v3.0 | |
* The details is bundled with this project in the file LICENSE.txt. | |
* | |
* @project UNIT3D | |
* | |
* @license https://www.gnu.org/licenses/agpl-3.0.en.html/ GNU Affero General Public License v3.0 |