Skip to content

Commit

Permalink
Merge pull request #287 from undp/ebf
Browse files Browse the repository at this point in the history 
Home page content changes
  • Loading branch information
@zungundp
zungundp authored Feb 3, 2025
2 parents c60484d + 5bf1e18 commit b802916
Show file tree
Hide file tree
Showing 5 changed files with 711 additions and 103 deletions.
149 changes: 111 additions & 38 deletions web/src/Pages/Homepage/homepage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@import '../../Assets/Fonts/fonts.scss';
@import '../../Styles/variables.scss';

$max-pagewidth: 1600px;
$title-color: #3a8ab5;

.homepage-container {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: $background-color;
background-color: $outside-background-color;
scroll-behavior: smooth;

.homepage-header-container {
Expand Down Expand Up @@ -95,8 +99,8 @@
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0.3) 10%,
rgba(22, 177, 255, 0.4) 40%),
image-set('../../Assets/Images/factory.png'type('image/png'),
'../../Assets/Images/factory.webp'type('image/webp'));
image-set('../../Assets/Images/factory.png' type('image/png'),
'../../Assets/Images/factory.webp' type('image/webp'));
background-size: cover;
}

Expand Down Expand Up @@ -198,7 +202,7 @@
}

.text-ctn {
margin-left: 2vw;
margin-left: 5vw;
bottom: 50px;
font-family: $secondary-font-family;
font-size: 4rem;
Expand Down Expand Up @@ -265,42 +269,46 @@
height: fit-content;
padding: 10px 60px 10px 60px;
text-align: center;
margin-top: 5px;
margin: 5px auto;
max-width: $max-pagewidth;

@media (max-width: $lg-size) {
height: fit-content;
margin-top: 35px;
}

@media (max-width: 536px) {
padding: 10px 0 10px 0;
}

.title {
font-size: 2rem;
font-size: 28px;
font-weight: 700;
font-family: $primary-font-family;
color: $title-text-color;
text-align: center;
color: $title-color;
text-align: start;
justify-content: center;
text-transform: uppercase;
padding: 50px 50px 10px 50px;
padding: 50px 50px 0px 50px;

@media (max-width: $lg-size) {
font-size: 2rem;
margin-top: 1rem;
font-size: 24px;
margin-top: 0rem;
padding-top: 15px;
color: $title-text-color;
line-height: 1.5em;
}
}

.homepagebody {
text-align: center;
text-align: start;
font-size: 0.875rem;
font-weight: 400;
font-family: $primary-font-family;
color: $title-text-color;
justify-content: center;
margin: 20px 60px 20px 60px;
margin: 20px 50px;

@media (max-width: $lg-size) {
font-size: 0.8rem;
Expand All @@ -309,20 +317,29 @@
line-height: 1.5em;
}

.homepagebody_aboutusline1 {
.homepagebody_text {
font-size: 1.125rem;
margin-top: 1rem;
color: $title-text-color;
margin-bottom: 10px;

&.list {
li {
margin: 10px 0px;
}

@media screen and (max-width: 767px) {
padding-left: 20px;
}
}

@media (max-width: $lg-size) {
font-size: 1rem;
margin-top: 1rem;
color: $title-text-color;
line-height: 1.5em;
}

@media (max-width: 1200px) {
margin-top: 3rem;
margin-top: 1rem;
}
}

Expand Down Expand Up @@ -355,39 +372,39 @@
font-weight: 700;
font-family: $primary-font-family;
color: $title-text-color;
text-align: center;
text-align: start;
justify-content: center;
margin-top: 2rem;
}
}

.aboutus-card-main-container {
display: flex;
height: 26rem;
height: 23rem;
min-height: 20rem;
max-width: 26rem;
justify-content: center;
background: linear-gradient(to right, $gradient-background-start, $gradient-background-end);
border-radius: 0.625rem;
padding: 40px 25px 25px 25px;
margin: 60px 40px 60px 40px;
padding: 50px 25px 25px 25px;
margin: 10px;
text-align: center;

@media (max-width: 1350px) {
height: 28rem;
height: 23rem;
max-width: 18rem;
padding: 30px 5px 25px 5px;
padding: 50px 5px 25px 5px;
}

@media (max-width: 1050px) {
max-width: 18rem;
padding: 30px 5px 25px 5px;
padding: 50px 5px 25px 5px;
}

@media (max-width: 986px) {
height: 28rem;
height: 21rem;
max-width: 18rem;
padding: 30px 5px 25px 5px;
padding: 50px 5px 25px 5px;
}

@media (max-width: 764px) {
Expand All @@ -396,7 +413,7 @@

@media (max-width: 536px) {
padding: 40px 5px 25px 5px;
margin: 60px 0 60px 0;
margin: 30px 0;
}
}

Expand Down Expand Up @@ -439,10 +456,13 @@

.aboutus-card-text {
color: $dark-text-color;
line-height: 2;
font-size: 15px;
line-height: 24px;
// text-align: justify;
}

.aboutus-card-title {
font-size: 18px;
font-weight: 700;
display: flex;
color: $dark-text-color;
Expand All @@ -456,6 +476,12 @@
.undplogocontainer {
padding-top: 40px;

.gutter-row {
display: flex;
align-items: center;
justify-content: center;
}

.align-to-end {
@media (max-width: 767px) {
display: flex;
Expand All @@ -475,19 +501,22 @@
}

.erbd {
width: 14.5rem;
width: 15.7rem;
// margin-top: 5px;
}

.undp {
width: 4rem;
// margin-left: 20px;
}

.unfccc {
width: 7.5rem;
margin-top: 22px;
width: 6.5rem;
}

.ieta {
width: 14.5rem;
width: 14.8rem;

@media (max-width: 876px) {
width: 12rem;
Expand All @@ -503,7 +532,8 @@
}

.esa {
width: 14.5rem;
width: 15rem;
// margin-top: -5px;

@media (max-width: 876px) {
width: 11rem;
Expand All @@ -519,7 +549,8 @@
}

.wbank {
width: 7.5rem;
width: 9rem;
margin-top: -12px;
}
}
}
Expand All @@ -534,7 +565,8 @@

.homepage-image-content-container {
background-color: $outside-background-color;
margin-top: 5px;
margin: 5px auto;
max-width: $max-pagewidth;

@media (max-width: 767px) {
padding-left: 0;
Expand All @@ -550,15 +582,16 @@
}

ul {
margin-top: 20px;
margin-bottom: 20px;
margin-top: 5px;
margin-bottom: 10px;
}

li {
line-height: 40px;
line-height: 25px;
margin-bottom: 10px;

@media (max-width: 536px) {
line-height: 30px;
line-height: 20px;
}
}

Expand All @@ -567,15 +600,17 @@
font-weight: 700;
font-family: $primary-font-family;
color: $title-text-color;
color: $title-color;
text-align: left;
justify-content: left;
text-transform: uppercase;
margin-left: 4.5rem;
padding: 50px 50px 10px 0;

@media (max-width: $lg-size) {
font-size: 2rem;
margin-top: 1rem;
font-size: 24px;
margin-top: 0rem;
padding-top: 15px;
color: $title-text-color;
line-height: 1.5em;
}
Expand All @@ -597,6 +632,44 @@
justify-content: left;
margin: 20px 10px 20px 75px;

.homepage_accordian {
border-radius: 5px;
font-family: "Inter";
margin-bottom: 80px;

.homepage_collapsepanel {
border-radius: 5px !important;

.ant-collapse-header-text {
font-size: 18px;
font-weight: 700;
color: rgba(58, 53, 65, 0.8);
}

.collapsetext {
font-size: 16px;
padding: 0px 20px;
margin-bottom: 10px;
}
}

@media (max-width: $lg-size) {
.ant-collapse-header-text {
font-size: 16px;
}

.collapsetext {
font-size: 14px;

li {
strong {
margin-bottom: 5px;
}
}
}
}
}

@media (max-width: $lg-size) {
font-size: 0.8rem;
margin-top: 1rem;
Expand Down
Loading

0 comments on commit b802916

Please sign in to comment.