CodingStuffs

Crytocurrency - Digibytes

11.3667 - 10.112=1.254 -----> 1days p=-11.03%(Intraday Trading pata nhi abhi)

9-13 = 4 --->7days P=4 p=44.44%

6.51 - 12.69 = 6.18------> 30 days p=100%

2.29 - 12.21 = 9.92----> 3 months p=433.1877%

1.9191 - 10.07 = 8.1509 --------> YTD p=424.725%

1.6017 - 11.7284 = 10.1267 -----> 1 years p=632.2469%

speculation ----> jan -june (not always) ----> price Increases

----> after july decreases till end of december (Not always)

Historical Price (Starts)=0.000656$ = rs 0.0443

Date 11th Feb 2014 trading Days first

From the Day start profits is till now is after 8 years 27,642.611% Growths

That's means 100000 rs in digibytes return around 27426000 i.e approax 3 crores

Visibility and Z-Index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visibility and Z-Index</title>
</head>
<style>
.box{
    width: 150px;
    height: 150px;
    border: 2px solid black;
    border-radius: 10px;
}

#box1{
position: relative;
top: 120px;
    background-color: red;
}
#box2{position: relative;
z-index: -150px;
}
#box3{
position: relative;
z-index: 120px;
    background-color:green;
}
#box4{position: relative;
z-index: 120px;

    background-color:blue;
}

</style>
<body>
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
    <div class="box" id="box4"></div>
</body>
</html>

CSS variable and custom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS variable and custom </title>
</head>
<style>
    :root{
--primary-color:blue;
--secondary-color:green;
    }
.container{
border: 2px solid red;
display: flex;
height: 900px;
width: 700px;
background-color: var(--secondary-color);
flex-direction: column;
align-items: center;
}
.box{
border: 2px solid blue;
height: 250p;
width: 200px;
margin: 5px 5px;
padding: 5px 2px;
/* align-self: center; */
align-self: flex-end;
align-content: center;
background-color: var(--primary-color);
}


</style>
<body>
    <div class="container">
        <!-- <div class="box"></div> -->
        <div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
        <div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
        <div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
    </div>
</body>
</html>

Transition in css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition in css </title>
</head>
<style>
    body{
background-color: black;


    }
    
    
.box{color: white;
border: 2px solid white;
width: 250px;
height: 250px;
align-content: center;
background-color: red;
margin: 15px auto;

}
#box1{display: flex; 
text-align: center;
align-content: center;
justify-content: center;

align-items: center;
transition: background-color;
transition-property: all;
transition-duration: 2s;
transition-delay: 2s;
transition-timing-function: ease-in-out;
}

#box1:hover{
background-color:blue ;
border-radius: 15px;
height: 300px;
width: 300px;
font-size: 30px;

}



</style>
<body>

    <div class="container">

        <div class="box" id="box1">
            This is a Box1
        </div>
    </div>
    
</body>
</html>

Tranform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tranform</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;


}



.container{
background-color: chocolate;
width: 75vw;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;

}
.box{display: flex;
align-items: center;
justify-content: center;
    color: red;
border: 2px solid red;
width: 150px;
height: 150px;
background-color: yellowgreen;
transition: all 0.5s ease-in-out  ;
}
.box:hover{
transform: rotate(360deg);
transform: scale(3);
transform: translate(100px,150px);
transform: perspective(3);
transform: skew(40deg);
transform: matrix(20,25,35,25);
cursor: pointer;
background-color: yellow;

}



</style>
<body>
    <div class="container">

        <div class="box">
            This is transform box
        </div>
    </div>
</body>
</html>

selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>selector</title>
</head>
<style>
h1{
    border: 2px solid black;
    background-color: black;
    color: white;
    font-weight: bold;
}
div p{
    /* color: red; */
}
p{
    /* color:yellow */
}
div li p{
    /* color: blue; */
}
div>p{
    /* color: green; */
}
li<p{
    color: orange;
}


</style>
<body>
    <h1>This is head line</h1>
    <div class="container">
        <ul>
            <li>
                <p>This is inside li para</p>
                <p>This is inside li para</p>
            </li>
        </ul>
<div class="para"><p>This is frist para</p></div>
<div class="para"><p>This is second para</p></div>
<div class="para"><p>This is third para</p></div>

    </div>
    <p>This is outer para</p>
</body>
</html>

Responsive Design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design</title>
</head>
<style>
    html{
        font-size: 5px;
    }
.container{
    border: 2px solid black;
    text-align: center;
    /* font-size: 10px; */
    width: 100vw;
    height: 100vh;
}
#second{
font-size: 5rem;

}
#Third{
font-size: 5rem;
}
.para{
    border: 2px solid black;
}

</style>
<body>
    <div class="container">
        <h1 class="para"   id="first">This is First paragraph</h1>
        <h1 class="para"  id="second">This is second paragraph</h1>
        <h1 class="para"  id="Third">This is Third paragraph</h1>
    </div>
</body>
</html>

Thursday 27 May 2021