Profile
<!----------------------------------------------
| autotrophy |
| by Zylphide |
------------------------------------------------
------- COLORS ------------
sky, bottom gradient: rgba(255,247,228,1)
sky top gradient: rgba(53,178,252,1)
ground: #4A392A
sun: #FFE491
seedlings/dashed border/plant headers: #97c05b
clouds: #ffffff
text: #fff
line breaks: #A39991
photo credits:
monstera: https://www.pexels.com/photo/close-up-photo-of-swiss-cheese-plant-2090641/
sundew: https://unsplash.com/photos/e8nIow5TQSY
silversword: https://www.hawaii.edu/news/2020/03/04/saving-haleakala-silverswords/
------>
<div class="row justify-content-center">
<!--- header sky section ---->
<div class="col-lg-9 pt-5" style="background: linear-gradient(0deg, rgba(255,247,228,1) 0%, rgba(53,178,252,1) 100%); border-top-right-radius:20px; border-top-left-radius:20px;">
<div class="row justify-content-center" style="height: 300px;" >
<!---- seedlings and clouds left ---->
<div class="col-lg-4 d-none d-lg-block px-4" style="margin-top: auto;">
<div style="text-align: center"><i class="fad fa-clouds" style="font-size: 9em; color: #ffffff; margin-bottom: 130px;"></i></div>
<div class="justify-content-center">
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b;"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
</div>
</div>
<!---- seedlings and clouds left END ---->
<!---- sun ---->
<div class="col-lg-4 justify-content-center" style="margin-top: auto;">
<div style="height: 100px; width: 200px; background: #FFE491; border-top-right-radius: 250px; border-top-left-radius: 250px; bottom"></div>
</div>
<!---- sun END ---->
<!---- seedlings and clouds right ---->
<div class="col-lg-4 justify-content-center d-none d-lg-block px-4" style="margin-top: auto;">
<div class="px-5" style="text-align: right"><i class="fad fa-clouds faded" style="font-size: 4em; color: #ffffff; margin-bottom: px;"></i></div>
<div><i class="fad fa-clouds" style="font-size: 9em; color: #ffffff; margin-bottom: 60px;"></i></i></div>
<div class="justify-content-center">
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
<i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
</div>
</div>
<!---- seedlings and clouds right END ---->
</div>
</div>
<!---- header sky section END---->
<!--- world info section ---->
<div class="col-lg-9 py-4" style="background: #4A392A; color: #fff; ">
<!---- world info box stretches to fit ---->
<div class="row justify-content-center mt-3">
<div class="col-lg-6 py-2" style="background: rgba(231,220,190,0.2); border-left: #97c05b solid 6px; border-right: #97c05b solid 6px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border-top-left-radius:20px;; border-top-right-radius:20px;">
<!---- world name --->
<div class="row mb-1">
<div class="col-lg-3 my-auto"><div class="card border-0" style="height: 1px; background: #A39991"></div></div>
<div class="col-lg-6 display-4" style="font-size: 1.9rem; text-align: center; letter-spacing: 1px">TERRA / EARTH</div>
<div class="col-lg-3 my-auto"><div class="card border-0" style="height: 1px; background: #A39991"></div></div>
</div>
<!---- world name END --->
<!---- world facts ---->
<div class="row justify-content-center">
<!--- fact 1 ---->
<div class="col-6 text-right font-weight-bold">Surface Temperature:</div>
<div class="col-6">15°C</div>
<!--- fact 1 END ---->
<!--- fact 2 ---->
<div class="col-6 text-right font-weight-bold">Atmosphere:</div>
<div class="col-6">Blue color, composed of N<sub>2</sub> and O<sub>2</sub></div>
<!--- fact 2 END ---->
<!--- fact 3 ---->
<div class="col-6 text-right font-weight-bold">Sunlight:</div>
<div class="col-6">Yellow-white, medium intensity</div>
<!--- fact 3 END ---->
<!--- fact 4 ---->
<div class="col-6 text-right font-weight-bold">Main plant color(s):</div>
<div class="col-6">Green</div>
<!--- fact 4 END ---->
<!--- fact 5 ---->
<div class="col-6 text-right font-weight-bold">Photosynthetic process:</div>
<div class="col-6">CO<sub>2</sub> → O<sub>2</sub></div>
<!--- fact 5 END ---->
</div>
<!---- world facts END ---->
</div>
</div>
<!---- world info box END ---->
</div>
<!--- world info section END ---->
<!--- plants section ---->
<div class="col-lg-9" style="background: #4A392A; color: #fff">
<!--- plant 1 ---->
<div class="row px-3 py-4">
<!---- plant 1 pic ----->
<div class="col-lg-4 d-flex" style="flex-direction:column; min-height:200px">
<div class="container h-100"
style="background: url(https://images.pexels.com/photos/2090641/pexels-photo-2090641.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border-top-left-radius:20px;; border-top-right-radius:20px;">
</div>
</div>
<!---- plant 1 pic END ----->
<!---- plant 1 info ---->
<div class="col-lg-8 d-flex" style="flex-direction:column;">
<!--- plant 1 name --->
<div class="container p-2" style="background: #97c05b; border-top-left-radius:20px; border-top-right-radius:20px;">
<div class="display-4 px-4" style="font-spacing: 1px">
MONSTERA
</div>
</div>
<!--- plant 1 name END --->
<!--- plant 1 description ---->
<div class="container p-2" style="background: rgba(231,220,190,0.2); border-bottom-left-radius:20px; border-bottom-right-radius:20px;">
<!---- plant 1 stats --->
<div class="row px-5 my-1">
<!--- stat 1 ---->
<div class="col-lg-4 font-weight-bold">Scientific name:</div>
<div class="col-lg-8"><i>Monstera deliciosa</i></div>
<!--- stat 1 END ---->
<!--- stat 2 ---->
<div class="col-lg-4 font-weight-bold">Common name(s):</div>
<div class="col-lg-8">Monstera, Swiss cheese plant, fruit salad plant</div>
<!--- stat 2 END ---->
<!--- stat 3 ---->
<div class="col-lg-4 font-weight-bold">Native habitat:</div>
<div class="col-lg-8">Tropical forests</div>
<!--- stat 3 END ---->
<!--- stat 4 ---->
<div class="col-lg-4 font-weight-bold">Temp. range:</div>
<div class="col-lg-8">18–30°C</div>
<!--- stat 4 END ---->
<!--- stat 5 ---->
<div class="col-lg-4 font-weight-bold">Lifespan:</div>
<div class="col-lg-8">???</div>
<!--- stat 5 END ---->
<!--- stat 6 ---->
<div class="col-lg-4 font-weight-bold">Status:</div>
<div class="col-lg-8">Not threatened</div>
<!--- stat 6 END ---->
</div>
<!---- plant 1 stats END --->
<!---- plant 1 description --->
<div class="row px-5 my-2">
<div class="col-12">
<p>People will pay so much money for a variegated cultivar of this plant. Literally like $100 for some unrooted leaves. I want one but not for that price!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---- plant 1 stats --->
</div>
<!--- plant 1 description ---->
</div>
<!---- plant 1 info END ---->
</div>
<!--- plant 1 END ---->
<!--- plant 2 ---->
<div class="row px-3 py-4">
<!---- plant 2 pic ----->
<div class="col-lg-4 order-lg-2 d-flex" style="flex-direction:column; min-height:200px">
<div class="container h-100"
style="background: url(https://images.unsplash.com/photo-1636930803653-36cd3aef2a1b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border-top-left-radius:20px;; border-top-right-radius:20px;">
</div>
</div>
<!---- plant 2 pic END ----->
<!---- plant 2 info ---->
<div class="col-lg-8 order-lg-1 d-flex" style="flex-direction:column; ">
<!--- plant 2 name --->
<div class="container p-2" style="background: #97c05b; border-top-left-radius:20px; border-top-right-radius:20px; text-align: right">
<div class="display-4 px-4" style="font-spacing: 1px">
SUNDEW
</div>
</div>
<!--- plant 2 name END --->
<!--- plant 2 description ---->
<div class="container p-2" style="background: rgba(231,220,190,0.2); border-bottom-left-radius:20px; border-bottom-right-radius:20px;">
<!---- plant 2 stats --->
<div class="row px-5 my-1">
<!--- stat 1 ---->
<div class="col-lg-4 font-weight-bold">Scientific name:</div>
<div class="col-lg-8"><i>Drosera capsensis</i></div>
<!--- stat 1 END ---->
<!--- stat 2 ---->
<div class="col-lg-4 font-weight-bold">Common name(s):</div>
<div class="col-lg-8">Cape sundew</div>
<!--- stat 2 END ---->
<!--- stat 3 ---->
<div class="col-lg-4 font-weight-bold">Native habitat:</div>
<div class="col-lg-8">Bogs, swamps</div>
<!--- stat 3 END ---->
<!--- stat 4 ---->
<div class="col-lg-4 font-weight-bold">Temp. Range:</div>
<div class="col-lg-8">25–35°C</div>
<!--- stat 4 END ---->
<!--- stat 5 ---->
<div class="col-lg-4 font-weight-bold">Lifespan:</div>
<div class="col-lg-8">???</div>
<!--- stat 5 END ---->
<!--- stat 6 ---->
<div class="col-lg-4 font-weight-bold">Status:</div>
<div class="col-lg-8">Not threatened</div>
<!--- stat 6 END ---->
</div>
<!---- plant 2 stats END --->
<!---- plant 2 description --->
<div class="row px-5 my-2">
<div class="col-12">
<p>Mmmm bugs... Yummy. They do just be eating bugs all day. Saw one that caught two whole adult dragonflies. Dang. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---- plant 2 stats --->
</div>
<!--- plant 2 description ---->
</div>
<!---- plant 2 info END ---->
</div>
<!--- plant 2 END ---->
<!--- plant 3 ---->
<div class="row px-3 py-4">
<!---- plant 3 pic ----->
<div class="col-lg-4 d-flex" style="flex-direction:column; min-height:200px">
<div class="container h-100"
style="background: url(https://www.hawaii.edu/news/wp-content/uploads/2020/03/manoa-ctahr-silversword-1.jpg);
background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border-top-left-radius:20px;; border-top-right-radius:20px;">
</div>
</div>
<!---- plant 3 pic END ----->
<!---- plant 3 info ---->
<div class="col-lg-8 d-flex" style="flex-direction:column;">
<!--- plant 3 name --->
<div class="container p-2" style="background: #97c05b; border-top-left-radius:20px; border-top-right-radius:20px;">
<div class="display-4 px-4" style="font-spacing: 1px">
SILVERSWORD
</div>
</div>
<!--- plant 3 name END --->
<!--- plant 3 description ---->
<div class="container p-2" style="background: rgba(231,220,190,0.2); border-bottom-left-radius:20px; border-bottom-right-radius:20px;">
<!---- plant 3 stats --->
<div class="row px-5 my-1">
<!--- stat 1 ---->
<div class="col-lg-4 font-weight-bold">Scientific name:</div>
<div class="col-lg-8"><i>Argyroxiphium sandwicense </i> subsp. <i>macrocephalum</i></div>
<!--- stat 1 END ---->
<!--- stat 2 ---->
<div class="col-lg-4 font-weight-bold">Common name(s):</div>
<div class="col-lg-8">Haleakala silversword, east Maui silversword</div>
<!--- stat 2 END ---->
<!--- stat 3 ---->
<div class="col-lg-4 font-weight-bold">Native habitat:</div>
<div class="col-lg-8">Alpine deserts of the Halaeakala crater in Hawaii</div>
<!--- stat 3 END ---->
<!--- stat 4 ---->
<div class="col-lg-4 font-weight-bold">Temp. range:</div>
<div class="col-lg-8">-5–18°C</div>
<!--- stat 4 END ---->
<!--- stat 5 ---->
<div class="col-lg-4 font-weight-bold">Lifespan:</div>
<div class="col-lg-8">Up to 50 years</div>
<!--- stat 5 END ---->
<!--- stat 6 ---->
<div class="col-lg-4 font-weight-bold">Status:</div>
<div class="col-lg-8">Critically endangered</div>
<!--- stat 6 END ---->
</div>
<!---- plant 3 stats END --->
<!---- plant 3 description --->
<div class="row px-5 my-2">
<div class="col-12">
<p>Imagine surviving on the alpine slopes of Hawaii's volcanoes for decades and some two-legged tourist mfer just rips you up and takes you to their home where you promptly die. Or getting eaten by a feral sheep released by some dumb white colonist. Smh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
</div>
</div>
<!---- plant 3 stats --->
</div>
<!--- plant 3 description ---->
</div>
<!---- plant 3 info END ---->
</div>
<!--- plant 3 END ---->
</div>
<!--- plants section ---->
<!---- credits block ----->
<div class="col-lg-9 pt-1 pb-4" style="background: #4A392A; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
<!--- credits, do not remove! --->
<a class="col-12" style="color: #97c05b; font-size: 12px; display: block; text-align: center" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
<!--- credits end ---->
</div>
<!---- credits block END ----->
Recent Images
No images.