Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Browser icons on all page templates + Better Team section #85

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Changed The Team section layout and colors
  • Loading branch information
krzysiekh committed Oct 13, 2019
commit adde559dd80ea897c79b171ef39dac01c296a02a
21 changes: 14 additions & 7 deletions css/index.css
Original file line number Diff line number Diff line change
@@ -101,7 +101,6 @@ button.hamburger{
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}


.officers{
padding: 30px;
font-family: 'Lato', sans-serif;
@@ -162,17 +161,26 @@ a.fa{
opacity: 0.5;
}

.officers .fa {
padding: 12px 0px;
width: 40px;
height: 40px;
margin: 0 5px;
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);

}
.officers .fa-facebook {
background-image: linear-gradient(#5AB9EA,#5AB9EA);
color: white;
color: #fff;
background: #3b5998!important;
text-align: center;
}

.officers .fa-linkedin {
background-image: linear-gradient(#5AB9EA,#5AB9EA);
color: white;
color: #fff;
background: #0082ca!important;
text-align: center;
}


.carousel-inner{
background-image: linear-gradient(to right, #5680e9,#84CEEB)
}
@@ -301,7 +309,6 @@ img {
height: 100vh;
}


/* xs */
@media (min-width: 0px) {

Binary file modified images/archita.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
199 changes: 153 additions & 46 deletions index.html
Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@
<div class="header container-fluid" id="header">
<div class="row" style="margin-right: 35px; ">
<div class="col-1 logo">
<img src="images/acmw_logo.png" alt="ACM-W logo" class="img-logo" style="float: left;">
<img src="images/acmw_logo.png" alt="ACM-W logo" class="img-logo" style="float: left;">
</div>
<div class="col-11 nav-options">
<ul class="nav nav-pills justify-content-end">
@@ -72,7 +72,50 @@
</ul>
</div>
</div>
<a href="https://github.com/acm-w-nitk" class="github-corner" aria-label="View source on GitHub"><svg width="65" height="65" viewBox="0 0 250 250" style="fill:#fff; color:#5f4391; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<a href="https://github.com/acm-w-nitk" class="github-corner" aria-label="View source on GitHub"><svg width="65"
height="65" viewBox="0 0 250 250"
style="fill:#fff; color:#5f4391; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {

0%,
100% {
transform: rotate(0)
}

20%,
60% {
transform: rotate(-25deg)
}

40%,
80% {
transform: rotate(10deg)
}
}

@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}

.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
</div>
<div class="main-header">
<div class="row">
@@ -97,8 +140,13 @@
<div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">
<heading>About Us</heading>
<br>
<parabody>ACM-W is an international organisation which supports and empowers women in all aspects of the computing field. We at ACM-W, NITK chapter wish to inspire and nurture young minds to step up and make a mark in the computing universe. Our aim is to promote learning and create a workspace where the ideas of young women can take shape and build the future.From providing a wide range of opportunities, to working in a larger community to advance contributions by creative minds, ACM-W NITK aims to be a stepping stone for women to be celebrated and create a difference.
</parabody>
<parabody>ACM-W is an international organisation which supports and empowers women in all aspects of the
computing field. We at ACM-W, NITK chapter wish to inspire and nurture young minds to step up and
make a mark in the computing universe. Our aim is to promote learning and create a workspace where
the ideas of young women can take shape and build the future.From providing a wide range of
opportunities, to working in a larger community to advance contributions by creative minds, ACM-W
NITK aims to be a stepping stone for women to be celebrated and create a difference.
</parabody>
</div>
</div>
</div>
@@ -121,11 +169,14 @@
<div class="paragraph">
<heading>Discover Opportunities</heading>
<br>
<parabody>Join ACM-W to make a difference and get your ideas sculpted into reality. From multiple scholarships, to competitions,
the NITK chapter has a plethora of events lined up. Work on various projects and make a mark in the computational world.
Apart from setting goals in the computing universe, meet new people and researchers with a similar mindset who aim to
make a similar change in today’s world.
<a href="html/discover.html">Click here for more</a>
<parabody>Join ACM-W to make a difference and get your ideas sculpted into reality. From
multiple scholarships, to competitions,
the NITK chapter has a plethora of events lined up. Work on various projects and
make a mark in the computational world.
Apart from setting goals in the computing universe, meet new people and researchers
with a similar mindset who aim to
make a similar change in today’s world.
<a href="html/discover.html">Click here for more</a>
</parabody>
</div>
</div>
@@ -135,31 +186,38 @@
<div class="carousel-item">
<div class="row">
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
<img src="images/slide1.jpg" alt="Our Events" style="margin-top: 15%">
<img src="images/slide1.jpg" alt="Our Events" style="margin-top: 15%">
</div>
<div class="paragraph col-lg-7 col-md-12 col-sm-12 col-xs-12">
<heading>Our Events</heading>
<br>
<parabody>ACM-W aims at holding events in order to empower women in various fields of technology whether it's in a classroom or a
boardroom. Our events are carefully curated for the education and advancement of women in the technical sphere. In our NITK chapter of ACM-W, we aspire to hold events that will provide opportunities for women to come forward and
learn more about the technical world.
<a href="html/events.html">Click here for more</a>
</parabody>
<parabody>ACM-W aims at holding events in order to empower women in various fields of
technology whether it's in a classroom or a
boardroom. Our events are carefully curated for the education and advancement of women
in the technical sphere. In our NITK chapter of ACM-W, we aspire to hold events that
will provide opportunities for women to come forward and
learn more about the technical world.
<a href="html/events.html">Click here for more</a>
</parabody>
</div>
</div>
</div>

<div class="carousel-item">
<div class="row">
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
<img src="images/slide2.jpg" alt="Major Events" style="margin-top: 10%">
<img src="images/slide2.jpg" alt="Major Events" style="margin-top: 10%">
</div>
<div class="paragraph col-lg-7 col-md-12 col-sm-12 col-xs-12">
<heading>Mentorship System</heading>
<br>
<parabody>
As an initiative of ACM-W, we plan to introduce a mentorship system, wherein a junior is paired with a senior from ACM to guide them in their journey through college. We hope to help them with academics, career planning, research opportunities and to explore new fields. It gives them a chance to talk to people that have had first-hand experience with coveted research programmes and internships alike.
<a href="html/mentorship.html">Click here for more</a>
As an initiative of ACM-W, we plan to introduce a mentorship system, wherein a junior is
paired with a senior from ACM to guide them in their journey through college. We hope to
help them with academics, career planning, research opportunities and to explore new
fields. It gives them a chance to talk to people that have had first-hand experience
with coveted research programmes and internships alike.
<a href="html/mentorship.html">Click here for more</a>
</parabody>
</div>
</div>
@@ -174,35 +232,83 @@
</div>
</div>

<div class="paragraph container-fluid" style="background-color: #EAEAEA; padding-bottom: 20px; padding-top: 20px;" id="team">
<div class="paragraph container-fluid" style="background-color: #EAEAEA; padding-bottom: 20px; padding-top: 20px;"
id="team">
<div class="officers container">
<heading style="align-content: center;">Meet our Club Officers</heading>
<br>
<div class="row" style="margin: 0 auto; align-content: center;">
<div class="card col-md-6 col-sm-12 col-xs-12">
<img src="images/apoorva.jpg" class="rounded-circle" alt="Chair" style="margin:auto;width:50%">
<div class="card-body">
<name class="card-title">M K Apoorva</name>
<br>
<role class="card-text">Chair</role>
<br>
<a href="https://www.facebook.com/profile.php?id=100018343548473" class="fa fa-facebook"></a>
<a href="https://www.linkedin.com/in/apoorva-m-k-b23406169/" class="fa fa-linkedin"></a>


<!-- Section description -->
<p class=" text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam
voluptas
nostrum quisquam eum porro a pariatur veniam.</p>



<!-- Grid row-->
<div class="row text-center text-md-left">

<!-- Grid column -->
<div class="col-xl-6 col-lg-12 mb-xl-0 mb-5 d-md-flex justify-content-between">
<div class="avatar mb-md-0 mb-4 mx-4">
<img src="images/apoorva.jpg" class="rounded z-depth-1" alt="Chair">
</div>
<div class="mx-4">
<h4 class="font-weight-bold mb-3">
<name class="card-title">M K Apoorva</name>
</h4>
<h6 class="font-weight-bold mb-3">
<role class="card-text">Chair</role>
</h6>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id
officiis hic
tenetur.</p>
<!-- Facebook-->
<a class="officers-btn" href="https://www.facebook.com/profile.php?id=100018343548473">
<i class="fa fa-facebook"> </i>
</a>
<!--LinkedIn -->
<a href="https://www.linkedin.com/in/apoorva-m-k-b23406169/">
<i class="fa fa-linkedin"> </i>
</a>
</div>
</div>
</div>
<div class="card col-md-6 col-sm-12 col-xs-12">
<img src="images/archita.jpeg" class="rounded-circle" alt="Vice Chair" style="margin:auto;width:50%">
<div class="card-body">
<name class="card-title">Archita Sajjan</name>
<br>
<role class="card-text">Vice-Chair</role>
<br>
<a href="https://en-gb.facebook.com/people/Archita-Sajjan/100019373504599"
class="fa fa-facebook"></a>
<a href="https://www.linkedin.com/in/archita-sajjan-a44410160/" class="fa fa-linkedin"></a>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-xl-6 col-lg-12 d-md-flex justify-content-between">
<div class="avatar mb-md-0 mb-4 mx-4">
<img src="images/archita.jpeg" class="rounded z-depth-1" alt="Chair">
</div>
<div class="mx-4">
<h4 class="font-weight-bold mb-3">
<name class="card-title">Archita Sajjan</name>
</h4>
<h6 class="font-weight-bold mb-3">
<role class="card-text">Vice-Chair</role>
</h6>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id
officiis hic
tenetur.</p>
<!-- Facebook-->
<a href="https://en-gb.facebook.com/people/Archita-Sajjan/100019373504599">
<i class="fa fa-facebook"> </i>
</a>
<!--LinkedIn -->
<a href="https://www.linkedin.com/in/archita-sajjan-a44410160/">
<i class="fa fa-linkedin"> </i>
</a>

</div>
</div>
<!-- Grid column -->

</div>
</div>



</div>
</div>

@@ -211,7 +317,8 @@
<div class="paragraph" style="font-family: 'Lato', sans-serif; font-weight: 100;">
<heading>Say Hello!</heading>
<br>
<parabody>At ACM-W we're all ears. Feel free to drop in your feedback or suggestions, we'd love to hear from you. Leave us a mail or connect with us on our social media accounts.</parabody>
<parabody>At ACM-W we're all ears. Feel free to drop in your feedback or suggestions, we'd love to hear
from you. Leave us a mail or connect with us on our social media accounts.</parabody>
</div>
<br>
<br>
@@ -229,9 +336,9 @@
</div>
<br>
<div class="paragraph parabody" style="float: right; padding-right: 70px;">Developed by ACM-W Team</div>
<br>
<br>
</div>
<br>
<br>
</div>
</div>

<!-- Local Imports for JS -->
@@ -240,4 +347,4 @@

</body>

</html>
</html>