rushilwiz/tjld
1
0
Fork 0
mirror of https://github.com/Rushilwiz/tjld.git synced 2025-04-03 20:10:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: finished template for officers

Browse Source
This commit is contained in:
Rushil Umaretiya 2021-08-16 18:15:27 +02:00
parent 8a4c8237e9
commit c156e3f62f
No known key found for this signature in database
GPG Key ID: 4E8FAF9C926AF959
4 changed files with 185 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/index.css
View File

@ -5,7 +5,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
overflow: hidden !important;
overflow-x: hidden;
}
a {

54
css/officers.css
View File

@ -159,7 +159,22 @@ header nav .burger div {
flex-direction: row;
-ms-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%;
margin-bottom: 2em;
}
@media (max-width: 1100px) {
.row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.column {
@ -182,4 +197,43 @@ header nav .burger div {
text-align: center;
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 */

41
css/officers.sass
View File

@ -7,7 +7,13 @@
display: flex
flex-direction: row
flex-wrap: wrap
align-content: center
justify-content: center
width: 100%
margin-bottom: 2em
@include mobile
flex-direction: column
.column
display: flex
@ -18,4 +24,37 @@
.header
font-family: $subtitle-stack
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%

91
officers.html
View File

@ -37,10 +37,99 @@
<div class="column">
<div class="profile">
<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 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>
</section>