<style>
/* Slider */
body{
height: 100%;
margin: 0;
padding: 0;
}
.wrapper{
width: 100%;
max-width: none;
padding: 0;
margin: 0 auto;
}
/* Hero Banner */
#slider{
position: absolute;
z-index: -1;
min-width: 100vw;
height: 100vh;
margin: 0 0;
top: 0%;
background-color: black;
}
.bgSlides{
height: 100vh;
width: 100vw;
object-fit: cover;
margin: 0 auto;
text-align: center;
padding: 0;
}
.w3-animate-fading{
animation:fading 10s infinite
}
@keyframes fading
{0%{opacity:0}5%{opacity:1}95%{opacity:1}100%{opacity:0}
}
.wrapped-caption{
position: absolute;
float: left;
left: inherit;
max-width: inherit;
top: -70%;
margin-left: 10vw;
}
.hero-caption{
font-size: 4vmax;
color: white;
font-weight: 400;
line-height: 5vmax;
float:left;
margin-top: 20px;
}
.hero-copywriting {
font-size: 25px;
color: white;
font-weight: 400;
float: left;
margin-top: 20px;
line-height: 2.3vmax;
width: 80%;
}
.hero-highlight{
font-size: 4vmax;
line-height: 5vmax;
color: white;
font-weight: 700;
float:left;
top: 50%;
}
/* Button Contact Now */
.btn-contact a{
z-index: 1;
float: left;
left: inherit;
margin-left: 10vw;
margin-top: 420px;
padding: 10px 20px;
border-radius: 30px;
color: white;
background-color: #18bd57;
font-size: 25px;
font-weight: 700;
}
/* Button for Choosing Slider */
.btn-holder-container {
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn-holder{
width: 30%;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
float: left;
left: 0;
right: 0;
position: absolute;
top: 85vh;
text-align: center;
}
.w3-badge{
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
background-color: white;
opacity: 70%;
text-align: center;
margin: 0 auto;
font-size: 15px;
line-height: 28px;
color: gray;
}
@media only screen and (max-width: 500px) {
.wrapped-caption{
top: -82%;
}
.hero-caption {
font-size: 30px;
line-height: 35px;
font-weight: 400;
width: 80%;
margin: 0 auto;
}
.hero-highlight {
font-size: 30px;
line-height: 35px;
font-weight: 700;
width: 80%;
margin: 0 auto;
}
.hero-copywriting {
font-size: 18px;
line-height: 20px;
width: 80%;
margin: 20px auto;
}
.btn-contact a{
margin-top: 400px;
font-size: 20px;
}
.btn-holder{
width: 50%;
}
.w3-badge{
width: 30px;
height: 30px;
}
}
@media only screen and (max-width: 1025px) and (min-width: 799px) {
.hero-caption {
font-size: 35px;
line-height: 40px;
font-weight: 400;
width: 85%;
margin: 0 auto;
}
.hero-highlight {
font-size: 35px;
line-height: 40px;
font-weight: 700;
width: 85%;
margin: 0 auto;
}
.hero-copywriting {
font-size: 18px;
line-height: 25px;
width: 85%;
margin: 20px auto;
}
.btn-contact a{
margin-top: 600px;
font-size: 25px;
}
.hero-copywriting {
font-size: 25px;
}
}
@media only screen and (min-width: 1919px) {
.btn-contact a{
margin-top: 600px;
font-size: 25px;
}
.hero-copywriting {
font-size: 25px;
}
}
@media only screen and (min-width: 3839px) {
.btn-contact a{
margin-top: 1200px;
font-size: 50px;
padding: 50px;
border-radius: 80px;
}
.hero-copywriting {
font-size: 45px;
}
</style>
<body>
Dare to say your company have
100% sustainable processes?
Center for Sustainability and Waste Management Universitas Indonesia is
working with you to find the best solution for sustainability and
waste management
Dare to say your company is using
100% sustainable materials?
Center for Sustainability and Waste Management Universitas Indonesia is
working with you to find the best solution for sustainability and
waste management
Dare to say your company is implementing
circular economy?
Center for Sustainability and Waste Management Universitas Indonesia is
working with you to find the best solution for sustainability and
waste management
Dare to say your company is using
100% renewable energy?
Center for Sustainability and Waste Management Universitas Indonesia is
working with you to find the best solution for sustainability and
waste management
Dare to say your company have
the suitable CSR?
Center for Sustainability and Waste Management is
working with you to find the best solution for sustainability and
waste management
[removed]
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1;
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 10000); // Change image every 5 seconds
}
[removed]
[removed]
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs((slideIndex += n));
}
function currentDiv(n) {
showDivs((slideIndex = n));
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
}
[removed]
</body>
<style>
.today {
position: relative;
width: 60%;
font-size: 2.5vmax;
line-height: 3vmax;
margin-top: 700px;
text-align: left;
margin-left:auto;
margin-right:auto;
background-color: white;
padding: 0;
}
.affiliation {
margin: 25px auto;
font-size: 1.5vmax;
line-height: 2.1vmax;
width: 60%;
text-align: left;
}
.synergy {
margin: 25px auto;
width: 60%;
font-size: 1.5vmax;
font-weight: 700;
text-align: left;
}
.btn-about-cswm {
width: 60%;
margin: 0 auto;
}
.btn-about-cswm a{
margin: 40px auto;
padding: 10px 20px;
border-radius: 30px;
color: white;
background-color: #1364b2;
font-size: 1.5vmax;
font-weight: 700;
float: left;
text-decoration: none;
}
@media screen and (max-width: 500px) {
.today {
margin-top: 210%;
width: 80%;
}
.affiliation {
font-size: 16px;
line-height: 22px;
width: 80%;
}
.synergy {
width: 80%;
font-size: 16px;
}
.btn-about-cswm {
width: 80%;
}
.btn-about-cswm a{
font-size: 16px;
}
}
@media screen and (max-width: 830px) and (min-width: 799px) {
.today {
margin-top: 1100px;
}
}
@media screen and (max-width: 1025px) and (min-width: 831px) {
.today {
margin-top: 1300px;
}
}
@media screen and (min-width: 1919px) {
.today {
margin-top: 1050px;
}
}
@media screen and (min-width: 3839px) {
.today {
margin-top: 2150px;
}
}
</style>
Today's landscape has been more complex and interconnected. Imagine tomorrow's.
Under the affiliation of
Universitas Indonesia, CSWM UI comprises an expert board from
multidisciplinary fields that enables us to approach
sustainabilities and waste management issues effectively from various
perspectives.
We promote sustainability, waste management, and the circular economy
via creative research and development, education,and engagement with
business, government, and community partners.
Building Synergy, Inspiring Indonesia.
<style>
/* Pilar */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.outer-container2 {
display: flex;
z-index: -999;
flex-flow: row wrap;
padding: 0;
margin-top: 0px;
background: #1BA253;
height: auto;
text-align: center;
width: 100%;
}
.inner-column {
padding-top: 30px;
width: 20%;
height: 350px;
color: white;
text-align: center;
margin: 0 auto;
}
.inner-column p {
width: 75%;
margin: 30px auto;
font-size: 15px;
line-height: 20px;
}
.letter {
font-size: 36pt;
margin-top: 20px;
}
.explanation {
font-weight: 700;
font-size: 20pt;
margin-top: 30px;
}
@media screen and (max-width: 1000px) {
.outer-container2 {
top: 35vh;
flex-flow: column wrap;
}
.inner-column {
width: 100%;
height: auto;
}
}
</style>
P
Partnership
We believe in fostering collaborative relationships to amplify our
impact and drive positive change in sustainability and waste
management.
I
Inspiration
We aim to ignite a sense of purpose and motivation, spurring
individuals and communities to embrace sustainable practices and
advocate for a greener future.
L
Learning
Continuous education and awareness-building are at the core of our
approach, empowering people with the knowledge to make informed
decisions for sustainable living.
A
Action
We are committed to translating ideas and intentions into concrete
actions that make a tangible difference in promoting environmental
responsibility and waste reduction.
R
Resilience
In the face of challenges and setbacks, we strive to adapt, endure,
and thrive, ensuring our efforts contribute to lasting and impactful
sustainability solutions.
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.outer-partner-cont {
width: 100%;
}
.partner-container {
width: 80%;
display: flex;
flex-flow: row wrap;
margin: 0 auto;
height: 220px;
padding: 0;
}
.partner-left {
width: 50%;
font-size: 45px;
line-height: 50px;
font-weight: 700;
text-align: right;
margin: auto auto;
color: #1364b2;
}
.partner-right {
width: 50%;
font-size: 18px;
text-align: left;
margin: auto auto;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 20px;
padding-right: 100px;
color: #15907c;
}
@media screen and (max-width: 700px) {
.partner-container {
flex-flow: column;
height: auto;
}
.partner-left {
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 40px;
padding-bottom: 30px;
}
.partner-right {
width: 90%;
text-align: center;
font-size: 15px;
padding-top: 0;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 40px;
}
}
</style>
Partner with us.
We collaborate with government, communities, NGO, change-makers, and leading researchers to move towards sustainable future and waste management.
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font: 16px/1.3;
font-family: 'Plus Jakarta Sans';
}
/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/
.CSSgal {
overflow: hidden;
height: 630px;
padding: 0;
position: relative;
/* Or set a fixed height */
}
/* SLIDER */
.CSSgal .slider {
height: 100%;
white-space: nowrap;
font-size: 0;
transition: 0.8s;
}
/* SLIDES */
.CSSgal .slider>* {
font-size: 1rem;
display: inline-block;
white-space: normal;
vertical-align: top;
height: 100%;
width: 100%;
background: none 50% no-repeat;
background-size: cover;
}
/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgal .prevNext {
position: absolute;
top: 50%;
z-index: 1;
width: 100%;
height: 0;
margin: 0 auto;
}
.CSSgal .prevNext>div+div {
visibility: hidden;
/* Hide all but first P/N container */
}
.CSSgal .prevNext a {
background: #fff;
position: absolute;
width: 50px;
height: 50px;
line-height: 60px;
/* If you want to place numbers */
text-align: center;
opacity: 0.7;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.CSSgal .prevNext a:hover {
opacity: 1;
}
.CSSgal .prevNext a+a {
left: auto;
right: 0;
}
/* NAVIGATION */
.CSSgal .bullets {
position: absolute;
z-index: 2;
bottom: 50px;
padding: 10px 0;
width: 100%;
text-align: center;
}
.CSSgal .bullets>a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-decoration: none;
text-align: center;
background: rgba(255, 255, 255, 1);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.CSSgal .bullets>a+a {
background: rgba(255, 255, 255, 0.5);
/* Dim all but first */
}
.CSSgal .bullets>a:hover {
background: rgba(255, 255, 255, 0.7) !important;
}
/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal>s:target~.bullets>* {
background: rgba(255, 255, 255, 0.5);
}
/* ACTIVE */
#s1:target~.bullets>*:nth-child(1) {
background: #1aa353;
}
#s2:target~.bullets>*:nth-child(2) {
background: #1aa353;
}
#s3:target~.bullets>*:nth-child(3) {
background: #1aa353;
}
#s4:target~.bullets>*:nth-child(4) {
background: rgba(255, 255, 255, 1);
}
/* More slides? Add here more rules */
/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal>s:target~.prevNext>* {
visibility: hidden;
}
/* ACTIVE: */
#s1:target~.prevNext>*:nth-child(1) {
visibility: visible;
}
#s2:target~.prevNext>*:nth-child(2) {
visibility: visible;
}
#s3:target~.prevNext>*:nth-child(3) {
visibility: visible;
}
#s4:target~.prevNext>*:nth-child(4) {
visibility: visible;
}
/* More slides? Add here more rules */
/* SLIDER ANIMATION POSITIONS */
#s1:target~.slider {
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
#s2:target~.slider {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
#s3:target~.slider {
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
}
#s4:target~.slider {
transform: translateX(-300%);
-webkit-transform: translateX(-300%);
}
/* More slides? Add here more rules */
/* YOU'RE THE DESIGNER!
____________________
All above was mainly to get it working :)
CSSgal CUSTOM STYLES / OVERRIDES HERE: */
.CSSgal {
color: #fff;
text-align: center;
}
.CSSgal .slider h2 {
margin-top: 40vh;
font-weight: 200;
letter-spacing: -0.06em;
word-spacing: 0.2em;
font-size: 3em;
}
.CSSgal a {
border-radius: 50%;
margin: 0 3px;
color: rgba(0, 0, 0, 0.8);
text-decoration: none;
}
.slider-box {
background-color: white;
opacity: 80%;
width: 30%;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 40px;
border-radius: 20px;
text-align: left;
margin-left: 30vh;
margin-top: 10vh;
height: auto;
}
.slider-box h1 {
color:#15907c;
font-family: 'Plus Jakarta Sans';
font-size: 35px;
padding-top: 10px;
margin-bottom: 10px;
}
.slider-box p {
color: black;
padding: 0;
margin-top: 0;
margin-bottom: 20px;
}
.slider-box a {
padding: 5px 15px;
background-color: #1aa353;
border-radius: 20px;
color: white;
margin-bottom: 30px;
}
@media screen and (max-width: 700px){
.slider-box {
width: 65%;
margin-left: 5vh;
margin-top: 8vh;
}
.slider-box h1 {
font-size: 25px;
padding-top: 10px;
margin-bottom: 10px;
}
.slider-box p {
color: black;
padding: 0;
margin-top: 0;
margin-bottom: 20px;
font-size: 15px;
}
}
</style>
<!-- Don't wrap targets in parent -->
Studies
CSWM UI provides a range of research and studies focused on
sustainable systems, waste management, feasibility, material flow
analysis and other aspects of your needs.
See more
Consultancies
CSWM UI provides tailored engineering, economic and social guidance
to help organization reaching their 3P (Profit, People, Planet)
goals.
See more
Education
CSWM UI experts in designing education services to provide certified
training, campaign to increase awareness, and promote behavior
changes.
See more
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.featured{
width: 60%;
text-align: justify;
margin: 30px auto;
font-size: 36pt;
line-height: 36pt;
font-weight: 700;
}
@media screen and (max-width: 700px) {
.featured{
width: 80%;
text-align: justify;
margin: 20px auto;
font-size: 25pt;
line-height: 30pt;
font-weight: 700;
}
}
</style>
Featured Reads
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.news{
width: 60%;
text-align: justify;
margin: 40px auto;
font-size: 30pt;
font-weight: 500;
}
@media screen and (max-width: 1000px) {
.news{
width: 80%;
text-align: justify;
margin: 10px auto;
font-size: 20pt;
font-weight: 500;
}
}
</style>
News
<style>
.news-feat{
width: 60%;
display: flex;
flex-flow: row;
margin: 40px auto;
}
.news-excerpt {
width: 50%;
text-align: left;
}
.news-excerpt h1 {
color: #15907c;
font-size: 20px;
width: 80%;
}
.news-excerpt p {
font-size: 16px;
width: 90%;
}
.news-excerpt a {
color: #15907c;
}
.news-feat-image{
width: 50%;
text-align: left;
margin: auto;
max-height: 240px;
object-fit: contain;
overflow: hidden;
}
.news-feat-image img{
border-radius: 0px;
}
@media screen and (max-width: 700px) {
.news-feat{
width: 80%;
flex-flow: column;
margin: 30px auto;
}
.news-excerpt {
width: 100%;
text-align: left;
}
.news-excerpt h1 {
font-size: 16px;
width: 100%;
}
.news-excerpt p {
font-size: 14px;
width: 100%;
}
.news-feat-image{
width: 100%;
text-align: left;
margin: auto;
}
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.reads{
width: 60%;
text-align: justify;
margin: 40px auto;
font-size: 30pt;
font-weight: 500;
}
@media screen and (max-width: 1000px) {
.reads{
width: 80%;
text-align: justify;
margin: 10px auto;
font-size: 20pt;
font-weight: 500;
}
}
</style>
Reads
<style>
.reads-feat{
width: 60%;
display: flex;
flex-flow: row;
margin: 40px auto;
}
.reads-excerpt {
width: 50%;
text-align: left;
}
.reads-excerpt h1 {
color: #15907c;
font-size: 20px;
width: 80%;
}
.reads-excerpt p {
font-size: 16px;
width: 90%;
}
.reads-excerpt a {
color: #15907c;
}
.reads-feat-image{
width: 50%;
text-align: left;
margin: 0 auto;
max-height: 240px;
object-fit: contain;
overflow: hidden;
}
.reads-feat-image img{
border-radius: 0px;
}
@media screen and (max-width: 700px) {
.reads-feat{
width: 80%;
flex-flow: column;
margin: 30px auto;
}
.reads-excerpt {
width: 100%;
text-align: left;
}
.reads-excerpt h1 {
font-size: 16px;
width: 100%;
}
.reads-excerpt p {
font-size: 14px;
width: 100%;
}
.reads-feat-image{
width: 100%;
text-align: left;
margin: auto;
}
}
</style>
Design, Duplication, Delivery: The Fast Fashion Lifecycle
Fast Fashion industries have not only transformed the fashion business but also significantly affecting the way we shop, dress, and perceive clothing. These industries contribute to carbon emissions because once the garments are manufactured, they need to be transported to the brand’s distribution centers and stores around the world. Read more
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.publication{
width: 60%;
text-align: justify;
margin: 40px auto;
font-size: 30pt;
font-weight: 500;
}
@media screen and (max-width: 1000px) {
.publication{
width: 80%;
text-align: justify;
margin: 10px auto;
font-size: 20pt;
font-weight: 500;
}
}
</style>
<!--
Publications
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');
.collaborate-container {
background-image: url('https://i.ibb.co/9ghy146/image.png');
background-size: cover;
min-height: 340px;
z-index: 999;
}
.collaborate h1{
font-family: 'Plus Jakarta Sans';
color: white;
width: 100%;
text-align: left;
padding-top: 100px;
margin-left: 20vw;
font-size: 50px;
line-height: 60px;
font-weight: 700;
}
.collaborate a{
background-color: #1364b2;
margin-left: 20vw;
padding: 5px 20px;
border-radius: 50px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: 700;
float: left;
text-decoration: none;
}
@media screen and (max-width: 700px) {
.collaborate-container{
top: 85vh;
}
.collaborate {
width: 80%;
margin: auto;
}
.collaborate h1{
width: 100%;
text-align: left;
padding-top: 80px;
margin-left: auto;
font-size: 45px;
line-height: 55px;
font-weight: 700;
}
.collaborate a{
font-size: 15px;
line-height: 15px;
padding: 10px 20px;
border-radius: 20px;
margin-left: auto;
}
}
</style>
<style>
.prnts-container {
width: 100vw;
position: relative;
margin: 0;
}
.ftr-container-2 {
min-width:100vw;
min-height:100px;
position: relative;
background: linear-gradient(150deg, rgba(26, 163, 83, 1) 0%, rgba(20, 100, 180, 1) 100%);
display: flex;
flex-flow: column;
text-align: left;
}
.first-row-ftr {
display: flex;
flex-flow: row;
margin-left: 20vw;
min-height: auto;
}
.col-one, .col-two {
width: 25%;
padding-top: 20px;
}
.col-three {
width: 40%;
padding: 20px;
height: auto;
}
.col-one h1, .col-two h1, .col-three h1 {
font-size: 36px;
font-weight: 700;
color: white;
}
.col-one p, .col-two p {
font-size: 16px;
line-height: 25px;
color: white;
margin-bottom: 0;
width: 90%;
}
.col-three p {
font-size: 16px;
line-height: 25px;
color: white;
padding-bottom: 20px;
width: 80%;
}
.col-two a {
text-decoration: none;
}
.col-three a {
font-size: 30px;
font-weight: 700;
color: #1464b4;
padding: 10px 20px;
margin-top: 40px;
border-radius: 30px;
background-color: white;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
text-decoration: none;
}
.second-row-ftr {
width: 100%;
margin-left: 20vw;
}
.second-row-ftr h1 {
font-size: 36px;
font-weight: 700;
color: white;
}
.second-row-ftr img {
width: 40px;
padding-bottom: 20px;
margin-right: 10px;
}
.ftr-container-3 {
min-width:100vw;
min-height:100px;
display: flex;
flex-flow: row;
background-color: #10658c;
}
.tagline {
width: 50%;
margin-left: 20vw;
}
.tagline h1{
font-size: 15px;
font-weight: 700;
margin-top: auto;
margin-bottom: auto;
text-align: left;
color: white;
padding-top: 20px;
padding-bottom: 20px;
}
.copyright{
width: 50%;
}
.copyright h1{
font-size: 15px;
font-weight: 500;
margin-top: auto;
margin-bottom: auto;
padding: 20px;
text-align: left;
color: white;
}
@media screen and (max-width: 700px) {
.ftr-container-1 {
left:0;
flex-flow: column wrap;
}
.project-thumb {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 10px;
padding-right: 0;
text-align: center;
}
.project-thumb img {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
.project-brief {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 40px;
}
.project-brief h1 {
font-size: 24px;
font-weight: 700;
}
.project-brief p {
font-size: 14px;
}
.project-brief a {
font-size: 18px;
font-weight: 700;
color: black;
padding: 10px 20px;
border-radius: 30px;
background-color: #ffd966;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
text-decoration: none;
}
.first-row-ftr {
flex-flow: column;
margin: 0 auto;
}
.col-one, .col-two {
width: 85%;
padding: 20px;
margin: 0 auto;
}
.col-three {
width: 85%;
padding: 20px;
margin: 0 auto;
}
.col-one h1, .col-two h1, .col-three h1 {
font-size: 36px;
font-weight: 700;
color: white;
}
.col-one p, .col-two p {
font-size: 16px;
line-height: 25px;
color: white;
margin-bottom: 0;
}
.col-three p {
font-size: 16px;
line-height: 25px;
color: white;
padding-bottom: 20px;
width: 80%;
}
.col-two a {
text-decoration: none;
}
.col-three a {
font-size: 20px;
margin-top: 30px;
}
.second-row-ftr {
width: 85%;
margin: 30px auto;
padding: 20px;
}
.second-row-ftr h1 {
font-size: 36px;
font-weight: 700;
color: white;
}
.second-row-ftr img {
width: 40px;
padding-bottom: 20px;
margin-right: 10px;
}
.ftr-container-3 {
flex-flow: column;
}
.tagline {
width: 100%;
margin-left: auto;
}
.copyright {
width: 100%;
}
.copyright h1{
font-size: 13px;
padding: 20px;
text-align: center;
margin: auto;
}
.tagline h1{
font-size: 13px;
padding: 20px;
text-align: center;
margin: auto;
}
}
</style>
Our Office
4th floor of MRC Building, Faculty of Engineering Universitas Indonesia, Kampus UI Depok, 16424
Newsletter
We share our knowledge with educational content and provide tips and relevant news.
Sign up now
Building Synergy, Inspiring Indonesia
© 2023 Center for Sustainability and Waste Management UI
