mirror of
https://github.com/Rushilwiz/tjld.git
synced 2025-04-09 15:00:17 -04:00
feat: finished template for officers
This commit is contained in:
parent
8a4c8237e9
commit
c156e3f62f
|
|
@ -5,7 +5,7 @@
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
overflow: hidden !important;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
|
|
@ -159,7 +159,22 @@ header nav .burger div {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
-ms-flex-wrap: wrap;
|
-ms-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
-ms-flex-line-pack: center;
|
||||||
|
align-content: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.row {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
|
|
@ -182,4 +197,43 @@ header nav .burger div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #ffd1dc;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile h1 {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-size: 1.6em;
|
||||||
|
margin-top: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile h2 {
|
||||||
|
font-family: "Playfair Display", serif;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile p {
|
||||||
|
font-family: sans-serif;
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile p a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #11c1e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile.single p {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
/*# sourceMappingURL=officers.css.map */
|
/*# sourceMappingURL=officers.css.map */
|
||||||
|
|
@ -7,7 +7,13 @@
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
|
align-content: center
|
||||||
|
justify-content: center
|
||||||
width: 100%
|
width: 100%
|
||||||
|
margin-bottom: 2em
|
||||||
|
|
||||||
|
@include mobile
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
.column
|
.column
|
||||||
display: flex
|
display: flex
|
||||||
|
|
@ -18,4 +24,37 @@
|
||||||
.header
|
.header
|
||||||
font-family: $subtitle-stack
|
font-family: $subtitle-stack
|
||||||
text-align: center
|
text-align: center
|
||||||
font-size: 4em
|
font-size: 4em
|
||||||
|
|
||||||
|
|
||||||
|
.profile
|
||||||
|
margin: 0 auto
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 200px
|
||||||
|
height: 200px
|
||||||
|
background-color: #ffd1dc
|
||||||
|
border-radius: 50%
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-family: $title-stack
|
||||||
|
font-size: 1.6em
|
||||||
|
margin-top: 0.3em
|
||||||
|
|
||||||
|
h2
|
||||||
|
font-family: $subtitle-stack
|
||||||
|
font-size: 1em
|
||||||
|
|
||||||
|
p
|
||||||
|
font-family: sans-serif
|
||||||
|
width: 60%
|
||||||
|
margin: 0 auto
|
||||||
|
margin-top: 0.5em
|
||||||
|
|
||||||
|
a
|
||||||
|
text-decoration: none
|
||||||
|
color: #11c1e0
|
||||||
|
|
||||||
|
&.single p
|
||||||
|
width: 30%
|
||||||
|
|
@ -37,10 +37,99 @@
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<img />
|
<img />
|
||||||
|
<h1>Swesik Ramenini</h1>
|
||||||
|
<h2>Captain</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div>Some Text in Column Two</div>
|
<div class="profile">
|
||||||
|
<img />
|
||||||
|
<h1>Atin Pothiraj</h1>
|
||||||
|
<h2>Captain</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<div class="profile">
|
||||||
|
<img />
|
||||||
|
<h1>Rhea Goswami</h1>
|
||||||
|
<h2>Teaching Coordinator</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="profile">
|
||||||
|
<img />
|
||||||
|
<h1>Arya Sapra</h1>
|
||||||
|
<h2>Teaching Coordinator</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<div class="profile">
|
||||||
|
<img />
|
||||||
|
<h1>Rushil Umaretiya</h1>
|
||||||
|
<h2>Treasurer/Webmaster</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="profile">
|
||||||
|
<img />
|
||||||
|
<h1>Allison Zhong</h1>
|
||||||
|
<h2>Publicist</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<div class="profile single">
|
||||||
|
<img />
|
||||||
|
<h1>Tanvi Pedireddi</h1>
|
||||||
|
<h2>Research Coordinator</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||||
|
quisquam magni rerum, beatae vel deleniti temporibus tempore
|
||||||
|
voluptas impedit enim similique vero eos est, molestiae explicabo
|
||||||
|
quam eligendi sapiente odit? <a href="#">More</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user