Skip to content

Commit

Permalink
changes in Landing and About section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sranjan0208
Sranjan0208 committed Feb 16, 2023
1 parent cb0bbf2 commit c55fec4
Show file tree
Hide file tree
Showing 4 changed files with 251 additions and 200 deletions.
175 changes: 101 additions & 74 deletions src/Components/About/About.css
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,52 @@
.about-container{
width: 100%;
background-color: #041414;
overflow-x: hidden;
position: relative;
min-height: 100vh;
.about-container {
width: 100%;
background-color: #041414;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}

.about-title{
color: #a2c2b5;
text-align: center;
font-size: 3.5rem;
font-weight: 800;
padding-top: 2rem;
margin-bottom: 4rem;
text-transform: uppercase;
background: linear-gradient(to right, #a0c6b7 20%, #49675b 40%, #729084 60%, #a0c6b7 80%);
background-size: 200% auto;

color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.about-title {
color: #a2c2b5;
text-align: center;
font-size: 3.5rem;
font-weight: 800;
padding-top: 2rem;
margin-bottom: 4rem;
text-transform: uppercase;
background: linear-gradient(
to right,
#a0c6b7 20%,
#49675b 40%,
#729084 60%,
#a0c6b7 80%
);
background-size: 200% auto;

animation: shine 1.8s linear infinite;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: shine 1.8s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
to {
background-position: 200% center;
}
.about-div{
overflow: hidden;
padding: 1rem;
}
.about-box1{
display: inline-block;
width: 50%;
color: #a2c2b5;
padding: 2rem;
overflow: hidden;
vertical-align: top;

.about-div {
overflow: hidden;
padding: 1rem;
}
.about-box1 {
display: inline-block;
width: 50%;
color: #a2c2b5;
padding: 2rem;
overflow: hidden;
vertical-align: top;
}

/* .about-box2{
Expand All @@ -53,47 +57,70 @@ animation: shine 1.8s linear infinite;
overflow: hidden; */
/* } */

.about-title2{
color: #a2c2b5;
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 1rem;
position: relative;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
.about-title2 {
color: #a2c2b5;
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 1rem;
position: relative;
text-align: center;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.about-gif1 {
width: 60%;
margin-top: 3rem;
margin-left: 50%;
transform: translateX(-50%);
opacity: 0.2;
width: 20vw;
position: absolute;
top: 30vh;
left: -22vw;
}

.about-gif1{
width: 60%;
margin-top: 3rem;
margin-left: 50%;
transform: translateX(-50%);
opacity: 0.2;
width: 20vw;
position: absolute;
top: 30vh;
left: -22vw;
.about-gif2 {
width: 60%;
margin-top: 3rem;
margin-left: 50%;
transform: translateX(-50%);
opacity: 0.2;
width: 20vw;
position: absolute;
top: 32vh;
right: 5vw;
}

.about-gif2{
width: 60%;
margin-top: 3rem;
margin-left: 50%;
transform: translateX(-50%);
opacity: 0.2;
width: 20vw;
position: absolute;
top: 32vh;
right: 5vw;
.about-content {
line-height: 180%;
font-size: 1.2rem;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 70%;
margin-left: 15%;
text-align: center;
font-weight: 500;
}

.about-content{
line-height: 180%;
font-size: 1.2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 70%;
margin-left: 15%;
text-align: center;
font-weight: 500;
}
@media (max-width: 500px) {
.about-box1 {
display: flex;
flex-direction: column;
width: 100%;
}

.text-box {
position: relative;
}

.about-gif1 {
position: absolute;
margin-top: -11rem;
margin-left: 80%;
}

.about-gif2 {
position: absolute;
margin-top: -11rem;
right: 21vw;
}
}
35 changes: 20 additions & 15 deletions src/Components/About/About.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,33 @@ import mission from "../../assets/mission.gif";
export default function About() {
return (
<div className="about-container" id="about">
<img src={vision} className="about-gif1" />
<img src={mission} className="about-gif2" />

<div className="about-title">About Us</div>
<div className="about-box1">
<div className="about-title2">VISION</div>
<div className="vision text-box">
<div className="about-title2">VISION</div>
<img src={vision} className="about-gif1" />

<div className="about-content">
The vision of moss is to Spread awarness about open source amongst students
by conducting workshops and events which will help in building a large community
and finding the exact target audience who might take this open source society
upto a next level and we hope that a lot of one’s get benifitted by this in future.
<div className="about-content">
The vision of moss is to Spread awarness about open source amongst
students by conducting workshops and events which will help in
building a large community and finding the exact target audience who
might take this open source society upto a next level and we hope
that a lot of one’s get benifitted by this in future.
</div>
</div>
</div>

<div className="about-box1">
<div className="about-title2">MISSION</div>
<div className="about-content">
Moss's Mission is to spread awareness and information about the open
source society. The promise of open source society, is higher quality,
better reliability, greater flexibility, lower cost. Also developing
and contributing to the amazing field of open source.
<div className="mission text-box">
<div className="about-title2">MISSION</div>
<img src={mission} className="about-gif2" />

<div className="about-content">
Moss's Mission is to spread awareness and information about the open
source society. The promise of open source society, is higher
quality, better reliability, greater flexibility, lower cost. Also
developing and contributing to the amazing field of open source.
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c55fec4

Please sign in to comment.