diff options
| -rw-r--r-- | .DS_Store | bin | 6148 -> 6148 bytes | |||
| -rw-r--r-- | assets/.DS_Store | bin | 6148 -> 8196 bytes | |||
| -rw-r--r-- | assets/docs/Laporan Observasi.pdf | bin | 0 -> 161654 bytes | |||
| -rw-r--r-- | assets/images/.DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | assets/images/DSC06297_1.JPG | bin | 0 -> 111559 bytes | |||
| -rw-r--r-- | assets/images/DSC06299.JPG | bin | 0 -> 107136 bytes | |||
| -rw-r--r-- | assets/images/DSC06322.JPG | bin | 0 -> 223833 bytes | |||
| -rw-r--r-- | assets/images/almond.JPG | bin | 0 -> 77848 bytes | |||
| -rw-r--r-- | assets/images/beeswax.JPG | bin | 0 -> 97737 bytes | |||
| -rw-r--r-- | assets/images/brown.JPG | bin | 0 -> 108317 bytes | |||
| -rw-r--r-- | assets/images/cooking.JPG | bin | 0 -> 66732 bytes | |||
| -rw-r--r-- | assets/images/discuss.jpg | bin | 0 -> 354932 bytes | |||
| -rw-r--r-- | assets/images/jojoba.JPG | bin | 0 -> 68221 bytes | |||
| -rw-r--r-- | assets/images/product.png | bin | 0 -> 393885 bytes | |||
| -rw-r--r-- | assets/images/product2.png | bin | 0 -> 667595 bytes | |||
| -rw-r--r-- | assets/images/report.png | bin | 0 -> 179991 bytes | |||
| -rw-r--r-- | assets/images/shea.JPG | bin | 0 -> 46555 bytes | |||
| -rw-r--r-- | index.html | 79 | ||||
| -rw-r--r-- | style.css | 274 |
19 files changed, 342 insertions, 11 deletions
| Binary files differ diff --git a/assets/.DS_Store b/assets/.DS_Store Binary files differindex c65d688..4236331 100644 --- a/assets/.DS_Store +++ b/assets/.DS_Store diff --git a/assets/docs/Laporan Observasi.pdf b/assets/docs/Laporan Observasi.pdf Binary files differnew file mode 100644 index 0000000..21657cc --- /dev/null +++ b/assets/docs/Laporan Observasi.pdf diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/assets/images/.DS_Store diff --git a/assets/images/DSC06297_1.JPG b/assets/images/DSC06297_1.JPG Binary files differnew file mode 100644 index 0000000..909330f --- /dev/null +++ b/assets/images/DSC06297_1.JPG diff --git a/assets/images/DSC06299.JPG b/assets/images/DSC06299.JPG Binary files differnew file mode 100644 index 0000000..883c2eb --- /dev/null +++ b/assets/images/DSC06299.JPG diff --git a/assets/images/DSC06322.JPG b/assets/images/DSC06322.JPG Binary files differnew file mode 100644 index 0000000..554edaf --- /dev/null +++ b/assets/images/DSC06322.JPG diff --git a/assets/images/almond.JPG b/assets/images/almond.JPG Binary files differnew file mode 100644 index 0000000..9edff0e --- /dev/null +++ b/assets/images/almond.JPG diff --git a/assets/images/beeswax.JPG b/assets/images/beeswax.JPG Binary files differnew file mode 100644 index 0000000..014cd0d --- /dev/null +++ b/assets/images/beeswax.JPG diff --git a/assets/images/brown.JPG b/assets/images/brown.JPG Binary files differnew file mode 100644 index 0000000..7915843 --- /dev/null +++ b/assets/images/brown.JPG diff --git a/assets/images/cooking.JPG b/assets/images/cooking.JPG Binary files differnew file mode 100644 index 0000000..3ad0596 --- /dev/null +++ b/assets/images/cooking.JPG diff --git a/assets/images/discuss.jpg b/assets/images/discuss.jpg Binary files differnew file mode 100644 index 0000000..678b8e9 --- /dev/null +++ b/assets/images/discuss.jpg diff --git a/assets/images/jojoba.JPG b/assets/images/jojoba.JPG Binary files differnew file mode 100644 index 0000000..bcdea2f --- /dev/null +++ b/assets/images/jojoba.JPG diff --git a/assets/images/product.png b/assets/images/product.png Binary files differnew file mode 100644 index 0000000..0eb83db --- /dev/null +++ b/assets/images/product.png diff --git a/assets/images/product2.png b/assets/images/product2.png Binary files differnew file mode 100644 index 0000000..149cb68 --- /dev/null +++ b/assets/images/product2.png diff --git a/assets/images/report.png b/assets/images/report.png Binary files differnew file mode 100644 index 0000000..ff93f4f --- /dev/null +++ b/assets/images/report.png diff --git a/assets/images/shea.JPG b/assets/images/shea.JPG Binary files differnew file mode 100644 index 0000000..1a90482 --- /dev/null +++ b/assets/images/shea.JPG @@ -4,25 +4,25 @@ <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=0.7"> - <title>ECOEASE Exfoliants</title> + <title>Asheville</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="navbar"> - <a href="" class="navbar-icon-a"><img src="/assets/images/master.png" alt="" class="navbar-icon"></a> + <a href="/" class="navbar-icon-a"><img src="/assets/images/master.png" alt="" class="navbar-icon"></a> <div class="navbar-links"> - <a class="navbar-link" href="">Project Information</a> + <a class="navbar-link" href="project/">Project Information</a> • - <a class="navbar-link" href="">Our Goal</a> + <a class="navbar-link" href="goal/">Our Goal</a> • - <a class="navbar-link" href="">Products</a> + <a class="navbar-link" href="products">Products</a> </div> </div> <div class="main"> <section> - <div class="banner bento-tile-accent"> - <span class="banner-heading text-accent-brand">asheville</span><br> - <span class="text-accent-brand">Organic Skincare Products</span> + <div class="banner"> + <span class="banner-heading text-accent-brand-reverse">asheville</span><br> + <span class="text-accent-brand-reverse">Organic Skincare Products</span> </div> </section> <section class="section-text"> @@ -34,13 +34,17 @@ <div id="bento0"> <div id="a0" class="bento-tile-accent"> <h2 class="bento-heading">Always made with <b class="text-accent-brand">Green & Organic</b> materials.</h2> + <p style="text-align: left;">Our mission of sustainability and friendliness ensures that all of our products are always made with organic and safe to dispose materials.</p> + <img id="a0-img0" src="/assets/images/beeswax.JPG" alt=""> + <img id="a0-img1" src="/assets/images/DSC06299.JPG" alt=""> </div> <div id="b0" class="bento-tile"> <h2 class="bento-heading">Make your skin say <b class="text-accent-brand">Thank You</b>.</h2> + <p>Back to nature with our products, filled with the benefits of organic materials.</p> </div> <div id="c0" class="bento-tile"> <h2 class="bento-heading"><b class="text-accent-brand">Sustainable</b> Production</h2> - <a class="button" href="">Learn more →</a> + <a class="button" href="">Our mission →</a> </div> </div> </section> @@ -49,7 +53,64 @@ </section> <section> <div id="bento1"> + <div id="a1" class="bento-tile-accent"> + <h2 style="text-align: center;" class="bento-heading">Friendly<br> <b class="text-accent-brand-reverse">Ingredients</b></h2> + <img id="a1-img0" src="/assets/images/brown.JPG" alt=""> + <span id="a1-txt0">brown<br>sugar</span> + <img id="a1-img1" src="/assets/images/DSC06299.JPG" alt=""> + <span id="a1-txt1">natural<br>oils</span> + <img id="a1-img2" src="/assets/images/beeswax.JPG" alt=""> + <span id="a1-txt2">beeswax</span> + <img id="a1-img3" src="/assets/images/shea.JPG" alt=""> + <span id="a1-txt3">shea<br>butter</span> + </div> + <div id="b1" class="bento-tile"> + <img id="b1-img" src="/assets/images/product.png" alt=""> + <a id="b1-btn" class="button" href="">Rp 24.000,– →</a> + <span id="b1-txt"> Afford-<br>able</span> + </div> + <div id="c1" class="bento-tile"> + <h2 class="bento-heading">Easy to Use</h2> + <br> + <span style="font-size: 1.1rem;"><b class="text-accent-brand" style="font-size: 2rem;">Get</b> some scrub,<br><b class="text-accent-brand" style="font-size: 2rem;">apply</b> to your lip,<br><b class="text-accent-brand" style="font-size: 2rem">massage</b> circularly lightly,<br>then <b class="text-accent-brand" style="font-size: 2rem;">wash</b> after use! Easy!</span> + <img id="c1-img" src="/assets/images/product2.png" alt=""> + </div> + <div id="d1" class="bento-tile-accent"> + <h2 class="bento-heading">Take care of your <b class="text-accent-brand">Lips</b></h2> + <p>Taking care of our delicate lips is important. Clean and maintain the healthiness of your lips with our Lip Scrub.</p> + <ol style="font-size: 2rem;"> + <li>Exfoliate your lips to maintain cleaniness, and</li> + <li>Emmoliate your lips to moisturise it.</li> + </ol> + </div> + <div id="e1" class="bento-tile"></div> + </div> + <div class="center"><a class="button" href="">Buy Now →</a></div> + </section> + <section class="section-text"> + <h1 class="section-heading">🏫<br>A part of a school project.</h1> + </section> + <section> + <div id="bento2"> + <div id="a2" class="bento-tile"> + <h2 class="bento-heading"><b class="text-accent-brand">Fair</b> Future(s)</h2> + <hr> + <p>We have chosen the <b style="font-size: 2rem;">Third</b> Theme of our Block 1 Project, <b style="font-size: 2rem;">Art of Humanity</b></p> + </div> + <div id="b2" class="bento-tile"> + <h2 class="bento-heading">Read our <b class="text-accent-brand">Report</b></h2> + <img id="b2-img" src="/assets/images/report.png" alt=""> + <a class="button" href="/assets/docs/Laporan Observasi.pdf">Download & Read ↓</a> + </div> + <div id="c2" class="bento-tile"> + <h2 class="bento-heading">Statistics</h2> + <p>In Indonesia, <b>8 million tonnes</b> of plastic waste are produced every year.</p> + <p><b>38 million tonnes</b> of total waste are produced every year.</p> + <a class="button" href="/project/">Learn more →</a> + </div> + <div id="d2" class="bento-tile"> + </div> </div> </section> </div> @@ -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" + ; } } |
