diff options
57 files changed, 148 insertions, 8 deletions
diff --git a/assets/.DS_Store b/assets/.DS_Store Binary files differindex 60c38ed..c65d688 100644 --- a/assets/.DS_Store +++ b/assets/.DS_Store diff --git a/assets/fonts/Inter/static/Inter_18pt-Black.ttf b/assets/fonts/Inter/static/Inter_18pt-Black.ttf Binary files differdeleted file mode 100644 index 89673de..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Black.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf Binary files differdeleted file mode 100644 index b33602f..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Bold.ttf b/assets/fonts/Inter/static/Inter_18pt-Bold.ttf Binary files differdeleted file mode 100644 index cd13f60..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Bold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf Binary files differdeleted file mode 100644 index 0d19c1a..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf Binary files differdeleted file mode 100644 index e71c601..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf Binary files differdeleted file mode 100644 index df45062..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf Binary files differdeleted file mode 100644 index f9c6cfc..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf Binary files differdeleted file mode 100644 index 275f305..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Italic.ttf b/assets/fonts/Inter/static/Inter_18pt-Italic.ttf Binary files differdeleted file mode 100644 index 14d3595..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Italic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Light.ttf b/assets/fonts/Inter/static/Inter_18pt-Light.ttf Binary files differdeleted file mode 100644 index acae361..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Light.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf Binary files differdeleted file mode 100644 index f69e18b..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Medium.ttf b/assets/fonts/Inter/static/Inter_18pt-Medium.ttf Binary files differdeleted file mode 100644 index 71d9017..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Medium.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf Binary files differdeleted file mode 100644 index 5c8c8b1..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Regular.ttf b/assets/fonts/Inter/static/Inter_18pt-Regular.ttf Binary files differdeleted file mode 100644 index ce097c8..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Regular.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf Binary files differdeleted file mode 100644 index 053185e..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf Binary files differdeleted file mode 100644 index d9c9896..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-Thin.ttf b/assets/fonts/Inter/static/Inter_18pt-Thin.ttf Binary files differdeleted file mode 100644 index e68ec47..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-Thin.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf Binary files differdeleted file mode 100644 index 134e837..0000000 --- a/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Black.ttf b/assets/fonts/Inter/static/Inter_24pt-Black.ttf Binary files differdeleted file mode 100644 index dbb1b3b..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Black.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf Binary files differdeleted file mode 100644 index b89d61c..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Bold.ttf b/assets/fonts/Inter/static/Inter_24pt-Bold.ttf Binary files differdeleted file mode 100644 index 46b3583..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Bold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf Binary files differdeleted file mode 100644 index d1c0f53..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf Binary files differdeleted file mode 100644 index b775c08..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf Binary files differdeleted file mode 100644 index 3461a92..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf Binary files differdeleted file mode 100644 index 2ec6ca3..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf Binary files differdeleted file mode 100644 index c634a5d..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Italic.ttf b/assets/fonts/Inter/static/Inter_24pt-Italic.ttf Binary files differdeleted file mode 100644 index 1048b07..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Italic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Light.ttf b/assets/fonts/Inter/static/Inter_24pt-Light.ttf Binary files differdeleted file mode 100644 index 1a2a6f2..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Light.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf Binary files differdeleted file mode 100644 index ded5a75..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Medium.ttf b/assets/fonts/Inter/static/Inter_24pt-Medium.ttf Binary files differdeleted file mode 100644 index 5c88739..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Medium.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf Binary files differdeleted file mode 100644 index be091b1..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Regular.ttf b/assets/fonts/Inter/static/Inter_24pt-Regular.ttf Binary files differdeleted file mode 100644 index 6b088a7..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Regular.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf Binary files differdeleted file mode 100644 index ceb8576..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf Binary files differdeleted file mode 100644 index 6921df2..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-Thin.ttf b/assets/fonts/Inter/static/Inter_24pt-Thin.ttf Binary files differdeleted file mode 100644 index 3505b35..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-Thin.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf Binary files differdeleted file mode 100644 index a3e6feb..0000000 --- a/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Black.ttf b/assets/fonts/Inter/static/Inter_28pt-Black.ttf Binary files differdeleted file mode 100644 index 66a252f..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Black.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf Binary files differdeleted file mode 100644 index 3c8fdf9..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Bold.ttf b/assets/fonts/Inter/static/Inter_28pt-Bold.ttf Binary files differdeleted file mode 100644 index d17828b..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Bold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf Binary files differdeleted file mode 100644 index 6fce50a..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf Binary files differdeleted file mode 100644 index 6d87cae..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf Binary files differdeleted file mode 100644 index 1a56735..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf Binary files differdeleted file mode 100644 index d42b3f5..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf Binary files differdeleted file mode 100644 index 90e2f20..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Italic.ttf b/assets/fonts/Inter/static/Inter_28pt-Italic.ttf Binary files differdeleted file mode 100644 index c2a143a..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Italic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Light.ttf b/assets/fonts/Inter/static/Inter_28pt-Light.ttf Binary files differdeleted file mode 100644 index 5eeff3a..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Light.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf Binary files differdeleted file mode 100644 index 6b90b76..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Medium.ttf b/assets/fonts/Inter/static/Inter_28pt-Medium.ttf Binary files differdeleted file mode 100644 index 00120fe..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Medium.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf Binary files differdeleted file mode 100644 index 7481e7b..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Regular.ttf b/assets/fonts/Inter/static/Inter_28pt-Regular.ttf Binary files differdeleted file mode 100644 index 855b6f4..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Regular.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf Binary files differdeleted file mode 100644 index 8b84efc..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf Binary files differdeleted file mode 100644 index 2e22c5a..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-Thin.ttf b/assets/fonts/Inter/static/Inter_28pt-Thin.ttf Binary files differdeleted file mode 100644 index 94e6108..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-Thin.ttf +++ /dev/null diff --git a/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf Binary files differdeleted file mode 100644 index d3d44cd..0000000 --- a/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf +++ /dev/null @@ -3,15 +3,19 @@ <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=0.7"> <title>ECOEASE Exfoliants</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="navbar"> - <img src="/assets/images/master.png" alt="" class="navbar-icon"> + <a href=""><img src="/assets/images/master.png" alt="" class="navbar-icon"></a> <div class="navbar-links"> - <a class="navbar-link" href=""></a> + <a class="navbar-link" href="">Project Information</a> + • + <a class="navbar-link" href="">Our Goal</a> + • + <a class="navbar-link" href="">Products</a> </div> </div> <div class="main"> @@ -23,13 +27,30 @@ </section> <section class="section-text"> <div class="elipse"></div> - <h1 style="display: flex; justify-content: center;"><span style="max-width: 750px; display: block;"><b class="text-accent-brand">Sustainable</b> and <b class="text-accent-brand">organic</b> skincare products that helps your skin.</span></h1> + <h1 class="section-heading"><span class="section-heading-child"><b class="text-accent-brand">Sustainable</b> and <b class="text-accent-brand">affordable</b> skincare products that helps your skin.</span></h1> </section> <section> - + <h2>Our products are...</h1> + <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> + </div> + <div id="b0" class="bento-tile"> + <h2 class="bento-heading">Make your skin say <b class="text-accent-brand">Thank You</b>.</h2> + </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> + </div> + </div> + </section> + <section class="section-text"> + <h1 class="section-heading"><span class="section-heading-child">🥁 Introducing...<br><b class="text-accent-brand">Asheville Lip Scrub</b>!</span></h1> </section> <section> + <div id="bento1"> + </div> </section> </div> </body> @@ -10,6 +10,7 @@ :root { --background: white; + --foreground: #415400; --background-accented: #F9F8F2; --radius: 50px; --brand-fg-dark: #6A6932; @@ -23,6 +24,7 @@ body { display: grid; place-items: center; font-family: "Inter", sans-serif; + color: var(--foreground); } section { @@ -38,6 +40,12 @@ h1 { color: rgba(0, 0, 0, .7); } +h2 { + font-size: 36px; + font-weight: 400; + color: rgba(0, 0, 0, .6); +} + .main { max-width: 1400px; width: 100%; @@ -62,8 +70,10 @@ h1 { box-sizing: border-box; box-shadow: 0px 0px 20px rgba(0, 0, 0, .15); padding: 25px; + padding-right: 40px; padding-top: 15px; margin: 25px; + display: flex; } .navbar-icon { @@ -73,18 +83,39 @@ h1 { .navbar-links { width: 100%; - display: flexbox; - justify-items: right; + display: flex; + flex-direction: row-reverse; + align-items: center; + color: var(--brand-fg-light); + gap: 5px; } .navbar-link { + text-decoration: none; + color: var(--foreground); + background-color: transparent; + padding: 10px; + border: 1px solid transparent; + box-sizing: border-box; + border-radius: 15px; + transition: all .2s; +} + +.navbar-link:hover { + background: var(--brand-bg-light); +} + +.navbar-link:active { + background: var(--brand-bg-dark); +} +.navbar-link:focus { + border: 1px solid var(--brand-fg-dark); } .banner { height: 480px; width: 100%; - display: flexbox; padding-left: 128px; align-content: center; } @@ -108,10 +139,21 @@ h1 { border: 1px solid rgba(0, 0, 0, .2); box-sizing: border-box; box-shadow: 0px 0px 20px rgba(0, 0, 0, .15); + padding: 40px; } .bento-tile { + background: linear-gradient(45deg, var(--background), var(--background-accented)); + border-radius: 50px; + border: 1px solid rgba(0, 0, 0, .2); + box-sizing: border-box; + box-shadow: 0px 0px 20px rgba(0, 0, 0, .1); + padding: 40px; +} +.bento-heading { + color: var(--foreground); + margin: 0; } .section-text { @@ -129,3 +171,80 @@ h1 { transform: rotate(-20deg); left: calc(50% - 500px); } + +.button { + background: linear-gradient(90deg, var(--brand-fg-dark), var(--brand-fg-light)); + padding: 20px; + border-radius: 50px; + text-decoration: none; + display: block; + width: fit-content; + color: var(--brand-bg-light); + margin-top: 1rem; + transition: .2s all; + background-size: 200%; +} + +.button:hover { + background-size: 100%; +} + +.button:focus { + text-decoration: underline; + background-size: 100%; +} + +.section-heading { + display: flex; + justify-content: center; +} + +.section-heading-child { + max-width: 800px; + display: block; +} + +#bento0 { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 15px; + grid-auto-flow: row; + grid-template-areas: + "a0 b0" + "a0 c0" +} + +#a0 { + grid-area: a0; + text-align: right; +} + +#b0 { + grid-area: b0; + height: 300px; +} + +#c0 { + grid-area: c0; + height: 300px; +} + +@media only screen and (max-width: 600px) { + .banner { + padding-left: 50px; + } + + .banner-heading { + font-size: 64px; + height: 64px; + } + + #bento0 { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1rw; + grid-template-areas: + "a0" + "a0 c0" + } +} |