Setting up about page
This commit is contained in:
parent
8e6e1cfaa4
commit
eaadb386c8
6 changed files with 147 additions and 4 deletions
|
@ -68,7 +68,7 @@ b, strong, label, th {
|
|||
src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
|
||||
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .notebook .screen .screen-content-hover, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease; }
|
||||
|
@ -1347,6 +1347,55 @@ ul.pagination {
|
|||
z-index: -1;
|
||||
border-radius: 100%; }
|
||||
|
||||
.team {
|
||||
background: #EEEEEE;
|
||||
padding: 4rem 0;
|
||||
text-align: center; }
|
||||
.team:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.team h2 {
|
||||
color: #656161;
|
||||
margin: 0;
|
||||
line-height: 100%; }
|
||||
.team p {
|
||||
margin: 1rem 0; }
|
||||
.team .members {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-top: 2rem; }
|
||||
.team .members .member {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 22%;
|
||||
margin: 0 1rem; }
|
||||
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .contact label, .contact .team .members .member label {
|
||||
text-align: left;
|
||||
margin-bottom: 0; }
|
||||
.team .members .member hr {
|
||||
margin: 1rem 0; }
|
||||
.team .members .social-icons {
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
list-style: none; }
|
||||
.team .members .social-icons li {
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
margin-right: 0.8rem; }
|
||||
.team .members .social-icons li a {
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-top: 0.1rem; }
|
||||
.team .members .social-icons li:hover {
|
||||
background: rgba(255, 255, 255, 0.5); }
|
||||
.team .members .social-icons li:hover i {
|
||||
color: #87b672; }
|
||||
|
||||
.logo {
|
||||
border-bottom: 1px solid #eaeaea; }
|
||||
.logo h3 {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,6 +3,7 @@
|
|||
@import "bottom";
|
||||
@import "contact";
|
||||
@import "text";
|
||||
@import "team";
|
||||
|
||||
.logo {
|
||||
h3 {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Modular Showcase styling
|
||||
// Modular Contact styling
|
||||
.contact {
|
||||
h4 {
|
||||
text-align: left;
|
||||
|
|
64
scss/template/modular/_team.scss
Normal file
64
scss/template/modular/_team.scss
Normal file
|
@ -0,0 +1,64 @@
|
|||
// variables
|
||||
$module-bg: #EEEEEE;
|
||||
|
||||
// styling
|
||||
.team {
|
||||
background: $module-bg;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
h2 {
|
||||
color: $light-gray;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.members {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-top: 2rem;
|
||||
.member {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 22%;
|
||||
margin: 0 1rem;
|
||||
h4 {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
.social-icons {
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
@extend .default-animation;
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
background: $white;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
margin-right: 0.8rem;
|
||||
a {
|
||||
@extend .default-animation;
|
||||
color: $black;
|
||||
display: block;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
&:hover {
|
||||
background: transparentize($white, 0.5);
|
||||
i {
|
||||
color: $core-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
29
templates/modular/team.html.twig
Normal file
29
templates/modular/team.html.twig
Normal file
|
@ -0,0 +1,29 @@
|
|||
<div class="modular-row team">
|
||||
{{ content }}
|
||||
<div class="members">
|
||||
{% for member in page.header.members %}
|
||||
<div class="member">
|
||||
<img src="{{page.media[member.image].url}}" alt="">
|
||||
<h4>{{ member.name }}</h4>
|
||||
<span>{{ member.title }}</span>
|
||||
<hr>
|
||||
<p>{{ member.info }}</p>
|
||||
<ul class="social-icons">
|
||||
<li>
|
||||
<a href="{{ member.social_twitter }}">
|
||||
<i class="fa fa-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ member.social_facebook }}">
|
||||
<i class="fa fa-facebook"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ member.social_feed }}">
|
||||
<i class="fa fa-rss"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="callout-line"></div>
|
||||
</div>
|
Loading…
Reference in a new issue