Skip to content

Commit

Permalink
Merge pull request OSCode-Community#1028 from Suniti-0020/master
Browse files Browse the repository at this point in the history 
Improved UI of Chapters page
  • Loading branch information
@Vaishnavi-Patil2211
Vaishnavi-Patil2211 authored Jul 17, 2023
2 parents d3df8fc + 23dc7c6 commit cd2e65e
Show file tree
Hide file tree
Showing 3 changed files with 648 additions and 395 deletions.
309 changes: 195 additions & 114 deletions assets/css/chapter.css
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,133 @@
#hero {
background-image: linear-gradient(rgba(4, 9, 30, 0.5), rgba(4, 9, 30, 0.2)),
url("/assets/img/background/peopleImg.jpg");
padding: 0;
height: 400px;
padding-top: 100px;
padding-bottom: 50px;
justify-content: center;
/* margin-top: 5.4%; */
background-image: linear-gradient(rgba(4, 9, 30, 0.5), rgba(4, 9, 30, 0.2)),
url("/assets/img/background/peopleImg.jpg");
padding: 0;
height: 400px;
padding-top: 100px;
padding-bottom: 50px;
justify-content: center;
/* margin-top: 5.4%; */
}

#about {
background-image: url("/assets/img/background/s3.png");
background-image: url("/assets/img/background/s3.png");
background-size: cover;
}

.row {
margin-top: 20px;
margin-top: 20px;
}

.hidden {
opacity: 0;
transform: scale(0.2);
transition: all 1s ease-in-out;
}

.show {
opacity: 1;
transform: scale(1);
animation: slide 1.5s ease-in-out;
}

@keyframes slide {
0% {
transform: translateX(-100%);
opacity: 0;
}

50% {
opacity: 0.25;
}

100% {
transform: translateX(0);
opacity: 1;
}
}

.us {
margin: 0;
padding: 0;
text-transform: uppercase;
position: relative;
color: #c8c3d1;
}
.us:before {
content: "College_Chapters";
position: absolute;
color: #262626;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
transition: all 01s;
}
.us:hover:before {
width: 100%;
}

@media only screen and (max-width: 800px) {
.us {
word-break: break-all;
}
.us:before {
width: 100%;
transition: none;
}
.us:hover:before {
width: 0;
}
margin: 0;
padding: 0;
text-transform: uppercase;
position: relative;
color: #3a1383;
text-align: center;
align-items: center;
}

/* .us:before {
content: "College Chapters";
position: absolute;
color: #262626;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
transition: all 01s;
} */

/* .us:hover:before {
width: 100%;
} */

/* @media only screen and (max-width: 800px) {
.us {
word-break: break-all;
}
.us:before {
width: 100%;
transition: none;
}
.us:hover:before {
width: 0;
}
} */

#faq {
background-image: none;
/* margin-left: 50px; */
background-image: none;
/* margin-left: 50px; */
}

.text-clg {
margin-left: 60px;
margin-left: 60px;
}

.faq .faq-list a {
font-weight: bold;
color: #000;
font-size: 25px;

background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
font-weight: bold;
color: #000;
font-size: 25px;

background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
}

.faq .faq-list a:before {
content: "";
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
content: "";
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
}

.faq .faq-list a:hover {
background-position: 0;
/* font-size:28px; */
background-position: 0;
/* font-size:28px; */
}

/* #search-bar {
padding: 10px;
font-size: 16px;
Expand All @@ -96,82 +137,82 @@
} */

.input {
width: 250px;
padding: 10px 0px 10px 40px;
border-radius: 9999px;
border: solid 1px #333;
background-image: url("/assets/img/search.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 3% 50%;
background-color: white;
outline: none;
opacity: 0.8;
transition: all 0.2s ease-in-out;
width: 250px;
padding: 10px 0px 10px 40px;
border-radius: 9999px;
border: solid 1px #333;
background-image: url("/assets/img/search.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 3% 50%;
background-color: white;
outline: none;
opacity: 0.8;
transition: all 0.2s ease-in-out;
}

.input:focus {
opacity: 0.9;
width: 350px;
opacity: 0.9;
width: 350px;
}

#results.input:focus {
display: none;
display: none;
}

#results {
list-style-type: none;
padding: 0;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 193px;
overflow-y: auto;
max-width: 400px;
margin-left: 230px;
list-style-type: none;
padding: 0;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 193px;
overflow-y: auto;
max-width: 400px;
margin-left: 230px;
}

#results li {
padding: 10px;
cursor: pointer;
padding: 10px;
cursor: pointer;

background-color: #eee;
transition: background-color 0.2s;
background-color: #eee;
transition: background-color 0.2s;

backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}

a,
a:hover {
color: #8919e4;
color: #8919e4;
}

#results li:hover {
background-color: #9b999c;
font-weight: bolder;
background-color: #9b999c;
font-weight: bolder;
}

#results li.active {
background-color: #78a4f1;
background-color: #78a4f1;
}

#results li a {
color: #333;
font-size: 16px;
font-weight: bold;
color: #333;
font-size: 16px;
font-weight: bold;
}

#results li a:hover {
color: #eee;
color: #eee;
}

#results::-webkit-scrollbar-track {
background-color: rgba(204, 204, 204, 0.4);
backdrop-filter: blur(4px);
background-color: rgba(204, 204, 204, 0.4);
backdrop-filter: blur(4px);
}

#results::-webkit-scrollbar-thumb {
background-color: rgba(131, 128, 128, 0.7);
background-color: rgba(131, 128, 128, 0.7);
}

/* input {
Expand All @@ -185,7 +226,7 @@ a:hover {
} */

@media screen and (max-width: 600px) {
/* input {
/* input {
width: 250px;
height: 30px;
}
Expand All @@ -195,9 +236,49 @@ a:hover {
width: 30px;
} */

#results {
margin-left: 10px;
max-width: 350px;
max-height: 200px;
}
#results {
margin-left: 10px;
max-width: 350px;
max-height: 200px;
}
}

body {
font-family: Varela Round, sans-serif;
padding: 0;
text-align: center;
}

.education .school {
text-align: left;
padding: 5% 12%;
box-sizing: border-box;
}

.education .school .card-title {
color: rgb(35, 35, 119);
font-weight: bold;
font-size: 25px;
box-sizing: border-box;
text-align: left;


}

#image-for-card {
width: 100%;
height: 100%;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

.img-fluid {
width: 100%;
height: 180px;
box-sizing: border-box;
}

.row {
position: relative;
justify-content: center;
}
Binary file modified assets/img/background/s3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit cd2e65e

Please sign in to comment.