Webleb - कोड स्निपेट्स

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) -->

सौर

अनुशंसित

सौर ऊर्जा प्रणालियाँ

कैस्केडिंग सौर मंडल

सीएसएस 3डी सौर प्रणाली

HTML

CSS

JS

अनुशंसित

सौर ऊर्जा प्रणालियाँ

कैस्केडिंग सौर मंडल

सीएसएस 3डी सौर प्रणाली

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS