Skip to content

Commit

Permalink
Merge pull request #141 from Anomasingh/Anoma
Browse files Browse the repository at this point in the history 
Made the About Me and Projects Section Responsive Issue#133 Solved
  • Loading branch information
@ayushichoudhary-19
ayushichoudhary-19 authored Jan 22, 2024
2 parents 7ff4a26 + 503060e commit 294b04d
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 127 deletions.
46 changes: 16 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,37 +174,23 @@ <h1>
</p>
</div>

<div id="xp">
<div
class="vab-box"
data-aos="flip-left"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="inc">26</div>
<div class="text-box">Projects Created</div>
</div>
<div
class="vab-box"
data-aos="flip-left"
data-aos-delay="500"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="speed">25000</div>
<div class="text-box">Lines of Code Written</div>
</div>
<div
class="vab-box"
data-aos="flip-left"
data-aos-delay="1000"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="tick">14</div>
<div class="text-box">Hackathons Participated</div>
<section id="about">
<div id="xp">
<div class="vab-box" data-aos="flip-left" data-aos-easing="ease-out-cubic">
<div class="num-box" id="inc">26</div>
<div class="text-box">Projects Created</div>
</div>
<div class="vab-box" data-aos="flip-left" data-aos-delay="500" data-aos-easing="ease-out-cubic">
<div class="num-box" id="speed">25000</div>
<div class="text-box">Lines of Code Written</div>
</div>
<div class="vab-box" data-aos="flip-left" data-aos-delay="1000" data-aos-easing="ease-out-cubic">
<div class="num-box" id="tick">14</div>
<div class="text-box">Hackathons Participated</div>
</div>
</div>
</div>
</div>
</section>

</section>

<!-- Skills section -->
<section id="skill_section" class="skills">
<div class="container">
Expand Down
143 changes: 46 additions & 97 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -719,32 +719,35 @@ input[type="file"] {
}

/* ------------------About Me Section ----------------- */

#about {
background-color: #e0f7fa;
}

.line {
display: flex;
margin-left: 2rem;
font-size: 1.1rem;
text-shadow: 0.5px 0.4px black;
padding: 20px;
}

#xp {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 3rem;
}

.vab-box {
flex: 0 0 calc(33.33% - 20px);
background-color: white;
padding: 2rem 3rem;
padding: 2rem;
font-size: 1.3rem;
text-align: center;
border-radius: 1rem;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}

.container {
display: flex;
flex-direction: column;
}

* {
box-sizing: border-box;
}

.num-box {
Expand All @@ -755,6 +758,13 @@ input[type="file"] {
content: "+";
}

@media (max-width: 767px) {
.vab-box {
flex: 0 0 100%;
}
}


/* ----------------About Me Section Ends------------------- */

#about-heading,
Expand All @@ -778,7 +788,7 @@ input[type="file"] {
/* Projects */
.about-me,
.projects {
background-color: #f4f4f4;
background-color: #ffffff;
padding: 40px 0;
}

Expand All @@ -788,7 +798,7 @@ input[type="file"] {

#projects {
padding: 40px 0;
background-color: #f4f4f4;
background-color: #f9fbfc;
}
#project-heading {
text-align: center;
Expand All @@ -815,17 +825,21 @@ input[type="file"] {
overflow: hidden;
background-color: #fff;
padding: 20px;
margin: 2rem;
margin: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 800px;
transition: transform background-color 0.2s ease-in-out;
height: 238px;
max-width: calc(100% - 40px);
transition: transform background-color 0.5s ease-in-out;
height: auto;
width: 100%;
box-sizing: border-box;
background-color: fff;
}

.project:hover {
transform: scale(1.05);
background-color: #f6f6f6;
transition: transform background-color 0.5s ease-in-out;
}

@media screen and (max-width: 918px) {
Expand All @@ -837,8 +851,15 @@ input[type="file"] {
}

.project {
flex: 0 0 calc(100% - 20px);
max-width: calc(100% - 20px);
flex: 0 0 calc(50% - 40px);
max-width: calc(50% - 40px);
}
}

@media screen and (max-width: 600px){
.project{
margin: 20px 0;
max-width: calc(100% - 50px);
}
}

Expand All @@ -856,13 +877,16 @@ input[type="file"] {
display: flex;
margin: 10px;
margin-left: 0;
padding: 8px 16px;
padding: 12px 20px;
background-color: #3498db;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.project button:hover {
Expand All @@ -879,11 +903,12 @@ input[type="file"] {
flex-wrap: wrap;
}
@media screen and (max-width: 600px) {
.project .button {
.project button {
width: 100%;
margin: 5px 0;
}
}

/* Scroll-up Button */
.scroll-up-btn {
position: fixed;
Expand Down Expand Up @@ -994,83 +1019,7 @@ details:has(input:checked) label::before {
transition: rotate 200ms ease-out;
}

.about-me,
.projects {
background-color: #f4f4f4;
padding: 40px 0;
}
.box {
display: flex;
}

#projects {
padding: 40px 0;
background-color: #f4f4f4;
}

.project {
overflow: hidden;
background-color: #fff;
padding: 20px;
margin: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 800px;
transition: transform 0.5s ease-in-out;
}

.project:hover {
transform: scale(1.08);
background-color: #f6f6f6;
}

@media screen and (max-width: 918px) {
.box {
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
}

.project {
flex: 0 0 calc(100% - 20px);
max-width: calc(100% - 20px);
}
}

.project h3 {
font-family: "Barlow Condensed", sans-serif;
font-size: larger;
margin-top: 0;
}

.project p {
margin-bottom: 10px;
}

.project button {
display: block;
margin: 10px;
margin-left: 0;
padding: 8px 16px;
background-color: #3498db;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.project button:hover {
background-color: #2980b9;
}
.project button a {
text-decoration: none;
color: #fff;
}
.project .buttons {
display: flex;
flex-wrap: wrap;
}

.scroll-up-btn {
position: fixed;
Expand Down

0 comments on commit 294b04d

Please sign in to comment.