From f3b0f568673b258dfacc67880d592696f2315fd1 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Wed, 25 Sep 2024 06:27:36 +0700 Subject: finished first page --- .DS_Store | Bin 6148 -> 6148 bytes assets/.DS_Store | Bin 6148 -> 8196 bytes assets/docs/Laporan Observasi.pdf | Bin 0 -> 161654 bytes assets/images/.DS_Store | Bin 0 -> 6148 bytes assets/images/DSC06297_1.JPG | Bin 0 -> 111559 bytes assets/images/DSC06299.JPG | Bin 0 -> 107136 bytes assets/images/DSC06322.JPG | Bin 0 -> 223833 bytes assets/images/almond.JPG | Bin 0 -> 77848 bytes assets/images/beeswax.JPG | Bin 0 -> 97737 bytes assets/images/brown.JPG | Bin 0 -> 108317 bytes assets/images/cooking.JPG | Bin 0 -> 66732 bytes assets/images/discuss.jpg | Bin 0 -> 354932 bytes assets/images/jojoba.JPG | Bin 0 -> 68221 bytes assets/images/product.png | Bin 0 -> 393885 bytes assets/images/product2.png | Bin 0 -> 667595 bytes assets/images/report.png | Bin 0 -> 179991 bytes assets/images/shea.JPG | Bin 0 -> 46555 bytes index.html | 79 +++++++++-- style.css | 274 +++++++++++++++++++++++++++++++++++++- 19 files changed, 342 insertions(+), 11 deletions(-) create mode 100644 assets/docs/Laporan Observasi.pdf create mode 100644 assets/images/.DS_Store create mode 100644 assets/images/DSC06297_1.JPG create mode 100644 assets/images/DSC06299.JPG create mode 100644 assets/images/DSC06322.JPG create mode 100644 assets/images/almond.JPG create mode 100644 assets/images/beeswax.JPG create mode 100644 assets/images/brown.JPG create mode 100644 assets/images/cooking.JPG create mode 100644 assets/images/discuss.jpg create mode 100644 assets/images/jojoba.JPG create mode 100644 assets/images/product.png create mode 100644 assets/images/product2.png create mode 100644 assets/images/report.png create mode 100644 assets/images/shea.JPG diff --git a/.DS_Store b/.DS_Store index 5624ed2..d0fc083 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store index c65d688..4236331 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/docs/Laporan Observasi.pdf b/assets/docs/Laporan Observasi.pdf new file mode 100644 index 0000000..21657cc Binary files /dev/null and b/assets/docs/Laporan Observasi.pdf differ diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/assets/images/.DS_Store differ diff --git a/assets/images/DSC06297_1.JPG b/assets/images/DSC06297_1.JPG new file mode 100644 index 0000000..909330f Binary files /dev/null and b/assets/images/DSC06297_1.JPG differ diff --git a/assets/images/DSC06299.JPG b/assets/images/DSC06299.JPG new file mode 100644 index 0000000..883c2eb Binary files /dev/null and b/assets/images/DSC06299.JPG differ diff --git a/assets/images/DSC06322.JPG b/assets/images/DSC06322.JPG new file mode 100644 index 0000000..554edaf Binary files /dev/null and b/assets/images/DSC06322.JPG differ diff --git a/assets/images/almond.JPG b/assets/images/almond.JPG new file mode 100644 index 0000000..9edff0e Binary files /dev/null and b/assets/images/almond.JPG differ diff --git a/assets/images/beeswax.JPG b/assets/images/beeswax.JPG new file mode 100644 index 0000000..014cd0d Binary files /dev/null and b/assets/images/beeswax.JPG differ diff --git a/assets/images/brown.JPG b/assets/images/brown.JPG new file mode 100644 index 0000000..7915843 Binary files /dev/null and b/assets/images/brown.JPG differ diff --git a/assets/images/cooking.JPG b/assets/images/cooking.JPG new file mode 100644 index 0000000..3ad0596 Binary files /dev/null and b/assets/images/cooking.JPG differ diff --git a/assets/images/discuss.jpg b/assets/images/discuss.jpg new file mode 100644 index 0000000..678b8e9 Binary files /dev/null and b/assets/images/discuss.jpg differ diff --git a/assets/images/jojoba.JPG b/assets/images/jojoba.JPG new file mode 100644 index 0000000..bcdea2f Binary files /dev/null and b/assets/images/jojoba.JPG differ diff --git a/assets/images/product.png b/assets/images/product.png new file mode 100644 index 0000000..0eb83db Binary files /dev/null and b/assets/images/product.png differ diff --git a/assets/images/product2.png b/assets/images/product2.png new file mode 100644 index 0000000..149cb68 Binary files /dev/null and b/assets/images/product2.png differ diff --git a/assets/images/report.png b/assets/images/report.png new file mode 100644 index 0000000..ff93f4f Binary files /dev/null and b/assets/images/report.png differ diff --git a/assets/images/shea.JPG b/assets/images/shea.JPG new file mode 100644 index 0000000..1a90482 Binary files /dev/null and b/assets/images/shea.JPG differ diff --git a/index.html b/index.html index 8ca133c..53e8b1d 100644 --- a/index.html +++ b/index.html @@ -4,25 +4,25 @@ - ECOEASE Exfoliants + Asheville
- +
- Project Information + Project Information • - Our Goal + Our Goal • - Products + Products
-
@@ -34,13 +34,17 @@

Always made with Green & Organic materials.

+

Our mission of sustainability and friendliness ensures that all of our products are always made with organic and safe to dispose materials.

+ +

Make your skin say Thank You.

+

Back to nature with our products, filled with the benefits of organic materials.

Sustainable Production

- Learn more → + Our mission →
@@ -49,7 +53,64 @@
+
+

Friendly
Ingredients

+ + brown
sugar + + natural
oils + + beeswax + + shea
butter +
+
+ + Rp 24.000,– → +   Afford-
able +
+
+

Easy to Use

+
+ Get some scrub,
apply to your lip,
massage circularly lightly,
then wash after use! Easy! + +
+
+

Take care of your Lips

+

Taking care of our delicate lips is important. Clean and maintain the healthiness of your lips with our Lip Scrub.

+
    +
  1. Exfoliate your lips to maintain cleaniness, and
    2. +
  2. Emmoliate your lips to moisturise it.
    3. +
+
+
+
+
Buy Now →
+
+
+

🏫
A part of a school project.

+
+
+
+
+

Fair Future(s)

+
+

We have chosen the Third Theme of our Block 1 Project, Art of Humanity

+
+
+

Read our Report

+ + Download & Read ↓ +
+
+

Statistics

+

In Indonesia, 8 million tonnes of plastic waste are produced every year.

+

38 million tonnes of total waste are produced every year.

+ Learn more → +
+
+
diff --git a/style.css b/style.css index 860640d..15a4f90 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,7 @@ body { section { width: 100%; box-sizing: border-box; + position: relative; } h1 { @@ -74,6 +75,7 @@ h2 { padding-top: 15px; margin: 25px; display: flex; + z-index: 999; } .navbar-icon { @@ -121,6 +123,14 @@ h2 { width: 100%; padding-left: 128px; align-content: center; + background: url(/assets/images/DSC06297_1.JPG); + background-size: cover; + overflow: hidden; + box-sizing: border-box; + background-position: left; + border-radius: 50px; + border: 1px solid rgba(255, 255, 255, .2); + box-shadow: 0px 0px 20px rgba(0, 0, 0, .15); } .banner-heading { @@ -140,6 +150,16 @@ b.text-accent-brand { font-weight: bold; } +.text-accent-brand-reverse { + background: -webkit-linear-gradient(45deg, var(--brand-bg-dark), var(--brand-bg-light)); + background-clip: text; + color: transparent; +} + +b.text-accent-brand-reverse { + font-weight: bold; +} + .bento-tile-accent { background: linear-gradient(45deg, var(--brand-bg-dark), var(--brand-bg-light)); border-radius: 50px; @@ -211,6 +231,12 @@ b.text-accent-brand { display: block; } +.center { + display: flex; + justify-content: center; + align-items: cenetr; +} + #bento0 { display: grid; grid-template-columns: 1fr 1fr; @@ -225,6 +251,26 @@ b.text-accent-brand { #a0 { grid-area: a0; text-align: right; + position: relative; + overflow: hidden; +} + +#a0-img0 { + position: absolute; + height: 200px; + bottom: 0; + right: 10px; + border-radius: 10px; + filter: brightness(80%); +} + +#a0-img1 { + position: absolute; + height: 150px; + bottom: 100px; + right: 100px; + border-radius: 10px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, .3); } #b0 { @@ -237,6 +283,202 @@ b.text-accent-brand { height: 300px; } +#bento1 { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + gap: 15px; + grid-auto-flow: row; + grid-template-areas: + "a1 b1 d1" + "a1 c1 d1" + "a1 c1 e1"; +} + +#a1 { + grid-area: a1; + position: relative; + overflow: hidden; + background: linear-gradient(var(--brand-fg-dark), var(--brand-fg-light)) !important; + color: var(--brand-bg-light); +} + +#a1 > h2 { + color: var(--brand-bg-light); +} + +#a1-img0 { + position: absolute; + height: 170px; + border-radius: 10px; + top: 180px; + right: -20px; +} +#a1-img1 { + position: absolute; + height: 170px; + border-radius: 10px; + top: 380px; + left: -20px; +} +#a1-img2 { + position: absolute; + height: 170px; + border-radius: 10px; + top: 580px; + right: -20px; + +} +#a1-img3 { + position: absolute; + height: 170px; + border-radius: 10px; + top: 780px; + left: -20px; +} +#a1-txt0 { + font-size: 3rem; + font-weight: 800; + position: absolute; + top: 200px; + opacity: 60%; + color: white; + right: 200px; +} +#a1-txt1 { + font-size: 3rem; + font-weight: 800; + position: absolute; + top: 400px; + opacity: 60%; + color: white; + left: 200px; +} +#a1-txt2 { + font-size: 3rem; + font-weight: 800; + position: absolute; + top: 630px; + opacity: 60%; + color: white; + right: 150px; +} +#a1-txt3 { + font-size: 3rem; + font-weight: 800; + position: absolute; + top: 800px; + opacity: 60%; + color: white; + left: 200px; +} + +#b1 { + grid-area: b1; + height: 300px; + position: relative; +} + +#b1-img { + height: 200px; + position: absolute; + z-index: 99; + transform: rotate(-10deg); +} + +#b1-btn { + position: absolute; + bottom: 20px; + right: 20px; +} + +#b1-txt { + position: absolute; + font-size: 3rem; + opacity: 30%; + color: black; + font-weight: 700; + top: 50%; + transform: translateY(-50%); + left: 190px; +} + +#c1 { grid-area: c1; position: relative; } + +#c1-img { + position: absolute; + right: 0; + bottom: 0; + height: 250px; +} + +#d1 { grid-area: d1; } + +#e1 { + grid-area: e1; + background: url(/assets/images/DSC06322.JPG); + background-size: cover; + background-position: center; +} + +#img-section-lip { + position: absolute; + height: 100px; + top: 0; + left: 0; +} + +#bento2 { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "a2 b2" + "c2 d2"; + gap: 15px; +} + +#a2 { + grid-area: a2; + height: 300px; +} + +#b2 { grid-area: b2; position: relative; overflow: hidden; } + +#b2-img { + position: absolute; + bottom: 20px; + right: -10px; + height: 150px; + border-radius: 10px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, .2); +} + +#c2 { grid-area: c2; } + +#d2 { + grid-area: d2; + background: url(/assets/images/discuss.jpg); + background-size: cover; + background-position: center; + border: 1px solid rgba(255, 255, 255, .2) +} + +@media only screen and (max-width: 1000px) { + #bento1 { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-template-areas: + "d1 b1" + "d1 c1" + "a1 c1" + "a1 e1" + "a1 e1"; + } +} + @media only screen and (max-width: 600px) { .banner { padding-left: 50px; @@ -249,9 +491,37 @@ b.text-accent-brand { #bento0 { grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1rw; + grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-areas: "a0" - "a0 c0" + "a0" + "b0" + "c0" + } + + #bento1 { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-areas: + "b1" + "a1" + "a1" + "a1" + "c1" + "c1" + "e1" + "d1" + "d1" !important; + } + + #bento2 { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + grid-template-areas: + "a2" + "b2" + "c2" + "d2" + ; } } -- cgit v1.2.3