Skip to content

Commit

Permalink
Merge pull request #47 from thecoding-society/design
Browse files Browse the repository at this point in the history 
Media Queries for mobile view
  • Loading branch information
@aviiciii
aviiciii authored Jul 14, 2023
2 parents 24a0a7c + 7ffa8a7 commit b3e33cb
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 42 deletions.
58 changes: 58 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1646,6 +1646,18 @@ section {
width: 50%;
}

.dummy{
height:18.75;
padding-left:130px;

}
.wwe{
height:12.5rem;
margin-left: 130px;
}



/* MEDIA QUERIES */

@media screen and (min-width: 768px) {
Expand Down Expand Up @@ -1678,3 +1690,49 @@ section {

}
}

@media screen and (max-width: 768px) {
section{
padding: 40px 0px;
}
.half-width{
width: 100%;
}
.container{
width: 94%;
}
.timeline {
width: 100%;
}
.timeline-middle {
display: none;
}
.main-middle {
opacity: 1;
}
.timeline-circle {
position: relative;
left: 0;
top: 0;
margin: 0 auto;
}

#proposal-p {
margin: 0px 10px;
}
#about-img{
display: none;
}
#rules-box{
padding:0;
}
.wwe{
height:8rem;
/* center img */
display: block;
margin-left: auto;
margin-right: auto;


}
}
64 changes: 22 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ <h2>About</h2>

<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img src="img/about.jpg" style="width: 550px;" class="img-fluid dummy" alt="hackathon-img" />
<img id="about-img" src="img/about.jpg" style="width: 550px;" class="img-fluid dummy" alt="hackathon-img" />
</div>
<div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content">
<h3>Welcome, Hackers!</h3>
Expand All @@ -132,47 +132,31 @@ <h3>Welcome, Hackers!</h3>
organized by <span>Panimalar Engineering College</span>. It is your gateway to a world of possibilities, where passionate
individuals like you come together to unleash their creativity, solve real-world challenges, and make a meaningful difference."
</p>
<p class="prize-pool">Prize Pool of <span>&#8377; 1.5 Lakh+</span> .</p>
<style>

.dummy{
height:18.75;
padding-left:130px;

}

</style>



<p class="prize-pool">Prize Pool of <span>&#8377; 1.5 Lakh+</span> .</p>
</div>
</div>
</div>
</section>
<!-- End About Section -->

<div class="container">
<div class="section-title"></div>

<div class="section-title">

</div>
<div class="row">
<div class="col-lg-6 order-1 order-lg-1">
<img src="img/download.jpg" class="img-fluid wwe " alt="hackathon-img" style="margin-left: 130px;">
<div class="col-lg-6 order-1 order-lg-1 mt-lg-2">
<img src="img/download.jpg" class="img-fluid wwe " alt="hackathon-img" >
</div>
<div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-2 content">
<h3>Organized By</h3>
<br />
<p class="fst-italic about-para">
"The Coding Society, The Department of Computer Science and Business Systems of <span>Panimalar Engineering College</span>"
</p>
<style>

.wwe{
height:12.5rem;

}
</style>
</div>
</div>
</div>
</section>

<!-- End About Section -->



Expand Down Expand Up @@ -237,7 +221,7 @@ <h4>Healthcare:</h4>
</div>
</div>

<div class="col-lg-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="0">
<div class="col-lg-4 mt-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="0">
<div class="box">
<span>04</span>
<h4>Social Impact:</h4>
Expand All @@ -254,24 +238,20 @@ <h4>Social Impact:</h4>
</div>
</div>

<div class="col-lg-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-4 mt-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="box">
<span>05</span>
<h4>High School Track</h4>
<p>Problem Statement</p>
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.👀




👀
The problem statement for the high school track will be announced at a later date. Stay tuned for updates on our website and
social media channels. We're excited to see how you'll tackle the challenge and come up with innovative solutions!
</p>
</div>
</div>

<div class="col-lg-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 mt-4 mt-lg-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="box">
<span>06</span>
<h4>Open Track</h4>
Expand Down Expand Up @@ -869,12 +849,12 @@ <h2>Contact Form</h2>

<!-- access key -->
<input type="hidden" name="access_key" value="bea2e9ae-97e6-4f37-a6fb-594a51b359c1" />
<!-- redirect url -->
<input type="hidden" name="redirect" value="https://pechacks.org/formsubmitted.html">
<!-- bot preventer -->
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<!-- from name -->
<input type="hidden" name="from_name" value="Website Contact Form">
<!-- redirect url -->
<input type="hidden" name="redirect" value="https://pechacks.org/formsubmitted.html">
<!-- bot preventer -->
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<!-- from name -->
<input type="hidden" name="from_name" value="Website Contact Form">

<div class="row">
<div class="col-md-6 form-group">
Expand Down

0 comments on commit b3e33cb

Please sign in to comment.