Khaitan

Khaitan

1605259803

CSS Loaders Tutorial - Flipping Squares

Hey gang, in this CSS loader tutorial I’ll show you how to create a flipping / walking square.

🐱‍💻 🐱‍💻 Course Files:

#css #web-development #programming #developer

What is GEEK

Buddha Community

CSS Loaders Tutorial - Flipping Squares
Raleigh Hayes

Raleigh Hayes

1626922800

Theme Switcher with CSS Variables - Tutorial

Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!

Useful Links:
GitHub: https://github.com/redhwannacef/youtube/tree/master/theme-switcher

#css variables #css #tutorial #css variables - tutorial #css theme switcher

Gavin Sserubiri

Gavin Sserubiri

1619706360

CSS Flexbox Tutorial in 30 Minutes | CSS Tutorial for Beginners

#css #tutorial #flexbox #css tutorial

hourly developer

hourly developer

1596530868

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

HTML CSS JAVASCRIPT

HTML CSS JAVASCRIPT

1662785198

Login and Registration Form in HTML and CSS

Learn How to Create a Responsive Login and Registration Form Template in HTML and CSS.

Source Code:

HTML CODE:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!--<title> Login and Registration Form in HTML & CSS </title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <!--<img src="images/frontImg.jpg" alt="">-->
        <div class="text">
          <span class="text-1">Every new friend is a <br> new adventure</span>
          <span class="text-2">Let's get connected</span>
        </div>
      </div>
      <div class="back">
        <!--<img class="backImg" src="images/backImg.jpg" alt="">-->
        <div class="text">
          <span class="text-1">Complete miles of journey <br> with one step</span>
          <span class="text-2">Let's get started</span>
        </div>
      </div>
    </div>
    <div class="forms">
        <div class="form-content">
          <div class="login-form">
            <div class="title">Login</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="text"><a href="#">Forgot password?</a></div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Don't have an account? <label for="flip">Sigup now</label></div>
            </div>
        </form>
      </div>
        <div class="signup-form">
          <div class="title">Signup</div>
        <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" placeholder="Enter your name" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
            </div>
      </form>
    </div>
    </div>
    </div>
  </div>
</body>
</html>

CSS CODE:

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
  padding: 30px;
}
.container{
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  perspective: 2700px;
}
.container .cover{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
  transform: rotateY(-180deg);
}
 .container .cover .front,
 .container .cover .back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #7d2ae8;
  opacity: 0.5;
  z-index: 12;
}
.container .cover::after{
  opacity: 0.3;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text{
  position: absolute;
  z-index: 130;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2{
  font-size: 15px;
  font-weight: 500;
}
.container .forms{
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #7d2ae8;
}
.forms .signup-form  .title:before{
  width: 20px;
}
.forms .form-content .input-boxes{
  margin-top: 30px;
}
.forms .form-content .input-box{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
  border-color: #7d2ae8;
}
.form-content .input-box i{
  position: absolute;
  color: #7d2ae8;
  font-size: 17px;
}
.forms .form-content .text{
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a{
  text-decoration: none;
}
.forms .form-content .text a:hover{
  text-decoration: underline;
}
.forms .form-content .button{
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input{
  color: #fff;
  background: #7d2ae8;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
  background: #5b13b9;
}
.forms .form-content label{
  color: #5b13b9;
  cursor: pointer;
}
.forms .form-content label:hover{
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
  text-align: center;
  margin-top: 25px;
}
.container #flip{
  display: none;
}
@media (max-width: 730px) {
  .container .cover{
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form{
    width: 100%;
  }
  .form-content .signup-form{
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form{
    display: block;
  }
  .container #flip:checked ~ .forms .login-form{
    display: none;
  }
}

Dowload Code File

Sekandi Hillary

Sekandi Hillary

1623809439

Position Layout property in CSS

Hello, World! In this article, we will try to grasp the concepts of one of the trickiest and crucial topics in CSS.

Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.

The widely used positions property in CSS are as follows:

1. Static position:

When an HTML element gets assigned with

staticposition, the various position properties likeleft,right,topandbottomdoesn’t work. Elements in an HTML document carry static position by default.

Let’s copy and paste the code below in an IDE to view what’s happening.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 200vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }

      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }

      #Div2 {
        position: static;
        left: 20px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

Upon adding position property

staticto the selector idDiv2, we saw that the position ofDiv2box didn’t change. Hence, we can conclude that elements with positionstaticdoesn’t get affected byleft, right,toporbottomproperties.

2. Relative position:

When an element gets assigned with position

relative, the position properties likeleft,right,top andbottomaffects the element’s position in the page relative to its normal position asstatic.

Let’s copy and paste the code below to

Div2selector to replace the previous position property.

#Div2 {
        position: relative;
        left: 20px;
        top: 50px;
      }

We can see that the

Div2box changed its position relative to its normal orstaticposition, i.e.20pxfrom theleftand50pxfrom thetop. Upon applyingrelativeposition property to an element, other contents in the same box won’t get affected and change positions

3. Fixed position:

This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply

fixedvalue to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from its actual position, becomes relative to the entire viewport, and doesn’t get scrolled.

Let’s copy and paste the code below to know the difference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 400vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }
      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      #Div2 {
        position: fixed;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

After scrolling, we can see that the id

Div2gets fixed in the topmost corner of the document.

4. Absolute position:

Just like

fixedposition, theabsoluteposition property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn’t regard it as its child anymore. The element becomes relative to the document.

#css #css3 #css-position-property #tutorials #learning-css #html-css