Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@khushimarothi
khushimarothi committed Aug 7, 2022
1 parent a506141 commit 6a7df93
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 10 deletions.
84 changes: 83 additions & 1 deletion opportunity.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<title>Opportunities</title>
</head>
<body class="scroll_bar_visible">

<!--------------------navbar------------------------->
<nav class="nav navbar navbar-expand-lg navbar-dark fixed-top">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
Expand Down Expand Up @@ -44,8 +44,89 @@
<li><a href="contact.html" class="hover-line nav navbars">CONTACT US</a></li>
</div>
</nav>

<!------------------------------main cards section 1------------------------------------------------>
<section class="opportunity">
<div class="row px-4">
<div class="col-md-4 col-lg-3 col-sm-3 h-100" id="opp_card" data-aos="zoom-out-up" style="background-color: #101517;color: wheat;width: 100%;">
<div style="display: flex;flex-direction: column;align-items: center;"class="h-100">
<img src = "./images/opportunities images/hacktoberfest.jpg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid wheat ;"><b>Hacktoberfest 2021</b></h3>
<br>
<h5><i>"Hacktoberfest encourages participation in giving back to the open source community by completing pull requests, participating in events, and donating to open source projects."</i></h5>
<a href="https://hacktoberfest.digitalocean.com/" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
<div class="row px-4">
<div class="col-md-4 col-lg-3 h-100" id="opp_card" data-aos="zoom-out-up" style="background-color: darkorange;width: 100%;">
<div style="display: flex;flex-direction: column;align-items: center;" class="h-100">
<img src = "./images/opportunities images/gsoc.jpg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid black ;"><b>Google Summer of Code</b></h3>
<br>
<h5><i>"GSoC is an international annual program in which Google awards stipends to contributors who successfully complete a free and open-source software coding project during the summer." </i></h5>
<a href="https://summerofcode.withgoogle.com" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
<div class="row px-4">
<div class="col-md-4 col-lg-3" id="opp_card" data-aos="zoom-out-up" style="background-color: #023047;color: wheat;width: 100%;">
<div style="display: flex;flex-direction: column;align-items: center;" class="h-100">
<img src = "./images/opportunities images/jwoc.jpeg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid wheat ;"><b>JGEC Winter of Code</b></h3>
<br>
<h5><i>"JWoC (JGEC Winter of Code) is a coding event organised annually by JGEC which helps students to plunge into Open Source contribution and get the realm of Software Development."</i></h5>
<a href="https://jwoc.tech" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
</section>
<!------------------------------main cards section 2------------------------------------------------>
<section class="opportunity h-100">
<div class="row px-4">
<div class="col-md-4 col-lg-6" id="opp_card" data-aos="zoom-out-up" style="background-color: orange;width:100%;height: 100%;">
<div style="display: flex;flex-direction: column;align-items: center; " class="h-100">
<img src = "./images/opportunities images/gssoc.jpg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid black ;"><b>GSSOC</b></h3>
<br>
<h5 style="font-size: 19px;"><i>"GirlScript Summer of Code is the 3 month long Open Source program during summers conducted by GirlScript Foundation with an aim to help beginners get started with Open Source Development" </i></h5>
<a href="https://gssoc.girlscript.tech" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
<div class="row px-4">
<div class="col-md-4 col-lg-6 h-100" id="opp_card" data-aos="zoom-out-up" style="background-color: orange; width:100%;height: 100%;">
<div style="display: flex;flex-direction: column;align-items: center; " class="h-100">
<img src = "./images/opportunities images/gwoc.jpeg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid black ;"><b>GWOC</b></h3>
<br>
<h5><i>"GirlScript Winter of Contributing is a three-month newly established initiative by GirlScript Foundation to be conducted during winters."</i></h5>
<a href="https://gwoc.girlscript.tech" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
<div class="row px-4">
<div class="col-md-4 col-lg-6 h-100" id="opp_card" data-aos="zoom-out-up" style="background-color:orangered ;width: 100%;height: 100%;">
<div style="display: flex;flex-direction: column;align-items: center;" class="h-100">
<img src = "./images/opportunities images/mlh.jpg" class="myimg" style=" width: 15rem;"/>
<br>
<h3 style="border-bottom: 2px solid black ;"><b>MLH Fellowship</b></h3>
<br>
<h5><i>"The MLH Fellowship is a remote internship alternative . Spend 12 weeks building your skills by collaborating on real-world projects."</i></h5>
<a href="https://fellowship.mlh.io" target="_blank_" class="btn btn-danger">More Details ></a>
</div>
</div>
</div>
</section>

<!-------------------------old code-------------------------------------------->
<!--Add some opportunities you know about-->
<!------------------------------
<div class="opportunity">
<div class="row">
<div class="col-3" id="opp_card" data-aos="zoom-out-up" style="background-color: #101517;color: wheat;width: 60%;height: 40%;">
Expand Down Expand Up @@ -124,6 +205,7 @@ <h5><i>"The MLH Fellowship is a remote internship alternative . Spend 12 weeks b
</div>
</div>
</div>
-->

</body>
<script>
Expand Down
57 changes: 48 additions & 9 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -772,14 +772,20 @@ h1 {
.owner {
text-decoration: none;
}

/*-----------------opportunity-----------------*/
.opportunity .row {
display: flex;
justify-content: center;

}
.opportunity {
transform: translateY(100px);
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
overflow-x: hidden;

}
#opp_card {
background-color: white;
Expand Down Expand Up @@ -904,6 +910,17 @@ h1 {
.contributor_svg_section{
padding-top: 20% !important;
}
/*-----------------opportunity-----------------*/
.opportunity .row{
width: 20rem!important;
}
.opportunity {

justify-content: center;
align-items: center;

overflow-x: hidden;
}
}
@media (max-width: 490px) {
#hackclub {
Expand Down Expand Up @@ -949,6 +966,19 @@ h1 {
.contributor_text h4{
font-size: 27px !important;
}

/*-----------------opportunity-----------------*/
.opportunity {
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}

.opportunity .row{
width: 80%!important;
padding: 1.5rem!important;
}
}
@media (max-width: 575px) {
#project_svg_section{
Expand All @@ -969,6 +999,11 @@ h1 {
.project_svg_text h4{
font-size: 25px !important;
}
/*-------opportunity-------*/
.opportunity .row{
width: 25rem!important;
padding: 0 1rem!important;
}

}
@media (max-width:440px){
Expand Down Expand Up @@ -1007,6 +1042,11 @@ h1 {
.contributor_text h2{
font-size: 27px !important;
}
/*-----------------opportunity-----------------*/
.opportunity .row{
width: 20rem!important;
padding: 0 1rem!important;
}
}
.contributor_text{
padding-top: 9%;
Expand Down Expand Up @@ -1082,15 +1122,14 @@ h1 {
#contributor .userBlock a img{
width: 100%;
}
/*-----------------opportunity-----------------*/
.opportunity .row{
width: 16rem!important;
padding: 1.5rem!important;
}
}
@media (min-width: 768px) {
.opportunity {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
overflow-x: hidden;
}

.btn {
width: max-content;
height: max-content;
Expand Down

0 comments on commit 6a7df93

Please sign in to comment.