summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoraltaf-creator <dev@altafcreator.com>2024-09-25 06:27:36 +0700
committeraltaf-creator <dev@altafcreator.com>2024-09-25 06:27:36 +0700
commitf3b0f568673b258dfacc67880d592696f2315fd1 (patch)
treee59587f849524960ee657d06b9f3dedfd4c2f8bc
parenta84fce64fbce292cf4fd2909ae03d06b48571d32 (diff)
finished first pageHEADmaster
Diffstat
-rw-r--r--.DS_Storebin6148 -> 6148 bytes
-rw-r--r--assets/.DS_Storebin6148 -> 8196 bytes
-rw-r--r--assets/docs/Laporan Observasi.pdfbin0 -> 161654 bytes
-rw-r--r--assets/images/.DS_Storebin0 -> 6148 bytes
-rw-r--r--assets/images/DSC06297_1.JPGbin0 -> 111559 bytes
-rw-r--r--assets/images/DSC06299.JPGbin0 -> 107136 bytes
-rw-r--r--assets/images/DSC06322.JPGbin0 -> 223833 bytes
-rw-r--r--assets/images/almond.JPGbin0 -> 77848 bytes
-rw-r--r--assets/images/beeswax.JPGbin0 -> 97737 bytes
-rw-r--r--assets/images/brown.JPGbin0 -> 108317 bytes
-rw-r--r--assets/images/cooking.JPGbin0 -> 66732 bytes
-rw-r--r--assets/images/discuss.jpgbin0 -> 354932 bytes
-rw-r--r--assets/images/jojoba.JPGbin0 -> 68221 bytes
-rw-r--r--assets/images/product.pngbin0 -> 393885 bytes
-rw-r--r--assets/images/product2.pngbin0 -> 667595 bytes
-rw-r--r--assets/images/report.pngbin0 -> 179991 bytes
-rw-r--r--assets/images/shea.JPGbin0 -> 46555 bytes
-rw-r--r--index.html79
-rw-r--r--style.css274
19 files changed, 342 insertions, 11 deletions
diff --git a/.DS_Store b/.DS_Store
index 5624ed2..d0fc083 100644
--- a/.DS_Store
+++ b/.DS_Store
Binary files differ
diff --git a/assets/.DS_Store b/assets/.DS_Store
index c65d688..4236331 100644
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
Binary files differ
diff --git a/assets/docs/Laporan Observasi.pdf b/assets/docs/Laporan Observasi.pdf
new file mode 100644
index 0000000..21657cc
--- /dev/null
+++ b/assets/docs/Laporan Observasi.pdf
Binary files differ
diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/assets/images/.DS_Store
Binary files differ
diff --git a/assets/images/DSC06297_1.JPG b/assets/images/DSC06297_1.JPG
new file mode 100644
index 0000000..909330f
--- /dev/null
+++ b/assets/images/DSC06297_1.JPG
Binary files differ
diff --git a/assets/images/DSC06299.JPG b/assets/images/DSC06299.JPG
new file mode 100644
index 0000000..883c2eb
--- /dev/null
+++ b/assets/images/DSC06299.JPG
Binary files differ
diff --git a/assets/images/DSC06322.JPG b/assets/images/DSC06322.JPG
new file mode 100644
index 0000000..554edaf
--- /dev/null
+++ b/assets/images/DSC06322.JPG
Binary files differ
diff --git a/assets/images/almond.JPG b/assets/images/almond.JPG
new file mode 100644
index 0000000..9edff0e
--- /dev/null
+++ b/assets/images/almond.JPG
Binary files differ
diff --git a/assets/images/beeswax.JPG b/assets/images/beeswax.JPG
new file mode 100644
index 0000000..014cd0d
--- /dev/null
+++ b/assets/images/beeswax.JPG
Binary files differ
diff --git a/assets/images/brown.JPG b/assets/images/brown.JPG
new file mode 100644
index 0000000..7915843
--- /dev/null
+++ b/assets/images/brown.JPG
Binary files differ
diff --git a/assets/images/cooking.JPG b/assets/images/cooking.JPG
new file mode 100644
index 0000000..3ad0596
--- /dev/null
+++ b/assets/images/cooking.JPG
Binary files differ
diff --git a/assets/images/discuss.jpg b/assets/images/discuss.jpg
new file mode 100644
index 0000000..678b8e9
--- /dev/null
+++ b/assets/images/discuss.jpg
Binary files differ
diff --git a/assets/images/jojoba.JPG b/assets/images/jojoba.JPG
new file mode 100644
index 0000000..bcdea2f
--- /dev/null
+++ b/assets/images/jojoba.JPG
Binary files differ
diff --git a/assets/images/product.png b/assets/images/product.png
new file mode 100644
index 0000000..0eb83db
--- /dev/null
+++ b/assets/images/product.png
Binary files differ
diff --git a/assets/images/product2.png b/assets/images/product2.png
new file mode 100644
index 0000000..149cb68
--- /dev/null
+++ b/assets/images/product2.png
Binary files differ
diff --git a/assets/images/report.png b/assets/images/report.png
new file mode 100644
index 0000000..ff93f4f
--- /dev/null
+++ b/assets/images/report.png
Binary files differ
diff --git a/assets/images/shea.JPG b/assets/images/shea.JPG
new file mode 100644
index 0000000..1a90482
--- /dev/null
+++ b/assets/images/shea.JPG
Binary files differ
diff --git a/index.html b/index.html
index 8ca133c..53e8b1d 100644
--- a/index.html
+++ b/index.html
@@ -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 &rarr;</a>
+ <a class="button" href="">Our mission &rarr;</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,– &rarr;</a>
+ <span id="b1-txt">&nbsp;&nbsp;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 &rarr;</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 &darr;</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 &rarr;</a>
+ </div>
+ <div id="d2" class="bento-tile">
+ </div>
</div>
</section>
</div>
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"
+ ;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 03:36:01 +0000