mirror of
https://github.com/seigler/dash-website
synced 2025-07-26 23:06:09 +00:00
fixed dash school
This commit is contained in:
Lee Wong
tungfa
parent
5520cd4cac
commit
672d2bf126
5 changed files with 181 additions and 103 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<div class="hero" id="hero">
|
||||
<div class="hero__background hero__background_school">
|
||||
<div class="hero__background">
|
||||
{% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %}
|
||||
{% srcset_source width:1920 %}
|
||||
{% srcset_source width:960 %}
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
<p class="hero__lead">by Amanda B. Johnson</p>
|
||||
|
||||
<div class="hero__buttons">
|
||||
<a href="#" class="btn-green">Watch now</a>
|
||||
<a href="#" class="btn-green">Youtube</a>
|
||||
<a href="https://youtu.be/e7UwwcCKj4Y?list=PLiFMZOlhgsYKKOUOVjQjESCXfR1cCYCod" class="btn-white-solid" target="_blank">Watch now</a>
|
||||
<a href="https://www.youtube.com/channel/UCAzD2v9Yx4a4iS2_-unODkA" class="btn-transparent" target="_blank">Youtube</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero stripe -->
|
||||
<div class="hero__stripe"></div>
|
||||
<div class="hero__stripe hero__stripe--grey"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ description: pages.community.description
|
|||
{% include hero/school.html %}
|
||||
|
||||
|
||||
<div class="page">
|
||||
<div class="page page--school">
|
||||
<section class="section">
|
||||
<div class="section__content">
|
||||
<div class="row">
|
||||
|
|
@ -104,32 +104,42 @@ description: pages.community.description
|
|||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h4 class="school__subheading">Dash detailed</h4>
|
||||
<h3 class="school__heading">About</h3>
|
||||
<div class="section__content">
|
||||
<div class="school__content">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="school__heading">
|
||||
About <br>
|
||||
Dash: detailed
|
||||
</h3>
|
||||
<p class="school__descr">
|
||||
DASH: Detailed has been published every Wednesday since it was launched in June, 2016.
|
||||
</p>
|
||||
<p>
|
||||
<p class="school__text">
|
||||
Hosted and written by Amanda B. Johnson, and produced by Pete Eyre, the series is funded directly by Dash's treasury according to stakeholder vote, making it the world's first Youtube show to be funded by blockchain. Featuring event analysis, product updates, and industry interviews, DASH: Detailed is suitable for seasoned investors and newcomers alike.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4 col-sm-offset-1">
|
||||
<h2 class="school__team-heading">Dash Detailed: Team</h2>
|
||||
<div class="clearfix">
|
||||
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
|
||||
<div class="pull-right">
|
||||
<b class="school__author">Amanda B.Johnson</b>
|
||||
<p>Host&Writter</p>
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<div class="school__team">
|
||||
<h2 class="school__team-heading">
|
||||
Dash Detailed:
|
||||
Team
|
||||
</h2>
|
||||
<div class="clearfix school__member-row">
|
||||
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
|
||||
<div class="pull-right">
|
||||
<div class="school__author">Amanda B.Johnson
|
||||
<p>Host&Writter</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix">
|
||||
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
|
||||
<div class="pull-right">
|
||||
<b class="school__author">Pete Eyre</b>
|
||||
<p>Video Editor</p>
|
||||
<div class="clearfix school__member-row">
|
||||
<img src="/assets/img/blog/amigos.png" class="school__ava pull-left">
|
||||
<div class="pull-right">
|
||||
<div class="school__author">
|
||||
Pete Eyre
|
||||
<p>Video Editor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,3 +73,18 @@
|
|||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
@extend .btn;
|
||||
background-color: transparent;
|
||||
color: $color-white !important;
|
||||
border: 1px solid $color-white;
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
@extend .btn;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $color-black !important;
|
||||
border: 1px solid #b5b5b5
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,4 +26,7 @@ $m: 'page';
|
|||
&--wallets {
|
||||
|
||||
}
|
||||
&--school {
|
||||
background: $color-gray-light;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,91 +1,141 @@
|
|||
$m: 'video-post';
|
||||
|
||||
.#{$m} {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 pxToRem(20px);
|
||||
margin-bottom: pxToRem(40px);
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-wrap: break-word;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: pxToRem(40px);
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-wrap: break-word;
|
||||
background: #fff;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
height: 500px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: .3s all;
|
||||
|
||||
&__title {
|
||||
@include font-title-large();
|
||||
margin-bottom: pxToRem(10px);
|
||||
a {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
display: inline-block;
|
||||
margin-bottom: pxToRem(10px);
|
||||
color: transparentize($color-black, 0.5);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@include overflow-image-wrapper();
|
||||
background: rgba($color-blue, 0.1);
|
||||
margin-bottom: pxToRem(40px);
|
||||
&__title {
|
||||
padding: 0 pxToRem(20px);
|
||||
font-size: 1.3em;
|
||||
margin-bottom: pxToRem(10px);
|
||||
color: $color-black;
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-image {
|
||||
// Hide images until we actually have htem
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
@include overflow-image();
|
||||
}
|
||||
&__description{
|
||||
color: $gray-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
}
|
||||
&--sidebar,
|
||||
&--text-only {
|
||||
.#{$m}__preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&--sidebar {
|
||||
.#{$m} {
|
||||
&__title {
|
||||
@include font-title-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
display: inline-block;
|
||||
margin-bottom: pxToRem(10px);
|
||||
color: transparentize($color-black, 0.5);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@include overflow-image-wrapper();
|
||||
background: rgba($color-blue, 0.1);
|
||||
margin-bottom: pxToRem(40px);
|
||||
|
||||
&--no-image {
|
||||
// Hide images until we actually have htem
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
@include overflow-image();
|
||||
}
|
||||
&__description{
|
||||
padding: 0 pxToRem(20px);
|
||||
color: #5e5e5e;
|
||||
font-size: 0.7em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
&--sidebar,
|
||||
&--text-only {
|
||||
.#{$m}__preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&--sidebar {
|
||||
.#{$m} {
|
||||
&__title {
|
||||
@include font-title-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.school{
|
||||
&__subheading {
|
||||
margin-left: 80px;
|
||||
color: $brand-primary;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
&__heading {
|
||||
margin-left: 80px;
|
||||
font-size: $font-size-h1;
|
||||
color: $brand-primary;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
&__descr {
|
||||
color: $gray-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__ava {
|
||||
margin-bottom: 15px;
|
||||
margin-right: 40px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
&__author {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
&__team-heading {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&__content{
|
||||
width: 1280px;
|
||||
max-width: 96%;
|
||||
max-width: calc(100% - 40px);
|
||||
margin: 0 auto 100px;
|
||||
}
|
||||
&__text{
|
||||
font-size: 0.9em;
|
||||
color: #5e5e5e;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
&__subheading {
|
||||
color: $color-black;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
&__heading {
|
||||
font-size: 2.2em;
|
||||
line-height: 1.2;
|
||||
color: $color-black;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
&__descr {
|
||||
color: $color-black;
|
||||
max-width: 450px;
|
||||
margin-top: 42px;
|
||||
font-size: 1.3em;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
&__ava {
|
||||
margin-right: 20px;
|
||||
border-radius: 50%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
&__author {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $headings-font-weight;
|
||||
p {
|
||||
font-size: 0.75em;
|
||||
color: #8e8e8e;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
&__team {
|
||||
background: #f7f9fa;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding: 31px 33px 11px;
|
||||
}
|
||||
&__team-heading {
|
||||
font-weight: $font-weight-regular;
|
||||
font-size: 1em;
|
||||
margin-bottom: 25px;
|
||||
max-width: 150px;
|
||||
}
|
||||
&__member-row {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:nth-of-type(even){
|
||||
border-top: 1px solid #ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue