Webleb - UI Elements

HTML

<!-- <!DOCTYPE html>

<head>

<title>Andev Web</title>

</head>

<body>

Solar explorer

</h1>

<h2>

Pluto

</h2>

</div>

</label>

<h2>

Neptune

</h2>

</div>

</label>

<h2>

Uranus

</h2>

</div>

</label>

<h2>

Saturn

</h2>

</div>

</label>

<h2>

Jupiter

</h2>

</div>

</label>

<h2>

Mars

</h2>

</div>

</label>

<h2>

Earth

</h2>

</div>

</label>

<h2>

Venus

</h2>

</div>

</label>

<h2>

Mercury

</h2>

</div>

</label>

<h2>Planet</h2>

<h1>Mercury</h1>

<p>The closest planet to the sun. It circles the sun faster than all the other planets, which is why Romans named it after their swift-footed messenger god.</p>

<a>

Read Mor

</a>

</label>

</div>

</div>

<h2>Planet</h2>

<h1>Venus</h1>

<p>Named for the Roman goddess of love and beauty. In ancient times, Venus was often thought to be two different stars, the evening star and the morning star.</p>

<a>

Read Mor

</a>

</label>

</div>

</div>

</div>

<h2>Planet</h2>

<h1>Earth</h1>

<p>Earth, our home. It is the only planet known to have an atmosphere containing free oxygen, oceans of liquid water on its surface, and, of course, life.</p>

<a>

Read Mor

</a>

</label>

</div>

</div>

<h2>Deimos</h2>

</div>

CSS

<@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700");

.solar_systm {

transform-style: preserve-3d;

pointer-events: none;

height: 100%;

position: absolute;

left: 0;

right: 0;

}

* {

-webkit-user-select: none;

/* Chrome all / Safari all */

-moz-user-select: none;

/* Firefox all */

-ms-user-select: none;

/* IE 10+ */

user-select: none;

/* Likely future */

}

body .solar_systm .planet, body input[type=radio][name=planet]::after, body .overlay {

position: absolute;

left: 0;

right: 0;

top: 50%;

transform: translateY(-50%);

margin: auto;

}

body .solar_systm .planet.neptune .trajectory.ner, body .solar_systm .planet.neptune .trajectory.pro, body .solar_systm .planet.neptune .trajectory.tri, body .solar_systm .planet.uranus .trajectory.umb, body .solar_systm .planet.uranus .trajectory.ari, body .solar_systm .planet.uranus .trajectory.mir, body .solar_systm .planet.saturn .trajectory.enc, body .solar_systm .planet.saturn .trajectory.di, body .solar_systm .planet.saturn .trajectory.ti, body .solar_systm .planet.jupiter .trajectory.ga, body .solar_systm .planet.jupiter .trajectory.eu, body .solar_systm .planet.jupiter .trajectory.lop, body .solar_systm .planet.mars .trajectory.p, body .solar_systm .planet.mars .trajectory.d, body .solar_systm .planet.earth .trajectory.m {

border: 2px dashed white;

position: absolute;

border-radius: 3400px;

background: none !important;

z-index: -2;

}

body .solar_systm .planet {

height: 1200px;

width: 1200px;

border-radius: 600px;

background: red;

transition: transform 2.8s 0.23s cubic-bezier(0.33, 0, 0, 1), opacity 2s 0.8s, box-shadow 0s 0s;

background-size: 1140px 910px !important;

top: auto;

bottom: -920px;

}

body .solar_systm .planet .moon {

height: 200px;

width: 200px;

border-radius: 600px;

background: red;

position: absolute;

text-align: center;

color: white;

text-transform: uppercase;

opacity: 0;

transition: all 0.6s 0.2s;

}

body .solar_systm .planet .moon h2 {

font-weight: 100;

font-size: 40px;

letter-spacing: 5px;

margin: 0;

position: relative;

top: -120px;

}

body .solar_systm .planet .moon h3 {

font-weight: 100;

font-size: 20px;

letter-spacing: 5px;

color: #fea082;

margin: 0;

position: relative;

top: -120px;

}

@keyframes planet {

from {

background-position-y: 0px;

}

to {

background-position-y: -1000px;

}

body .solar {

position: absolute;

transform: rotatex(-20deg);

perspective: 800px;

width: 100%;

height: 100%;

transform-style: preserve-3d;

}

body input[type=radio][name=planet]::after {

width: 220px;

height: 220px;

border-radius: 550px;

appearance: none;

outline: none;

cursor: pointer;

z-index: 12;

left: 18px;

bottom: 282px;

}

body {

overflow: hidden;

background: black;

height: 100vh;

font-family: "Montserrat", sans-serif;

}

body .logo {

color: white;

position: absolute;

top: 40px;

left: 0;

right: 0;

margin: auto;

text-align: center;

font-size: 14px;

text-transform: uppercase;

font-weight: 100;

letter-spacing: 4px;

}

body .logo span {

font-size: 12px;

color: #f39041;

display: block;

}

body label {

cursor: pointer;

}

body label.mercury > .preview {

background: url("https://www.solarsystemscope.com/images/textures/full/2k_makemake_fictional.jpg") !important;

}

body label.venus > .preview {

background: url("https://nasa3d.arc.nasa.gov/shared_assets/images/ven0aaa2/ven0aaa2-copy-428-321.jpg") !important;

}

body label.earth > .preview {

background: url("https://img00.deviantart.net/04ef/i/2009/114/3/e/new_earth_texture_map_by_lightondesigns.jpg") !important;

}

body label.mars > .preview {

background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mars_texture.jpg") !important;

}

body label.jupiter > .preview {

background: url("https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA07782_hires.jpg") !important;

}

body label.saturn > .preview {

background: url("https://www.solarsystemscope.com/images/textures/full/2k_saturn.jpg") !important;

}

body label.uranus > .preview {

background: url("https://img00.deviantart.net/957c/i/2017/165/4/9/uranus_texture_map_by_jcpag2010-db7yjwb.png") !important;

}

body label.neptune > .preview {

background: url("https://img00.deviantart.net/f068/i/2017/165/b/c/neptune_texture_map_by_jcpag2010-dbcjcv5.png") !important;

}

body label.pluto > .preview {

background: url("https://pre00.deviantart.net/4677/th/pre/f/2015/314/4/e/pluto_map__2015_nov_10__by_snowfall_the_cat-d918tlb.png") !important;

}

body label.menu {

color: white;

display: block;

position: absolute;

cursor: pointer;

left: 90px;

z-index: 2;

}

body label.menu:after {

display: block;

width: 12px;

height: 12px;

border: 2px solid white;

border-radius: 60px;

content: "";

z-index: 2;

position: absolute;

top: -4px;

left: -4px;

}

body label.menu:hover h2, body label.menu:hover h3 {

opacity: 1;

}

body label.menu.m!-- Replace with your HTML Code 
(Leave empty if not needed) -->

JS

Solar

Recommended