Profile
<!-------------------------------------------
| SOLAR SYSTEM |
| by Zylphide |
---------------------------------------------
popup background: rgba(16,17,23,0.9)
text color: #fff
orbit path color: #2e2e2e
x buttom: #5bc0de
to place the planets in a different location, change the margins in the style area of the planet's div:
margin-left: #px; margin-top: -#px; margin-bottom: #px;
for planets on the inside (i.e., NOT the outermost planet), you'll have to mess with the margin-top to get the orbit rings to look concentric (make sure margin-top is a NEGATIVE number!)
to add more rings, simply add more
<div class="card rounded-circle bg-transparent mx-auto" style="height: #px; width: #x;">
inside the 'background image' div.
the div sandwich order, starting from the outermost div, should be:
background image | ring z | planet z | ring y | planet y | ring x | planet x | ring w | planet w | ...repeat... | sun |
image credits: planet images from wikipedia, background image from unsplash
---->
<!---- background image ----->
<div class="container-fluid pt-5 pb-3" style="background: url(https://images.unsplash.com/photo-1475274047050-1d0c0975c63e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80); background-size: cover; background-repeat: none; background-position: center;">
<!---- outer ring z ----->
<div class="card rounded-circle bg-transparent mx-auto" style="height:750px; width:750px; border: 1px solid #2e2e2e;">
<!----- inner ring y--->
<div class="card rounded-circle bg-transparent mx-auto my-auto" style="height:520px; width:520px; border: 1px solid #2e2e2e;">
<!---- inner ring x ----->
<div class="card rounded-circle bg-transparent mx-auto my-auto" style="height:300px; width:300px; border: 1px solid #2e2e2e;">
<!----- sun ----->
<a href="#sun" class="card rounded-circle mx-auto my-auto" data-toggle="collapse" style="background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/220px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg); background-size: cover; background-repeat: no-repeat;
height:120px; width: 120px; "></a>
<!----- sun END ----->
<!---- planet x ---->
<a href="#planetx" class="card rounded-circle border-0" data-toggle="collapse" style="
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/1200px-The_Earth_seen_from_Apollo_17.jpg); background-size: cover; background-repeat: no-repeat;
height:60px; width:60px;
margin-left: 265px; margin-top: -150px; margin-bottom: 90px; "></a>
<!---- planet x end ---->
</div>
<!---- inner ring x END ----->
<!---- planet y ---->
<a href="#planety" class="card rounded-circle border-0" data-toggle="collapse" style="
background: url(https://upload.wikimedia.org/wikipedia/commons/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg); background-size: cover; background-repeat: no-repeat;
height:70px; width:70px;
margin-left: 70px; margin-top: -90px; margin-bottom: 20px"></a>
<!---- planet y end ---->
</div>
<!--- inner ring y END ---->
<!---- planet z ---->
<a href="#planetz" class="card rounded-circle border-0" data-toggle="collapse" style="
background: url(https://upload.wikimedia.org/wikipedia/commons/6/63/Neptune_-_Voyager_2_%2829347980845%29_flatten_crop.jpg); background-size: cover; background-repeat: no-repeat;
height:50px; width:50px; margin-left: 350px; margin-top: -35px; margin-bottom: -20px"></a>
<!---- planet z end ---->
</div>
<!---- outer ring z END ---->
<!--- credits, do not remove! --->
<a class="d-block text-right pt-3" style="font-size:18px; color: #5bc0de" href="https://toyhou.se/Zylphide"><i class="far fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
</div>
<!---- background image end ---->
<!-- sun popup -->
<div id="sun" class="collapse fade h-100" style="position: absolute; top: 0px; left: 0px; color: #fff; ">
<div class="sticky-top" style="padding-top: 30px;">
<div class="p-0 row no-gutters mx-auto col-lg-9" style="background: rgba(16,17,23,0.9); height: 600px;">
<!-- sun image -->
<div class="col-lg-5">
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/1024px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg); background-position: center;background-size: cover; height: 600px; width: 100%;"> </div>
</div>
<!--- sun image END ---->
<!---- sun text area -->
<div class="col-lg-7">
<!---- sun info box header -->
<div class="display-4 px-4 py-3">
SOL
<!---- X close button, remember to change the href to match the href in the orbital area ---->
<div class="float-right my-auto"><a href="#sun" data-toggle="collapse" style="#5bc0de"> <i class="fal fa-times"></i> </a></div>
<!---- X close button END ---->
</div>
<!--- sun info box END ---->
<hr class="mx-3 mt-1" style="background: rgb(200,200,200);">
<!-- sun description -->
<div class="mx-4" style="height: 490px; overflow-y: auto; overflow-x: hidden">
<!--- sun stats ---->
<div class="row mt-2 ">
<div class="col-lg-3 text-right font-weight-bold">STAR CLASS:</div>
<div class="col">Yellow dwarf (G-type main-sequence star (G2V))</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">LIGHT TYPE:</div>
<div class="col">White</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">LUMINOSITY:</div>
<div class="col">1 Sol</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">AGE:</div>
<div class="col">4.6 billion years </div>
</div>
<!---- add more stats above here ---->
<div class="row mb-3">
<div class="col-lg-3 text-right font-weight-bold">RADIUS:</div>
<div class="col">695,700 km</div>
</div>
<!--- sun stats END ---->
<p>Write about the planet/star here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></p>
</div>
<!--- sun description END ---->
</div>
<!----- sun text area END -->
</div>
</div>
</div>
<!---- sun popup end ---->
<!-- planet x popup -->
<div id="planetx" class="collapse fade h-100" style="position: absolute; top: 0px; left: 0px; color: #fff; ">
<div class="sticky-top" style="padding-top: 30px;">
<div class="p-0 row no-gutters mx-auto col-lg-9" style="background: rgba(16,17,23,0.9); height: 600px;">
<!-- planet x image -->
<div class="col-lg-5">
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/1024px-The_Earth_seen_from_Apollo_17.jpg); background-position: center;background-size: cover; height: 600px; width: 100%;"> </div>
</div>
<!--- planet x image END ---->
<!---- planet x text area -->
<div class="col-lg-7">
<!---- planet x info box header -->
<div class="display-4 px-4 py-3">
TERRA
<!---- X close button, remember to change the href to match the href in the orbital area ---->
<div class="float-right my-auto"><a href="#planetx" data-toggle="collapse" style="#5bc0de"> <i class="fal fa-times"></i> </a></div>
<!---- X close button END ---->
</div>
<!--- planet x info box END ---->
<hr class="mx-3 mt-1" style="background: rgb(200,200,200);">
<!-- planet x description -->
<div class="mx-4" style="height: 490px; overflow-y: auto; overflow-x: hidden">
<!--- planet x stats ---->
<div class="row mt-2 ">
<div class="col-lg-3 text-right font-weight-bold">PLANET CLASS:</div>
<div class="col">Rocky planet</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">RADIUS:</div>
<div class="col">6,378 km</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">ORBITAL PERIOD:</div>
<div class="col">1 Terran Year</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">DAY LENGTH:</div>
<div class="col">23.9 Terran Hours</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">SURFACE TEMP:</div>
<div class="col">23°C</div>
</div>
<!---- add more stats above here ---->
<div class="row mb-3">
<div class="col-lg-3 text-right font-weight-bold">MOONS:</div>
<div class="col">Luna</div>
</div>
<!--- planet x stats END ---->
<p>Write about the planet/star here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></p>
</div>
<!--- planet x description END ---->
</div>
<!----- planet x text area END -->
</div>
</div>
</div>
<!---- planet x popup end ---->
<!-- planet y popup -->
<div id="planety" class="collapse fade h-100" style="position: absolute; top: 0px; left: 0px; color: #fff; ">
<div class="sticky-top" style="padding-top: 30px;">
<div class="p-0 row no-gutters mx-auto col-lg-9" style="background: rgba(16,17,23,0.9); height: 600px;">
<!-- planet y image -->
<div class="col-lg-5">
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg); background-position: center;background-size: cover; height: 600px; width: 100%;"> </div>
</div>
<!--- planet y image END ---->
<!---- planet y text area -->
<div class="col-lg-7">
<!---- planet y info box header -->
<div class="display-4 px-4 py-3">
JUPITER
<!---- X close button, remember to change the href to match the href in the orbital area ---->
<div class="float-right my-auto"><a href="#planety" data-toggle="collapse" style="#5bc0de"> <i class="fal fa-times"></i> </a></div>
<!---- X close button END ---->
</div>
<!--- planet y info box END ---->
<hr class="mx-3 mt-1" style="background: rgb(200,200,200);">
<!-- planet y description -->
<div class="mx-4" style="height: 490px; overflow-y: auto; overflow-x: hidden">
<!--- planet y stats ---->
<div class="row mt-2 ">
<div class="col-lg-3 text-right font-weight-bold">PLANET CLASS:</div>
<div class="col">Gas giant</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">RADIUS:</div>
<div class="col">71,492 km</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">ORBITAL PERIOD:</div>
<div class="col">11.9 Terran Years</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">DAY LENGTH:</div>
<div class="col">9.93 Terran Hours</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">SURFACE TEMP:</div>
<div class="col">N/A</div>
</div>
<!---- add more stats above here ---->
<div class="row mb-3">
<div class="col-lg-3 text-right font-weight-bold">MOONS:</div>
<div class="col">Ganymede, Io, Callisto, Europa, and 59 others</div>
</div>
<!--- planet y stats END ---->
<p>Write about the planet/star here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></p>
</div>
<!--- planet y description END ---->
</div>
<!----- planet y text area END -->
</div>
</div>
</div>
<!---- planet y popup end ---->
<!-- planet z popup -->
<div id="planetz" class="collapse fade h-100" style="position: absolute; top: 0px; left: 0px; color: #fff; ">
<div class="sticky-top" style="padding-top: 30px;">
<div class="p-0 row no-gutters mx-auto col-lg-9" style="background: rgba(16,17,23,0.9); height: 600px;">
<!-- planet z image -->
<div class="col-lg-5">
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Neptune_-_Voyager_2_%2829347980845%29_flatten_crop.jpg/800px-Neptune_-_Voyager_2_%2829347980845%29_flatten_crop.jpg); background-position: center;background-size: cover; height: 600px; width: 100%;"> </div>
</div>
<!--- planet z image END ---->
<!---- planet z text area -->
<div class="col-lg-7">
<!---- planet z info box header -->
<div class="display-4 px-4 py-3">
NEPTUNE
<!---- X close button, remember to change the href to match the href in the orbital area ---->
<div class="float-right my-auto"><a href="#planetz" data-toggle="collapse" style="#5bc0de"> <i class="fal fa-times"></i> </a></div>
<!---- X close button END ---->
</div>
<!--- planet z info box END ---->
<hr class="mx-3 mt-1" style="background: rgb(200,200,200);">
<!-- planet z description -->
<div class="mx-4" style="height: 490px; overflow-y: auto; overflow-x: hidden">
<!--- planet z stats ---->
<div class="row mt-2 ">
<div class="col-lg-3 text-right font-weight-bold">PLANET CLASS:</div>
<div class="col">Gas giant</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">RADIUS:</div>
<div class="col">24,764 km</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">ORBITAL PERIOD:</div>
<div class="col">164.8 Terran Years</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">DAY LENGTH:</div>
<div class="col">16.1 Terran Hours</div>
</div>
<div class="row">
<div class="col-lg-3 text-right font-weight-bold">SURFACE TEMP:</div>
<div class="col">N/A</div>
</div>
<!---- add more stats above here ---->
<div class="row mb-3">
<div class="col-lg-3 text-right font-weight-bold">MOONS:</div>
<div class="col">Triton, Naiad, Thalassa, Despina, Galatea, and 9 others</div>
</div>
<!--- planet z stats END ---->
<p>Write about the planet/star here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></p>
</div>
<!--- planet z description END ---->
</div>
<!----- planet z text area END -->
</div>
</div>
</div>
<!---- planet z popup end ---->
Recent Images
No images.