mirror of https://github.com/abpframework/eventhub
Halil İbrahim Kalkan
5 years ago
60 changed files with 1784 additions and 154 deletions
@ -0,0 +1,32 @@ |
|||
# UI Design Notes |
|||
|
|||
## Implementing the Design |
|||
|
|||
### Overall / Layout |
|||
|
|||
* Home & Events are separated, so we should create a separation in the solution |
|||
|
|||
### Home Page |
|||
|
|||
* Search area: |
|||
* Language selection |
|||
* Location (country / city) search / with online option |
|||
* When (date range selection) |
|||
|
|||
### Events Page |
|||
|
|||
* Search area: |
|||
* Language selection |
|||
* Location (country / city) search / with online option |
|||
* When (date range selection) |
|||
|
|||
## Features |
|||
|
|||
### Should Implement for the Design |
|||
|
|||
* ... |
|||
|
|||
### Plan for Future |
|||
|
|||
* Event & Organization Categories |
|||
* Event & Organization Tags (use the tagging system of CMS Kit) |
|||
@ -0,0 +1,72 @@ |
|||
<footer> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md"> |
|||
<a href="index.html" class="footer-logo"> |
|||
EventHub |
|||
</a> |
|||
</div> |
|||
<div class="col-md"> |
|||
<h5>Account</h5> |
|||
<div class="footer-links"> |
|||
<a href="#" class="d-block">Sign Up</a> |
|||
<a href="#" class="d-block">Log In</a> |
|||
<a href="#" class="d-block">Help</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-md"> |
|||
<h5>Organizations</h5> |
|||
<div class="footer-links"> |
|||
<a href="#" class="d-block">Nearby Events</a> |
|||
<a href="#" class="d-block">Online Events</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-md"> |
|||
<h5>Follow Us</h5> |
|||
<div class="footer-links"> |
|||
<a href="#"> |
|||
<img src="assets/facebook.svg"> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="assets/twitter.svg"> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="assets/in.svg"> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="assets/you.svg"> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="assets/google.svg"> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
<footer class="footer-bottom"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md-auto"> |
|||
<span class="copyright">© 2021 EventHub</span> |
|||
</div> |
|||
<div class="col-md text-center text-md-right"> |
|||
<a href="#"> |
|||
Kişisel Verilerin Korunması Kanunu (KVKK) |
|||
</a> |
|||
<span> |
|||
<img src="assets/seperator2.svg" class="mx-3"> |
|||
</span> |
|||
<a href="#"> |
|||
Terms of Service |
|||
</a> |
|||
<span> |
|||
<img src="assets/seperator2.svg" class="mx-3"> |
|||
</span> |
|||
<a href="#"> |
|||
Privacy Policy |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
@ -0,0 +1,13 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc; |
|||
|
|||
namespace EventHub.Web.Theme.Themes.EventHub.Components.Footer |
|||
{ |
|||
public class FooterViewComponent : AbpViewComponent |
|||
{ |
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View("~/Themes/EventHub/Components/Footer/Default.cshtml"); |
|||
} |
|||
} |
|||
} |
|||
@ -1,21 +1,34 @@ |
|||
@using EventHub.Web.Theme.Themes.EventHub.Components.Brand |
|||
@using EventHub.Web.Theme.Themes.EventHub.Components.Menu |
|||
@using EventHub.Web.Theme.Themes.EventHub.Components.Toolbar |
|||
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4" id="main-navbar" style="min-height: 4rem;"> |
|||
<nav class="navbar navbar-expand-lg navbar-light bg-light static-top"> |
|||
<div class="container"> |
|||
@(await Component.InvokeAsync<MainNavbarBrandViewComponent>()) |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" |
|||
data-target="#main-navbar-collapse" aria-controls="main-navbar-collapse" |
|||
aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="main-navbar-collapse"> |
|||
<ul class="navbar-nav mx-auto"> |
|||
@(await Component.InvokeAsync<MainNavbarMenuViewComponent>()) |
|||
</ul> |
|||
<ul class="navbar-nav"> |
|||
@(await Component.InvokeAsync<MainNavbarToolbarViewComponent>()) |
|||
</ul> |
|||
</div> |
|||
<a class="navbar-brand font-weight-bold" href="#">EventHub</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarResponsive"> |
|||
<ul class="navbar-nav mx-auto"> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="#">Home |
|||
<span class="sr-only">(current)</span> |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="#">Events</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="#">Organizations</a> |
|||
</li> |
|||
</ul> |
|||
<ul class="navbar-nav"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link event-link" href="#">+ Create an Event</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="#">Log In</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="btn btn-primary ml-lg-2" href="#">Sign Up</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</nav> |
|||
@ -0,0 +1,70 @@ |
|||
|
|||
|
|||
.form-label-group input::-webkit-input-placeholder { |
|||
color: transparent; |
|||
} |
|||
.form-label-group input:-moz-placeholder { |
|||
color: transparent; |
|||
} |
|||
.form-label-group input::-moz-placeholder { |
|||
color: transparent; |
|||
} |
|||
.form-label-group input:-ms-input-placeholder { |
|||
color: transparent; |
|||
} |
|||
|
|||
|
|||
.form-signin { |
|||
width: 100%; |
|||
max-width: 420px; |
|||
padding: 15px; |
|||
margin: auto; |
|||
} |
|||
|
|||
.form-label-group { |
|||
position: relative; |
|||
} |
|||
|
|||
.form-label-group > input { |
|||
padding: 14px 20px; |
|||
} |
|||
.form-label-group > label { |
|||
padding: 14px 20px; |
|||
} |
|||
|
|||
.form-label-group > label { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
display: block; |
|||
width: 100%; |
|||
margin-bottom: 0; /* Override default `<label>` margin */ |
|||
line-height: 1.5; |
|||
cursor: text; /* Match the input under the label */ |
|||
border: 1px solid transparent; |
|||
border-radius: 0.25em; |
|||
transition: all 0.1s ease-in-out; |
|||
} |
|||
|
|||
.form-label-group input:not(:placeholder-shown) { |
|||
padding: 17px 20px 0; |
|||
|
|||
} |
|||
|
|||
.form-label-group input:not(:placeholder-shown) ~ label { |
|||
padding: 7px 20px; |
|||
font-size: 0.72em; |
|||
opacity: .75; |
|||
} |
|||
|
|||
.search-event |
|||
.form-label-group > label { |
|||
color: white; |
|||
} |
|||
label { |
|||
font-size: 14px; |
|||
} |
|||
select option { |
|||
background:#EFEFF4; |
|||
color: #00044A; |
|||
} |
|||
@ -1,90 +0,0 @@ |
|||
|
|||
#main-navbar-tools a.dropdown-toggle { |
|||
text-decoration: none; |
|||
color: #fff; |
|||
} |
|||
|
|||
.navbar .dropdown-submenu { |
|||
position: relative; |
|||
} |
|||
.navbar .dropdown-menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.navbar .dropdown-menu a { |
|||
font-size: .9em; |
|||
padding: 10px 15px; |
|||
display: block; |
|||
min-width: 210px; |
|||
text-align: left; |
|||
border-radius: 0.25rem; |
|||
min-height: 44px; |
|||
} |
|||
.navbar .dropdown-submenu a::after { |
|||
transform: rotate(-90deg); |
|||
position: absolute; |
|||
right: 16px; |
|||
top: 18px; |
|||
} |
|||
.navbar .dropdown-submenu .dropdown-menu { |
|||
top: 0; |
|||
left: 100%; |
|||
} |
|||
|
|||
.card-header .btn { |
|||
padding: 2px 6px; |
|||
} |
|||
.card-header h5 { |
|||
margin: 0; |
|||
} |
|||
.container > .card { |
|||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; |
|||
} |
|||
|
|||
@media screen and (min-width: 768px) { |
|||
.navbar .dropdown:hover > .dropdown-menu { |
|||
display: block; |
|||
} |
|||
|
|||
.navbar .dropdown-submenu:hover > .dropdown-menu { |
|||
display: block; |
|||
} |
|||
} |
|||
.input-validation-error { |
|||
border-color: #dc3545; |
|||
} |
|||
.field-validation-error { |
|||
font-size: 0.8em; |
|||
} |
|||
|
|||
.dataTables_scrollBody { |
|||
min-height: 248px; |
|||
} |
|||
|
|||
div.dataTables_wrapper div.dataTables_info { |
|||
padding-top: 11px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
div.dataTables_wrapper div.dataTables_length label { |
|||
padding-top: 10px; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.rtl .dropdown-menu-right { |
|||
right: auto; |
|||
left: 0; |
|||
} |
|||
|
|||
.rtl .dropdown-menu-right a { |
|||
text-align: right; |
|||
} |
|||
|
|||
.rtl .navbar .dropdown-menu a { |
|||
text-align: right; |
|||
} |
|||
.rtl .navbar .dropdown-submenu .dropdown-menu { |
|||
top: 0; |
|||
left: auto; |
|||
right: 100%; |
|||
} |
|||
@ -1,16 +0,0 @@ |
|||
$(function () { |
|||
$('.dropdown-menu a.dropdown-toggle').on('click', function (e) { |
|||
if (!$(this).next().hasClass('show')) { |
|||
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); |
|||
} |
|||
|
|||
var $subMenu = $(this).next(".dropdown-menu"); |
|||
$subMenu.toggleClass('show'); |
|||
|
|||
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) { |
|||
$('.dropdown-submenu .show').removeClass("show"); |
|||
}); |
|||
|
|||
return false; |
|||
}); |
|||
}); |
|||
@ -0,0 +1,130 @@ |
|||
.main-slider |
|||
.owl-theme .owl-nav { |
|||
margin-top: 0 !important; |
|||
position: absolute; |
|||
top: 45%; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
.main-slider .owl-carousel .owl-nav button.owl-prev, |
|||
.main-slider .owl-carousel .owl-nav button.owl-next { |
|||
width: 40px; |
|||
height: 40px; |
|||
background: rgb(255 255 255 / 22%); |
|||
transition: background-color .3s ease; |
|||
position: absolute; |
|||
display: inline-block; |
|||
left: 8%; |
|||
border-radius: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.main-slider .owl-carousel .owl-nav button.owl-next { |
|||
right: 8%; |
|||
left: auto; |
|||
} |
|||
.main-slider .owl-carousel .owl-nav button.owl-prev:hover, |
|||
.main-slider .owl-carousel .owl-nav button.owl-next:hover { |
|||
background: rgb(255 255 255 / 35%); |
|||
} |
|||
.main-slider .owl-carousel .owl-nav button span { |
|||
font-size: 40px; |
|||
color: transparent; |
|||
line-height: 37px; |
|||
} |
|||
.owl-theme .owl-dots .owl-dot span:focus, |
|||
.owl-carousel .owl-nav button:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
.main-slider .owl-carousel .owl-nav button.owl-next::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 40px; |
|||
height: 40px; |
|||
top:0; |
|||
left: 0; |
|||
background-image: url(assets/slider-right.svg); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.main-slider .owl-carousel .owl-nav button.owl-prev::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 40px; |
|||
height: 40px; |
|||
top:0; |
|||
left: 0; |
|||
background-image: url(assets/slider-left.svg); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.card-slider .owl-carousel .owl-nav button.owl-prev, |
|||
.card-slider .owl-carousel .owl-nav button.owl-next { |
|||
width: 9px; |
|||
height: 15px; |
|||
background: rgb(255 255 255 / 22%); |
|||
transition: background-color .3s ease; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
position: relative; |
|||
color: transparent; |
|||
} |
|||
.card-slider .owl-carousel .owl-nav button.owl-next::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 9px; |
|||
height: 15px; |
|||
top:0; |
|||
left: 0; |
|||
background-image: url(assets/owl-2-right.svg); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.card-slider .owl-carousel .owl-nav button.owl-prev::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 9px; |
|||
height: 15px; |
|||
top:0; |
|||
left: 0; |
|||
background-image: url(assets/owl-2-left.svg); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.card-slider .owl-theme .owl-dots .owl-dot span { |
|||
background: rgba(108, 127, 147, 0.2); |
|||
margin: 5px; |
|||
} |
|||
.card-slider .owl-theme .owl-dots .owl-dot.active span, |
|||
.card-slider .owl-theme .owl-dots .owl-dot:hover span { |
|||
background: #00044A; |
|||
} |
|||
|
|||
|
|||
.card-slider .owl-theme .owl-dots { |
|||
text-align: center; |
|||
position: absolute; |
|||
top: -50px; |
|||
right: 20px; |
|||
width: 100px; |
|||
} |
|||
.card-slider .owl-theme .owl-nav { |
|||
margin-top: 0px; |
|||
position: absolute; |
|||
text-align: center; |
|||
top: -52px; |
|||
right: 0; |
|||
width: 140px; |
|||
} |
|||
.card-slider .owl-prev { |
|||
float: left; |
|||
} |
|||
.card-slider .owl-next { |
|||
float: right; |
|||
} |
|||
|
|||
@ -0,0 +1,774 @@ |
|||
body { |
|||
font-family: 'Poppins', sans-serif; |
|||
line-height: 1.5; |
|||
background-color: #F8F9FA; |
|||
color: #6B7E92; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
|
|||
} |
|||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { |
|||
margin-bottom: .5rem; |
|||
font-weight: 700; |
|||
line-height: 1.2; |
|||
color: #00044A; |
|||
} |
|||
.h1, h1 { |
|||
font-size: 36px; |
|||
} |
|||
.h2, h2 { |
|||
font-size: 30px; |
|||
color: #00044A; |
|||
margin-top: .5rem; |
|||
} |
|||
.h3, h3 { |
|||
font-size: 24px; |
|||
margin-bottom: 1rem; |
|||
} |
|||
.h4, h4 { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
p.lead { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: #00044A; |
|||
} |
|||
p { |
|||
color: #6B7E92; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
} |
|||
/*NAVBAR*/ |
|||
.navbar { |
|||
box-shadow: 0 5px 10px rgba(0, 4, 74, 0.05) !important; |
|||
} |
|||
.navbar .nav-link { |
|||
font-size: 14px; |
|||
color: #00044A !important; |
|||
} |
|||
.navbar .nav-item .btn { |
|||
margin: -3px 0; |
|||
} |
|||
.navbar-brand { |
|||
color: #00044A !important; |
|||
} |
|||
.navbar .nav-link.event-link { |
|||
color: #65D6A0 !important; |
|||
font-weight: 600; |
|||
} |
|||
.navbar-light.navbar { |
|||
background-color: #fff !important; |
|||
} |
|||
.navbar-expand-lg { |
|||
min-height: 74px; |
|||
padding: 17px; |
|||
} |
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 10px; |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
.nav-avatar { |
|||
position: absolute; |
|||
top: -14px; |
|||
left: 0; |
|||
} |
|||
|
|||
@media (min-width: 992px) { |
|||
.navbar-expand-lg .navbar-nav .nav-link { |
|||
padding-right: 4px; |
|||
padding-left: 4px; |
|||
margin-right: 12px; |
|||
margin-left: 12px; |
|||
transition: color 0.3s ease; |
|||
} |
|||
.active .nav-link { |
|||
background-image: url(assets/underline.svg); |
|||
background-repeat: no-repeat; |
|||
background-size: inherit; |
|||
background-position: center 28px; |
|||
color: #df2751 !important; |
|||
} |
|||
.nav-link:hover { |
|||
color: #df2751 !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.btn { |
|||
border-radius: 10px !important; |
|||
font-weight: 600; |
|||
font-size: 14px; |
|||
padding: 10px 20px; |
|||
} |
|||
.btn-primary { |
|||
background-color: #E8345D !important; |
|||
border-color: #E8345D !important; |
|||
} |
|||
.btn-primary:hover { |
|||
background-color: #df2751 !important; |
|||
border-color: #df2751 !important; |
|||
} |
|||
.btn-secondary { |
|||
background-color: rgba(221, 203, 247,.4) !important; |
|||
border: 0; |
|||
color: #2E1777; |
|||
} |
|||
.btn-secondary:hover { |
|||
background-color: rgba(221, 203, 247,.6) !important; |
|||
border: 0; |
|||
color: #2E1777; |
|||
} |
|||
.btn-success { |
|||
background-color: #65D6A0 !important; |
|||
border-color: #65D6A0 !important; |
|||
} |
|||
.btn-success:hover { |
|||
background-color: #4dbb86 !important; |
|||
border-color: #4dbb86 !important; |
|||
} |
|||
|
|||
|
|||
.btn-link { |
|||
font-weight: 600; |
|||
color: #00044A; |
|||
font-size: 12px; |
|||
} |
|||
.btn-link img{ |
|||
width: 6px !important; |
|||
display: inline-block !important; |
|||
} |
|||
.btn-link:hover { |
|||
text-decoration: none; |
|||
color: #df2751; |
|||
} |
|||
.btn-link.btn-lg { |
|||
color: #E8345D; |
|||
font-weight: 700; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
|
|||
|
|||
.current-language-name {display: none;} |
|||
|
|||
@media (min-width: 1200px){ |
|||
.container, .container-lg, .container-md, .container-sm, .container-xl { |
|||
max-width: 996px; |
|||
} |
|||
.navbar .container { |
|||
max-width: 1200px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 768px){ |
|||
.current-language-name {display: inline-block;} |
|||
.main-slider .owl-nav {display: none;} |
|||
} |
|||
.card { |
|||
border: 1px solid rgba(107, 126, 146, 0.09); |
|||
border-radius: 10px; |
|||
margin-bottom: 34px; |
|||
overflow: hidden; |
|||
} |
|||
.card-img-top { |
|||
width: 100%; |
|||
} |
|||
.card-img-left { |
|||
position: inherit; |
|||
} |
|||
.event-small-image { |
|||
width: 60px; |
|||
border-radius: 10px; |
|||
} |
|||
.event-info h5 { |
|||
font-size: 18px; |
|||
font-weight: 700; |
|||
color: #00044A; |
|||
margin-bottom: 5px !important; |
|||
} |
|||
|
|||
.event-info small { |
|||
font-size: 10px; |
|||
font-weight: 500; |
|||
color: #6F32E2; |
|||
margin-bottom: 15px; |
|||
display: block; |
|||
} |
|||
.event-info { |
|||
height: 154px; |
|||
margin-bottom: 15px; |
|||
overflow: hidden; |
|||
} |
|||
.online-event .event-info { |
|||
height: 135px; |
|||
margin-bottom: 19px; |
|||
overflow: hidden; |
|||
} |
|||
.event-info p { |
|||
font-size: 13px; |
|||
font-weight: 400; |
|||
color: #6B7E92; |
|||
} |
|||
.event-date small{ |
|||
color: #E8345D; |
|||
font-size: 10px; |
|||
font-weight: 500; |
|||
display: block; |
|||
} |
|||
.event-date span{ |
|||
color: #00044A; |
|||
font-size: 22px; |
|||
font-weight: 700; |
|||
display: block; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
|
|||
.bg-primary { |
|||
background: #00044A !important; |
|||
} |
|||
.form-control, .form-select { |
|||
display: block; |
|||
width: 100%; |
|||
height: calc(1.5em + .75rem + 2px); |
|||
height: 52px; |
|||
padding: .375rem 1rem; |
|||
font-size: 14px !important; |
|||
font-weight: 500; |
|||
line-height: 1.5; |
|||
color: #00044A; |
|||
background-color: #EFEFF4; |
|||
border: 1px solid #EFEFF4; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.search-event .form-control, .search-event .form-select { |
|||
color: #ffffff; |
|||
background-color: rgba(255,255,255,.2); |
|||
border: 1px solid rgba(255,255,255,.4); |
|||
} |
|||
.search-event .btn-group-lg > .search-event .btn, .search-event .btn-lg { |
|||
height: 52px; |
|||
padding: 14px 20px; |
|||
} |
|||
.border-left { |
|||
border-color: #00044A !important; |
|||
} |
|||
|
|||
|
|||
.slider-container { |
|||
height: 530px; |
|||
background-size: cover; |
|||
padding: 0 20px; |
|||
} |
|||
.slider-container h1 { |
|||
font-size: 60px; |
|||
color: white; |
|||
font-weight: 700; |
|||
} |
|||
.slider-container p.lead { |
|||
font-size: 20px; |
|||
color: white; |
|||
} |
|||
.search-event { |
|||
position: relative; |
|||
top:-59px; |
|||
z-index: 99; |
|||
} |
|||
.search-event .card-body, |
|||
.profile-content .card-body{ |
|||
padding: 32px; |
|||
} |
|||
|
|||
.profile-content .form-control , |
|||
.profile-content .form-select { |
|||
border: 1px solid rgba(107, 126, 146, 0.20); |
|||
background-color: white; |
|||
margin-bottom: 30px; |
|||
color: #6B7E92; |
|||
} |
|||
|
|||
.profile-content label, |
|||
.profile-content label { |
|||
color: #6B7E92; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
.form-row>.col, .form-row>[class*=col-] { |
|||
padding-right: 10px; |
|||
padding-left: 10px; |
|||
} |
|||
.form-select{ |
|||
background-color: #EFEFF4; |
|||
border: 1px solid #EFEFF4; |
|||
background-image: url("assets/select-arrow.svg"); |
|||
background-position: right 20px center; |
|||
background-repeat: no-repeat; |
|||
background-size: 10px; |
|||
padding: 10px 30px 10px 20px; |
|||
outline: none; |
|||
-moz-appearance: none; |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
} |
|||
.form-select::-ms-expand { |
|||
display: none; |
|||
} |
|||
|
|||
@media (min-width: 768px){ |
|||
.filter-select select { |
|||
min-width: 140px; |
|||
} |
|||
} |
|||
@media (max-width: 768px){ |
|||
.filter-select select { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.dropdown-toggle::after { |
|||
display: inline-block; |
|||
margin-left: .255em; |
|||
vertical-align: .255em; |
|||
content: ""; |
|||
border: 0; |
|||
width: 6px; |
|||
height: 4px; |
|||
background: url(assets/dropdown-arrow.svg) center center no-repeat; |
|||
background-size: contain; |
|||
top: 2px; |
|||
position: relative; |
|||
} |
|||
.dropdown-menu { |
|||
border-radius: 10px; |
|||
min-width: 130px; |
|||
border-color: rgba(142, 160, 178, 0.2); |
|||
box-shadow: 0 0 8px rgba(0, 4, 74, 0.1); |
|||
} |
|||
.dropdown-menu::before { |
|||
position: absolute; |
|||
top: -7px; |
|||
left: 10px; |
|||
display: inline-block; |
|||
border-right: 7px solid transparent; |
|||
border-bottom: 7px solid rgba(142, 160, 178, 0.3); |
|||
border-left: 7px solid transparent; |
|||
border-bottom-color: rgba(142, 160, 178, 0.3); |
|||
content: ''; |
|||
} |
|||
|
|||
.dropdown-menu::after { |
|||
position: absolute; |
|||
top: -6px; |
|||
left: 11px; |
|||
display: inline-block; |
|||
border-right: 6px solid transparent; |
|||
border-bottom: 6px solid white; |
|||
border-left: 6px solid transparent; |
|||
content: ''; |
|||
} |
|||
|
|||
.dropdown-menu.dropdown-menu-right::before { |
|||
left: auto; |
|||
right: 10px; |
|||
} |
|||
|
|||
.dropdown-menu.dropdown-menu-right::after { |
|||
left: auto; |
|||
right: 11px; |
|||
} |
|||
.dropdown-item { |
|||
font-size: 13px; |
|||
padding: .5rem 1.5rem; |
|||
color: #00044A; |
|||
} |
|||
.dropdown-divider { |
|||
margin: 5px 24px; |
|||
border-top: 1px solid rgba(142, 160, 178, 0.2); |
|||
} |
|||
.dropdown-icon { |
|||
width: 15px; |
|||
height: 15px; |
|||
margin-right: 4px; |
|||
} |
|||
footer { |
|||
background: #00044A; |
|||
padding: 3.5em 0 2em; |
|||
} |
|||
.footer-logo { |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
margin-bottom: 32px; |
|||
margin-top: 16px; |
|||
display: block; |
|||
} |
|||
.footer-logo:hover { |
|||
text-decoration: none; |
|||
color: white; |
|||
} |
|||
footer h5{ |
|||
color: white; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
margin-top: 24px; |
|||
margin-bottom: 16px; |
|||
} |
|||
footer .footer-links a{ |
|||
color: white; |
|||
opacity: .65; |
|||
transition: opacity .25s; |
|||
font-size: 14px; |
|||
margin: 16px 16px 16px 0; |
|||
} |
|||
footer .footer-links a:hover{ |
|||
text-decoration: none; |
|||
color: white; |
|||
opacity: 1; |
|||
} |
|||
.footer-bottom { |
|||
margin-top: 0; |
|||
padding: 2em 0; |
|||
border-top: 1px solid rgba(255,255,255,.2); |
|||
} |
|||
.footer-bottom span,.footer-bottom a { |
|||
color: rgba(255,255,255,.5); |
|||
font-size: 12px; |
|||
} |
|||
.footer-bottom a:hover { |
|||
text-decoration: none; |
|||
transition: color .25s; |
|||
color: white; |
|||
} |
|||
.flag-icon { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
|
|||
|
|||
.inner-banner { |
|||
text-align: center; |
|||
height: 250px; |
|||
background: url(assets/inner-banner.png) center center no-repeat; |
|||
background-size: cover; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.inner-banner.inner-banner-2 { |
|||
background-image: url(assets/inner-banner-2.png); |
|||
} |
|||
|
|||
.inner-banner h1 { |
|||
color: white; |
|||
font-size: 30px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.inner-banner nav.breadcrumb-container { |
|||
display: inline-block; |
|||
} |
|||
|
|||
nav.breadcrumb-container .breadcrumb { |
|||
background: none; |
|||
margin: 0; |
|||
font-size: 12px; |
|||
opacity: .7; |
|||
} |
|||
nav.breadcrumb-container .breadcrumb a,nav.breadcrumb-container .breadcrumb li{ |
|||
color: white; |
|||
} |
|||
.breadcrumb-item+.breadcrumb-item::before { |
|||
padding-right: 1.25rem; |
|||
padding-left: .75rem; |
|||
color: white; |
|||
content: ">"; |
|||
} |
|||
.list-style { |
|||
background: #efeff4; |
|||
border-radius: 10px; |
|||
padding: 8px; |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
|
|||
.list-style a{ |
|||
background: #efeff4; |
|||
color: #00044A; |
|||
opacity: .6; |
|||
padding: 8px 15px; |
|||
display: block; |
|||
border-radius: 8px; |
|||
height: 36px; |
|||
font-size: 14px; |
|||
transition: opacity .2s, background-color .2s; |
|||
} |
|||
.list-style a img{ position: relative; |
|||
top: -1px; |
|||
margin-right: 4px; |
|||
} |
|||
.list-style a.selected { |
|||
background: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 4, 74, 0.15); |
|||
opacity:1; |
|||
z-index: 4; |
|||
} |
|||
.list-style a:hover{ |
|||
opacity:1; |
|||
text-decoration: none; |
|||
} |
|||
@media (max-width: 768px){ |
|||
.list-style { |
|||
margin-top: 15px; |
|||
} |
|||
.list-style a{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
|
|||
footer { |
|||
text-align: center; |
|||
} |
|||
|
|||
footer .footer-links a{ |
|||
margin: 16px; |
|||
} |
|||
} |
|||
|
|||
.detail-image img{ |
|||
width: 100%; |
|||
border-radius: 10px; |
|||
} |
|||
.detail-page h1 { |
|||
font-size: 30px; |
|||
color:#00044A; |
|||
} |
|||
.detail-pin { |
|||
color:#6F32E2; |
|||
font-size: 14px; |
|||
} |
|||
.detail-page p { |
|||
color: #6B7E92; |
|||
font-size: 16px; |
|||
} |
|||
p .text-primary { |
|||
color: #00044A !important; |
|||
font-weight: 500; |
|||
} |
|||
.org-avatar { |
|||
margin: 5px 10px 5px 0; |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
.detail-head { |
|||
font-weight: normal; |
|||
font-size: 18px; |
|||
} |
|||
.map-container { |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
} |
|||
.tag-container a { |
|||
display: inline-block; |
|||
background: #EFEFF4; |
|||
color: #00044a; |
|||
padding: 6px 18px; |
|||
margin: 10px 10px 10px 0; |
|||
font-size: 14px; |
|||
border-radius: 10px; |
|||
} |
|||
.tag-container a:hover { |
|||
text-decoration: none; |
|||
background: #dddde7; |
|||
} |
|||
.share-container a { |
|||
margin: 10px 10px 10px 0; |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* detail pages */ |
|||
@media screen and (max-width: 768px) { |
|||
.profile-nav { |
|||
display: block; |
|||
text-align: center; |
|||
} |
|||
.nav-tabs.profile-nav .nav-item .nav-link { |
|||
font-size: 14px !important; |
|||
} |
|||
} |
|||
.nav-tabs.profile-nav .nav-item .nav-link { |
|||
border: 0; |
|||
color: #00044A; |
|||
font-size: 16px; |
|||
border-bottom: 2px solid transparent; |
|||
} |
|||
.nav-tabs.profile-nav .nav-item.show .nav-link, |
|||
.nav-tabs.profile-nav .nav-link.active { |
|||
color: #00044A; |
|||
background: none; |
|||
border:0; |
|||
border-bottom: 2px solid #00044A; |
|||
font-weight: 600; |
|||
} |
|||
.nav-tabs.profile-nav .nav-item .nav-link:hover { |
|||
border: 0; |
|||
color: #00044A !important; |
|||
border-bottom: 2px solid #00044a28; |
|||
} |
|||
.nav-tabs.profile-nav .nav-item.show .nav-link.active:hover { |
|||
border-bottom: 2px solid #00044A; |
|||
} |
|||
.nav-tabs.profile-nav { |
|||
border:0; |
|||
border-bottom: 2px solid transparent; |
|||
} |
|||
|
|||
div.checkbox.switcher label, div.radio.switcher label { |
|||
padding: 0; |
|||
} |
|||
div.checkbox.switcher label *, div.radio.switcher label * { |
|||
vertical-align: middle; |
|||
} |
|||
div.checkbox.switcher label input, div.radio.switcher label input { |
|||
display: none; |
|||
} |
|||
div.checkbox.switcher label input + span, div.radio.switcher label input + span { |
|||
position: relative; |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
width: 56px; |
|||
height: 30px; |
|||
background: rgb(107 126 146 / 20%); |
|||
border: 3px solid #e1e5e9; |
|||
border-radius: 50px; |
|||
transition: all 0.3s ease-in-out; |
|||
} |
|||
div.checkbox.switcher label input + span small, div.radio.switcher label input + span small { |
|||
position: absolute; |
|||
display: block; |
|||
width: 50%; |
|||
height: 100%; |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
transition: all 0.3s ease-in-out; |
|||
left: 0; |
|||
} |
|||
div.checkbox.switcher label input:checked + span, div.radio.switcher label input:checked + span { |
|||
background: #E8345D ; |
|||
border-color: #E8345D ; |
|||
} |
|||
div.checkbox.switcher label input:checked + span small, div.radio.switcher label input:checked + span small { |
|||
left: 50%; |
|||
} |
|||
.past-events { |
|||
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ |
|||
filter: grayscale(100%); |
|||
opacity: .6; |
|||
} |
|||
|
|||
|
|||
/* image upload */ |
|||
|
|||
#upload { |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
.image-area { |
|||
border: 2px dashed rgb(218 224 229); |
|||
padding: 1em; |
|||
position: relative; |
|||
border-radius: 10px; |
|||
min-height: 160px; |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.image-area::before { |
|||
content: 'Uploaded image result'; |
|||
color: rgb(218 224 229); |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 0.8rem; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.image-area img { |
|||
z-index: 2; |
|||
position: relative; |
|||
} |
|||
.badge { |
|||
padding-left: .8em; |
|||
padding-right: .8em; |
|||
border-radius: 30px; |
|||
} |
|||
.badge.badge-primary { |
|||
color: #fff; |
|||
background-color: #df2751; |
|||
} |
|||
.member-container { |
|||
margin-bottom: 30px; |
|||
} |
|||
.member-container span{ |
|||
font-size: 13px; |
|||
} |
|||
.member-container .member-name { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
display: block; |
|||
color: #00044A; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.modal-backdrop { |
|||
background-color: #354052; |
|||
} |
|||
.modal-content { |
|||
border: 0; |
|||
border-radius: 10px; |
|||
} |
|||
.modal-title { |
|||
font-size: 20px; |
|||
line-height: 1.75; |
|||
} |
|||
|
|||
/*This area was made to be able to navigate between pages. It should be removed from the project*/ |
|||
.page-links { |
|||
position: fixed; |
|||
width: 180px; |
|||
background: #00044a; |
|||
left: -150px; |
|||
top: 50%; |
|||
margin-top: -100px; |
|||
padding: 1em; |
|||
border-radius: 0 10px 10px 0; |
|||
z-index: 1000; |
|||
opacity: .5; |
|||
transition: opacity .3s, left .2s; |
|||
} |
|||
.page-links:hover { |
|||
opacity: .95; |
|||
left: 0px; |
|||
} |
|||
.page-links a{ |
|||
display: block; |
|||
font-size: 12px; |
|||
color: #cbcdf1; |
|||
padding: 2px 0; |
|||
} |
|||
.page-links small{ |
|||
font-size: 10px; |
|||
color: #999cdf; |
|||
} |
|||
/*This area was made to be able to navigate between pages. It should be removed from the project*/ |
|||
@ -1,3 +1,28 @@ |
|||
$(function () { |
|||
|
|||
}); |
|||
$('.main-slider .owl-carousel').owlCarousel({ |
|||
loop:true, |
|||
center:true, |
|||
margin:0, |
|||
padding:0, |
|||
nav:true, |
|||
items:1, |
|||
dots: false, |
|||
}); |
|||
|
|||
$('.card-slider .owl-carousel').owlCarousel({ |
|||
loop:false, |
|||
center:false, |
|||
margin:30, |
|||
padding:0, |
|||
nav:true, |
|||
responsive:{ |
|||
0:{ |
|||
items:1, |
|||
}, |
|||
600:{ |
|||
items:2, |
|||
}, |
|||
}, |
|||
dots: true, |
|||
}); |
|||
}); |
|||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 253 KiB |
|
After Width: | Height: | Size: 480 B |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 410 KiB |
|
After Width: | Height: | Size: 454 KiB |
|
After Width: | Height: | Size: 272 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 511 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 681 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 509 B |
|
After Width: | Height: | Size: 993 B |
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 721 B |
|
After Width: | Height: | Size: 305 B |
|
After Width: | Height: | Size: 515 B |
|
After Width: | Height: | Size: 147 B |
|
After Width: | Height: | Size: 161 B |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 544 KiB |
|
After Width: | Height: | Size: 460 B |
|
After Width: | Height: | Size: 468 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 414 B |
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue