Add photo grid component for careers page
|
@ -0,0 +1,20 @@
|
|||
////////////////////
|
||||
// Filmstrip
|
||||
////////////////////
|
||||
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-gap: rem-calc(10px);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 0 auto;
|
||||
max-width: 80vmax;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
max-width: none;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-grid img {
|
||||
width: 100%;
|
||||
}
|
|
@ -34,3 +34,4 @@
|
|||
@import "component/media-grid";
|
||||
@import "component/icon-grid";
|
||||
@import "component/action-list";
|
||||
@import "component/photo-grid";
|
||||
|
|
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 42 KiB |
26
careers.html
|
@ -31,15 +31,33 @@ hero:
|
|||
|
||||
|
||||
<section class="bg-slate-100">
|
||||
<div class="section-container text-center">
|
||||
<div class="section-container pl-3 pr-3 text-center">
|
||||
<hgroup class="m-auto text-length-lg">
|
||||
<h2 id="why-scribd" class="section-heading text-plum">Why Scribd</h2>
|
||||
<h3 class="h2">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
|
||||
<h3 class="h2 mb-3">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
|
||||
</hgroup>
|
||||
|
||||
<div class="photo-grid">
|
||||
<img class="rounded"
|
||||
srcset="{{ '/assets/images/general/team-photo-1.jpg' | relative_url }},
|
||||
{{ '/assets/images/general/team-photo-1@2x.jpg' | relative_url }} 2x"
|
||||
src="{{ '/assets/images/general/team-photo-1.jpg' | relative_url }}" role="presentation" alt="">
|
||||
<img class="rounded"
|
||||
srcset="{{ '/assets/images/general/team-photo-2.jpg' | relative_url }},
|
||||
{{ '/assets/images/general/team-photo-2@2x.jpg' | relative_url }} 2x"
|
||||
src="{{ '/assets/images/general/team-photo-2.jpg' | relative_url }}" role="presentation" alt="">
|
||||
<img class="rounded"
|
||||
srcset="{{ '/assets/images/general/team-photo-3.jpg' | relative_url }},
|
||||
{{ '/assets/images/general/team-photo-3@2x.jpg' | relative_url }} 2x"
|
||||
src="{{ '/assets/images/general/team-photo-3.jpg' | relative_url }}" role="presentation" alt="">
|
||||
<img class="rounded"
|
||||
srcset="{{ '/assets/images/general/team-photo-4.jpg' | relative_url }},
|
||||
{{ '/assets/images/general/team-photo-4@2x.jpg' | relative_url }} 2x"
|
||||
src="{{ '/assets/images/general/team-photo-4.jpg' | relative_url }}" role="presentation" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-container">
|
||||
<hgroup class="m-auto text-center text-length-lg">
|
||||
<h2 id="benifits" class="section-heading text-teal">Benifits</h2>
|
||||
|
@ -91,7 +109,7 @@ hero:
|
|||
<div class="section-container">
|
||||
<hgroup class="m-auto text-length-lg text-center">
|
||||
<h2 id="our-advisors" class="section-heading text-cabernet">Our Advisors</h2>
|
||||
<h3 class="h2">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
|
||||
<h3 class="h2">You’ll have access to the best mentors in the world.</h3>
|
||||
</hgroup>
|
||||
|
||||
<ul class="media-grid media-grid-large mt-5">
|
||||
|
|