Geography, asked by ronaldoChristiano, 8 months ago

please give me html code

Answers

Answered by royalcast601
2

&lt;!DOCTYPE html&gt;<br /><br />&lt;html lang="en"&gt;<br /><br />&lt;head&gt;<br /><br />&lt;title&gt;CUBE&lt;/title&gt;<br /><br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /><br />&lt;div class="container"&gt;<br />  &lt;div id="cube"&gt;<br />    &lt;div class="front"&gt;☺️&lt;/div&gt;<br />    &lt;div class="back"&gt;☺️&lt;/div&gt;<br />    &lt;div class="right"&gt;☺️&lt;/div&gt;<br />    &lt;div class="left"&gt;☺️&lt;/div&gt;<br />    &lt;div class="top"&gt;☺️&lt;/div&gt;<br />    &lt;div class="bottom"&gt;☺️&lt;/div&gt;<br />  &lt;/div&gt;<br />&lt;/div&gt;<br /><br />&lt;style&gt;<br /><br />body {<br />  padding-left: 30%;<br />  padding-top: 5%;<br />}<br /><br />.container {<br />  width: 200px;<br />  height: 200px;<br />  position: relative;<br />  -webkit-perspective: 1000px;<br />  -moz-perspective: 1000px;<br />}<br /><br />#cube {<br />  width: 100%;<br />  height: 100%;<br />  position: absolute;<br />  -webkit-transform-style: preserve-3d;<br />  -webkit-animation: rotatecube 10s infinite;<br /><br />  -moz-transform-style: preserve-3d;<br />  -moz-animation: rotatecube 10s infinite;<br />}<br /><br />#cube div {<br />  width: 200px;<br />  height: 200px;<br />  display: block;<br />  position: absolute;<br />  border: none;<br />  line-height: 200px;<br />  text-align: center;<br />  font-size: 50px;<br /> font-weight: bold;<br />}<br /><br />@-webkit-keyframes rotatecube {<br />  0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }<br />  25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }<br />  50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }<br />  75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }<br />  100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }<br />}<br /><br />@-moz-keyframes rotatecube {<br />  0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }<br />  25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }<br />  50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }<br />  75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }<br />  100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }<br />}<br /><br />.front {<br />  background: rgba(255,0,0,.5);<br />}<br /><br />.back {<br />  background: rgba(0,255,0,.5);<br />}<br /><br />.right {<br />  background: rgba(0,0,255,.5);<br />}<br /><br />.left {<br />  background: rgba(0,255,255,.5);<br />}<br /><br />.top {<br />  background: rgba(255,0,255,.5);<br />}<br /><br />.bottom {<br />  background: rgba(255,255,0,.5);<br />}<br /><br />#cube .front  {<br />  -webkit-transform: rotateY(0deg ) translateZ( 100px );<br />  -moz-transform: rotateY( 0deg ) translateZ( 100px );<br />}<br />#cube .back {<br />  -webkit-transform: rotateX( 180deg ) translateZ( 100px );<br />  -moz-transform: rotateX( 180deg ) translateZ( 100px );<br />}<br />#cube .right  {<br />  -webkit-transform: rotateY(  90deg ) translateZ( 100px );<br />  -moz-transform: rotateY(  90deg ) translateZ( 100px );<br />}<br />#cube .left   {<br />  -webkit-transform: rotateY( -90deg ) translateZ( 100px );<br />  -moz-transform: rotateY( -90deg ) translateZ( 100px );<br />}<br />#cube .top    {<br />  -webkit-transform: rotateX(  90deg ) translateZ( 100px );<br />  -moz-transform: rotateX(  90deg ) translateZ( 100px );<br />}<br />#cube .bottom {<br />  -webkit-transform: rotateX( -90deg ) translateZ( 100px );<br />  -moz-transform: rotateX( -90deg ) translateZ( 100px );<br />}<br /><br />&lt;/style&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;

Answered by Anonymous
1

[tex]<!DOCTYPE html>

<html>

<head>

<title>Cute Doraemon </title>

<style>body {

background-color:#191149;

}

.face{

height:300px;

width:300px;

background-color:#42bff4;

border-radius:50%;

position:absolute ;

left:30px;

top:30px;

border-bottom:10px solid red;

}

.iface{

height:250px;

width:250px;

background-color:#fff;

border-radius:50%;

position:absolute ;

left:25px;

border:0.5px solid black;

top:50px;

}

.eye1{

height:70px;

width:60px;

background-color:#fff;

border-radius:50px;

position:absolute ;

left:55px;

top:-20px;

border:0.5px solid black;

}

.eye2{

height:70px;

width:60px;

background-color:#fff;

border-radius:50px;

position:absolute ;

left:115px;

top:-20px;

border:0.5px solid black;

}

.eb1{

height:25px;

width:22px;

background-color:#000;

border-radius:12px;

position:absolute ;

left:20px;

top:15px;

border:0.5px solid black;

}

.eb2{

height:25px;

width:22px;

background-color:#000;

border-radius:20px;

position:absolute ;

left:5px;

top:15px;

border:0.5px solid black;

}

.w1,.w2{

height:12px;

width:12px;

background-color:#fff;

position:absolute ;

border-radius:6px;

}

.w1{

left:3px;

top:4px;

}

.w2{

left:3px;

top:4px;

}

.nose{

background-color:red;

height:40px;

width:40px;

border-radius:20px;

position:absolute ;

left:96px;

top:42px;

}

.w3{

height:10px;

width:10px;

background-color:#fff;

border-radius:50%;

position:absolute ;

top:10px;

left:10px;

}

.l1{

height:50px;

background:transparent ;

width:1px;

border-left:1px solid black;

position:absolute ;

left:115px;

top:80px;

}

.mouth{

background-color:#f00;

height:80px;

width:160px;

border-bottom-left-radius:90px;

border-bottom-right-radius:90px;

display:inline-block ;

position:absolute ;

left:47px;

top:130px;

}

.b1{

background:transparent ;

height:1px;

width:60px;

border-top:1px solid black;

transform:rotateZ(20deg);

position:absolute ;

left:35px;

top:70px;

}

.b2{

background:transparent ;

height:1px;

width:65px;

border-top:1px solid black;

position:absolute ;

left:30px;

top:90px;

}

.b3{

background:transparent ;

height:1px;

width:60px;

border-top:1px solid black;

transform:rotateZ(-20deg);

position:absolute ;

left:35px;

top:110px;

}

.b4{

background:transparent ;

height:1px;

width:60px;

border-top:1px solid black;

transform:rotateZ(-20deg);

position:absolute ;

left:135px;

top:70px;

}

.b5{

background:transparent ;

height:1px;

width:65px;

border-top:1px solid black;

position:absolute ;

left:135px;

top:90px;

}

.b6{

background:transparent ;

height:1px;

width:60px;

border-top:1px solid black;

transform:rotateZ(20deg);

position:absolute ;

left:135px;

top:110px;

}

.t1{

background-color:#ff8542;

height:45px;

width:90px;

border-bottom-left-radius:90px;

border-bottom-right-radius:90px;

position:absolute ;

left:35px;

top:35px;

}

.t2{

background-color:#ff8542;

height:25px;

width:50px;

border-top-left-radius:50px;

border-top-right-radius:50px;

position:absolute ;

top:18px;

left:35px;

}

.t3{

background-color:#ff8542;

height:25px;

width:50px;

border-top-left-radius:50px;

border-top-right-radius:50px;

position:absolute ;

top:18px;

left:75px;

}

.bell{

background-color:#ff0 ;

height:40px;

width:40px;

position:absolute ;

border-radius:50%;

border:0.1px solid black;

left:165px;

top:335px;

}

.bellrec{

background-color:#ff0;

height:5px;

width:45px;

border-radius:10px;

border:0.1px solid black;

position:absolute ;

top:8px;

left:-3px;

}

.bellcir{

background-color:#444;

height:10px;

width:10px;

border-radius:50%;

position:absolute ;

left:15px;

top:17px;

}

.l2{

background-color:transparent ;

height:15px;

width:1px;

border-left:1px solid black;

position:absolute ;

left:20px;

top:25px;

}

.doratext{

font-size:50px;

position:relative ;

text-align:center;

top:400px;

color:#fff;

}</style>

</head>

<body>

<div class="doraemon">

<div class="face">

<div class="iface">

<div class="eye1">

<div class="eb1">

<div class="w1"></div>

</div>

</div>

<div class="eye2">

<div class="eb2">

<div class="w2"></div>

</div>

</div>

<div class="nose">

<div class="w3"></div>

</div>

<div class="l1"></div>

<div class="b1"></div>

<div class="b2"></div>

<div class="b3"></div>

<div class="b4"></div>

<div class="b5"></div>

<div class="b6"></div>

<div class="mouth">

<div class="tongue">

<div class="t1"></div>

<div class="t2"></div>

<div class="t3"></div>

</div>

</div>

</div>

</div>

<div class="bell">

<div class="bellrec"></div>

<div class="bellcir"></div>

<div class="l2"></div>

</div>

</div>

<div class="doratext"><marquee><b><i><font color="42bff4">Hello</div>

</body>[/tx]

fill 'e' between [tx]

Similar questions