Coding.html

Web designing

Global Family

You can learn everything is here with Share.C

Our Amazing Team

Welcome back guys learn something new.

Web Design HTML

Click Me

Learn HTML

Here you can learn web designing course for free and you are responsible to pratice more time .

Web Design CSS

Click Me

Learn Css

Here you can learn web designing course for free and you are responsible to pratice more time .

Web Design

Click Me

Learn JS

Here you can learn web designing course for free and you are responsible to pratice more time .

Copy the code from the box

Note:Copy the html part between body tag,after that copy css between style tag.In case of image you give img location.

img{
  width: 30px;
  height: 30px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  background: #f2f2f2;
  text-align: center;
  font-size: 12px;
  
}
.wraper{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
 /*margin: 20px 10px;*/
  
}
.wraper .box {
  width: 250px;
  height: 140px;
  position: relative;
  margin:10px 5px;
  overflow: hidden;
  box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.1);
}

.wraper .box .front-face,.back-face {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
}
.front-face img,.front-face span,.back-face span{
  background: linear-gradient(-135deg,#3C4BED,red,cyan);
  -webkit-background-clip: text;
  font-size: 20px;
  text-align: center;
}
.front-face p{ 
  font-size:12px;
  color:blue;
}
.back-face{
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 900;
  width: 100%;
  height: 100%;
  padding: px;
  margin: 3px;
  z-index: 1;
  text-align: center;
  padding: 2px;
  color:dimgrey;
  background-visibility:hidden;
  opacity: 1;
  background:#fff;
  background-size: cover;
  transition:.5s;
  
  transform: translateY(110px) rotateX(-90deg);
}
.box:hover .back-face{
  transform:rotatex(0);
  opacity: 1;
}

@media screen and (max-width:480px){
  
.wraper{
  flex-direction: column;
  margin-top: 0px;
}
.box{
  margin-top: 30px;
}
} 
      
       <div class="wraper">
    <div class="box">
      <div class="front-face">
        <img src="./images/html.jpg">
        <span>Web Design<br>
        <p>Click Me</p></span>
      </div>
      <div class="back-face">
        <span>Learn HTML</span>
        <p>Here you can learn web designing course for free and you are responsible to pratice more time . </p>
      </div>
    </div>
     <div class="box">
       <div class="front-face">
         <img src="featured-prev.png">
         <span>Web Design<br>
         <p>Click Me</p></span>
       </div>
       <div class="back-face">
         <span>Learn Css</span>
         <p>Here you can learn web designing course for free and you are responsible to pratice more time . </p>
       </div>
     </div>
      <div class="box">
        <div class="front-face">
          <img src="book.jpg">
          <span>Web Design<br>
          <p>Click Me</p></span>
        </div>
        <div class="back-face">
          <span>Learn JS</span>
          <p>Here you can learn web designing course for free and you are responsible to pratice more time . </p>
        </div>
      </div>
  </div>

Go Back

Creative Ecoding

Css animation

:root {
--navy:#0c0c4a;
--navy-dark:#060726;
--pink:rgba(213,84,213,1);
--pink2:rgba(213,84,213,0.7);
}
*::before,
*::after {
content:" ";
position:absolute;
}
*{
margin:0px;
padding:0px;
}
.mainoo{
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
body {
width:100vw;
min-width:900;
height:100vh;
min-height:800;
background:black;
color:white;
place-items:center;
filter:saturate(130%)contrast(125%);
}
#image{
overflow:hidden;
background:var(--navy);
width:80%;
height:55%;
display:grid;
grid:"top"60% "bottom" 80%;
position:relative;
border:8px solid;
border-color:darkmagenta magenta;
outline:8px solid cyan;
outline-offset:4px;
}
#top {
height:100%;
background:linear-gradient(transparent 50%,hotpink 100%);
position:relative;
box-shadow:0px 15px 25px 3px white;
}
#bottom {
position:absolute;
z-index:2;
width:100%;
height:100%;
background:linear-gradient(90deg,hotpink -60%,transparent 40%,transparent 60%,hotpink 140%);
bottom:-65px;
transform:perspective(500px)rotateX(65deg);
clip-path:polygon(0% 100%,0% 55%,100% 55%,100% 100%);
}
#ground {
position:absolute;
bottom:0;
width:100%;
height:65%;
background:repeating-linear-gradient(white 2px,transparent 3px,transparent 30px),repeating-linear-gradient(90deg,white 2px,transparent 3px,transparent 40px);
filter:drop-shadow(0 0 1px cyan)drop-shadow(0 0 3px cyan)drop-shadow(0 0 7px cyan)drop-shadow(0 0 70px cyan);
animation:move .1s linear infinite;
}
#text {
position:absolute;
width:100%;
height:100%;
top:0;
display:flex;
z-index:10;
flex-direction:column;
justify-content:center;
place-items:center;
text-align:center;
}
#text h1{
text-transform:uppercase;
font-family:"Russo One",sans-serif;
font-weight:800;
font-size:2.3rem;
transform:translatey(25deg);
background:linear-gradient(blue 30%,white,magenta 60%,cornflowerblue 100%);
color:transparent;
-webkit-background-clip:text;
-webkit-text-stroke:1px silver;
filter:drop-shadow(3px 3px 1px black)drop-shadow(1px 1px 1px magenta);
animation:bg-shift .01s ease-in-out infinite alternate;
}
h2 {
font-family:"yellowtails",cursive;
margin-top:3px;
transform:translatey(-10px)rotateZ(-5deg);
text-shadow:0px 0px 3px magenta,0px 0px 3px magenta,0px 0px 15px black,0px 0px 15px black;
animation:hover .001s ease-in-out infinite;
}
@keyframes move{
to{
background-position:800000vw;
}
}
@keyframes bg-shift {
0% {
background-position:0px -25px;
}
100% {
background-position:0px  25px;
}
}
@keyframes hover {
0% {
transform:translatey(-10px)rotatez(-5deg)perspective(200px)translateZ(0);
}
100% {
transform:translatey(-10px)rotatez(-5deg)perspective(200px)translateZ(0);
}
}

<div class="mainoo">
<div id="image">
<div id="top"> 
 <div id="sky">  </div>
 </div>
<div id="bottom"> 
<div id="ground">  </div>
</div>
<div id="text">
<h1 class="dev">CurelyWebDev</h1>
<h2 class="Cssani dev">Css animation</h2>
</div>

</div>
</div>

Demo-1

Sign Up

Name

Choose your gmail ID

Create password

Conform password

<form>
    <h2 align="center">Sign Up </h2>
<div class="form">
<label>Name
</label>
<br>
<input type="text" placeholder="First name">
<input type="text" placeholder="Last name">
<br>
<label>Choose your gmail ID</label><br>
<input type="text" placeholder="abc@gmail.com">
<br>
<label>Create password</label>
<br>
<input type="text" placeholder="Create password">
<br>
<label>Conform password</label>
<br>
<input type="text" placeholder="Confirm password">
<br>
<select value="Gender">
<option>Sunday</option>
<option>Monday</option>
<option>Tue</option>
<option>wed</option>
<option>Thu</option>
<option>Fri</option>
<option>Sat</option>
</select>
<input type="text" placeholder="month" class="short">

</div>
<div>
  <button type="submit">Submit</button>
</div>
</form>

   :root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI"
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"
}
form{
background:#e9ecef;
height:90vh;
padding:20px;
position:relative;

border-radius: 9px;
box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.1);
}
h2{
  margin: 0;
  padding: 0;
  color:var(--dark);
}
input{
margin:10px;
width:280px;
height:5vh;
border-radius: 3px;
background: #fff;
outline: none;
border: none;
}
.short{
width:82.5px;
height:2.5vh;
}
option{
  text-align: center;
  color:#fff;
}
input[type="text"]{
  text-align: left;
  padding: 5px;
}
input:focus{
  border-color: darkcyan;
  border-radius: 3px;
  background: #fff;
  outline: none;
  border: 1px inset darkcyan;
}
button{
  color: var(--light);
  background: var(--info);
  border: 0;
  width: auto; 
  height: auto;
  padding: 10px;
  float: right;
  border-radius: 4px;
  margin-right: 10px;
  border: 1.5px outset white;
}

Search This Blog

ECODING

Coding.html

Global Family

Our Amazing Team

Copy the code from the box

Creative Ecoding

Css animation

Demo-1

Sign Up

Comments

Post a Comment

Popular Posts

Style.css

Coding.html

Global Family

Our Amazing Team

Mr.Prince Kumar

Arbind Mandal

Sunil Mehra

Welcome back

Copy the code from the box

Creative Ecoding

Css animation

Demo-1

Sign Up

Comments

Post a Comment

Popular Posts

Style.css