diff --git a/1.1.jfif b/1.1.jfif new file mode 100644 index 0000000..8c90245 Binary files /dev/null and b/1.1.jfif differ diff --git a/1.2.jpg b/1.2.jpg new file mode 100644 index 0000000..fa25eb8 Binary files /dev/null and b/1.2.jpg differ diff --git a/1.3.png b/1.3.png new file mode 100644 index 0000000..78f7950 Binary files /dev/null and b/1.3.png differ diff --git a/1.4.png b/1.4.png new file mode 100644 index 0000000..3a253cd Binary files /dev/null and b/1.4.png differ diff --git a/1.5.png b/1.5.png new file mode 100644 index 0000000..1221e7d Binary files /dev/null and b/1.5.png differ diff --git a/1.6.png b/1.6.png new file mode 100644 index 0000000..c06ab92 Binary files /dev/null and b/1.6.png differ diff --git a/1.7.png b/1.7.png new file mode 100644 index 0000000..e74c889 Binary files /dev/null and b/1.7.png differ diff --git a/1.8.png b/1.8.png new file mode 100644 index 0000000..01915a0 Binary files /dev/null and b/1.8.png differ diff --git a/1.9.png b/1.9.png new file mode 100644 index 0000000..967835e Binary files /dev/null and b/1.9.png differ diff --git a/index.html b/index.html index 69e452d..7bdf754 100644 --- a/index.html +++ b/index.html @@ -53,14 +53,14 @@

PlasticFlow
Mekong

-
+

About Us

-
-
-
+
+
+

Logo

@@ -84,69 +84,77 @@

PlasticFlow Mekong

Partner

-
-
- +
+
+
-

Royal University of Phnom Phen

-

Cambodia

+

Geoinformatics Center of The Asian Institute of Technology

+

GIC-AIT

-
-
- +
+
+
-

National University of Laos

-

Laos

+

Environmental Research Institute of Chulalongkorn University

+

ERIC

- +
-

ISPONRE

-

Vietnam

+

Institute of Strategy and Policy on Natural Resources and Environment

+

ISPORE

- +
-

COMPOSTED

-

Cambodia

+

Nation University of Laos

+

NUOL

- +
-

GreenHub

-

Vietnam

+

The Environment Education and Recycling Organization

+

COMPOSTED

- +
-

TerraCycle

-

Thailand

+

GreenHub

+

Vietnam

-
-
- +
+
+
-

ERIC

-

Thailand

+

Royal University of Phnom Penh

+

RUPP

-
-
- +
+
+
-

ClearRivers

+

Clear Rivers

Vietnam

+ +
+
+ +
+

Terracycle Foundation

+

Thailand

+
@@ -336,4 +344,4 @@

Connect

- + \ No newline at end of file diff --git a/style.css b/style.css index 0a544c8..55f6e9c 100644 --- a/style.css +++ b/style.css @@ -220,7 +220,7 @@ header.sticky{ line-height: 1.1; } -.row-items1{ +.row-items01{ display: grid; grid-template-columns: repeat(auto-fit, minmax(325px, auto)); grid-gap: 5rem; @@ -229,7 +229,7 @@ header.sticky{ margin-top: 5rem; } -.container-box1{ +.container-box01{ background: var(--bg-color); border: 1px solid #f0eded; padding: 15px 10px; @@ -237,7 +237,7 @@ header.sticky{ transition: all 1s ease 0s; } -.container-img1 img{ +.container-img01 img{ height: 500px; width: 400px; padding: 15px; @@ -248,7 +248,7 @@ header.sticky{ cursor: pointer; } -.container-box1 h4{ +.container-box01 h4{ font-size: 24px; font-weight: 600; margin-bottom: 8px; @@ -269,23 +269,31 @@ header.sticky{ color: var(--second-color); } -.container-box1 p{ +.container-box01 p{ font-size: 15px; color: var(--second-color); } -.container-box1:hover{ +.container-box01:hover{ box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); border: 1px solid transparent; transform: translateY(-3px); } - /* Partner */ -.container-box{ +.container-box1{ background: var(--bg-color); border: 1px solid #f0eded; - padding: 50px 10px; + padding: 50px 12px; + border-radius: 4px; + transition: all 1s ease 0s; + cursor: pointer; +} + +.container-box2{ + background: var(--bg-color); + border: 1px solid #f0eded; + padding: 50px 12px; border-radius: 4px; transition: all 1s ease 0s; cursor: pointer; @@ -294,7 +302,7 @@ header.sticky{ .container-box3{ background: var(--bg-color); border: 1px solid #f0eded; - padding: 67px 12px; + padding: 50px 12px; border-radius: 4px; transition: all 1s ease 0s; cursor: pointer; @@ -303,7 +311,7 @@ header.sticky{ .container-box4{ background: var(--bg-color); border: 1px solid #f0eded; - padding: 67px 10px; + padding: 50px 12px; border-radius: 4px; transition: all 1s ease 0s; cursor: pointer; @@ -312,7 +320,7 @@ header.sticky{ .container-box5{ background: var(--bg-color); border: 1px solid #f0eded; - padding: 67px 10px; + padding: 50px 12px; border-radius: 4px; transition: all 1s ease 0s; cursor: pointer; @@ -321,14 +329,51 @@ header.sticky{ .container-box6{ background: var(--bg-color); border: 1px solid #f0eded; - padding: 67px 10px; + padding: 50px 12px; + border-radius: 4px; + transition: all 1s ease 0s; + cursor: pointer; +} + +.container-box7{ + background: var(--bg-color); + border: 1px solid #f0eded; + padding: 50px 12px; + border-radius: 4px; + transition: all 1s ease 0s; + cursor: pointer; +} + +.container-box8{ + background: var(--bg-color); + border: 1px solid #f0eded; + padding: 50px 12px; + border-radius: 4px; + transition: all 1s ease 0s; + cursor: pointer; +} + +.container-box9{ + background: var(--bg-color); + border: 1px solid #f0eded; + padding: 50px 12px; border-radius: 4px; transition: all 1s ease 0s; cursor: pointer; } +.container-img1 img{ + height: 110px; + width: 120px; + padding: 15px; + background: var(--bg-color); + box-shadow: 5px 10px 30px rgb(85 85 85/20%); + border-radius: 8px; + margin-bottom: 15px; + cursor: pointer; +} -.container-img img{ +.container-img2 img{ height: 110px; width: 120px; padding: 15px; @@ -363,7 +408,7 @@ header.sticky{ .container-img5 img{ height: 105px; - width: 160px; + width: 130px; padding: 15px; background: var(--bg-color); box-shadow: 5px 10px 30px rgb(85 85 85/20%); @@ -374,7 +419,18 @@ header.sticky{ .container-img6 img{ height: 105px; - width: 105px; + width: 160px; + padding: 15px; + background: var(--bg-color); + box-shadow: 5px 10px 30px rgb(85 85 85/20%); + border-radius: 8px; + margin-bottom: 15px; + cursor: pointer; +} + +.container-img7 img{ + height: 110px; + width: 120px; padding: 15px; background: var(--bg-color); box-shadow: 5px 10px 30px rgb(85 85 85/20%); @@ -383,7 +439,35 @@ header.sticky{ cursor: pointer; } -.container-box h4{ +.container-img8 img{ + height: 110px; + width: 180px; + padding: 15px; + background: var(--bg-color); + box-shadow: 5px 10px 30px rgb(85 85 85/20%); + border-radius: 8px; + margin-bottom: 15px; + cursor: pointer; +} + +.container-img9 img{ + height: 110px; + width: 120px; + padding: 15px; + background: var(--bg-color); + box-shadow: 5px 10px 30px rgb(85 85 85/20%); + border-radius: 8px; + margin-bottom: 15px; + cursor: pointer; +} + +.container-box1 h4{ + font-size: 24px; + font-weight: 600; + margin-bottom: 8px; +} + +.container-box2 h4{ font-size: 24px; font-weight: 600; margin-bottom: 8px; @@ -413,7 +497,30 @@ header.sticky{ margin-bottom: 8px; } -.container-box p{ +.container-box7 h4{ + font-size: 24px; + font-weight: 600; + margin-bottom: 8px; +} + +.container-box8 h4{ + font-size: 24px; + font-weight: 600; + margin-bottom: 8px; +} + +.container-box9 h4{ + font-size: 24px; + font-weight: 600; + margin-bottom: 8px; +} + +.container-box1 p{ + font-size: 15px; + color: var(--second-color); +} + +.container-box2 p{ font-size: 15px; color: var(--second-color); } @@ -438,7 +545,28 @@ header.sticky{ color: var(--second-color); } -.container-box:hover{ +.container-box7 p{ + font-size: 15px; + color: var(--second-color); +} + +.container-box8 p{ + font-size: 15px; + color: var(--second-color); +} + +.container-box9 p{ + font-size: 15px; + color: var(--second-color); +} + +.container-box1:hover{ + box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); + border: 1px solid transparent; + transform: translateY(-3px); +} + +.container-box2:hover{ box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); border: 1px solid transparent; transform: translateY(-3px); @@ -468,6 +596,23 @@ header.sticky{ transform: translateY(-3px); } +.container-box7:hover{ + box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); + border: 1px solid transparent; + transform: translateY(-3px); +} + +.container-box8:hover{ + box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); + border: 1px solid transparent; + transform: translateY(-3px); +} + +.container-box9:hover{ + box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%); + border: 1px solid transparent; + transform: translateY(-3px); +} .title{ @@ -794,4 +939,4 @@ header.sticky{ height: 85vh; transition: .2s; } -} +} \ No newline at end of file