Creating a Responsive Flip Profile card Using HTML CSS.

0




Hello developers, The code you provided is a HTML and CSS code for a flip profile card with a form at the back. The card has a front and a back, and when you hover over the card, it flips to reveal the back of the card. The front of the card has an image, name, job title, and a credit link, while the back of the card has a form for entering name, email, and message, as well as social media icons. The HTML code includes the basic structure of an HTML document, with a head section for linking to external resources and a body section for the content of the page. The CSS code defines the styles for the flip profile card, including the layout, colors, fonts, and animations. Overall, the code is well-structured and easy to understand, with clear class names and comments for each section. It uses modern web technologies like flexbox, gradients, and Google Fonts to create an attractive and responsive design.

Creating a Responsive Flip Profile card Using HTML CSS.[Source Code]

To make this website, you would like to make Two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flip Profile Card</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="flip-container"> <div class="flip-inner-container"> <div class="flip-front"> <div class="profile-image1"> </div> <h3>Haina</h3> <h6>Graphic Designier<br>Cartoon Artist</h6> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> <div class="flip-back"> <h2>Learning robo</h2> <form> <input type="text" placeholder="Your name"> <input type="text" placeholder="Your email"> <textarea placeholder="Your message" rows="5"></textarea> <input type="submit" value="Send"> </form> <div class="social-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
*{
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.flip-container{
 
  width: 350px;
  height:450px;
  background-color:transparent;
  border-radius: 10px;
  perspective: 1200px;
}

/* Flip Inner Container */
.flip-inner-container{
  position: relative;
  width: 100%;
  height: 95%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  

}
/* add hover to Flip horizonally */
.flip-container:hover .flip-inner-container{
  transform: rotateY(180deg);
}

/* position front and back */

.flip-front,
.flip-back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* background-color: green; */
  border-radius: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* flip  front from Start Here */
.flip-front{
  background: #56CCF2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
color: #ffffff;
padding: 20px;
}

.flip-front .profile-image1{
  background-image: url("https://cdn.pixabay.com/photo/2016/11/29/09/29/woman-1868717__480.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 200px;  
  border-radius:50%;
  margin: auto;
  margin-top: 20px;
}

.flip-front h3{
  margin-top: 10px;
  font-size: 80px;
  font-family: 'Italianno', cursive;
  color: #000000;
}

.flip-front h6{
  font-weight: 900;
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000000;
  font-family: 'Lilita One', cursive;
  
}
/* flip back from Start Here */
.flip-back{
  background: #56CCF2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2F80ED, #56CCF2);

  transform: rotateY(180deg);
padding: 20px;
}

.flip-back form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flip-back form input[type="text"], .back form textarea {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  width: 90%;
  background: linear-gradient(to right, #434343, #000000); 
  color:#ffffff;
}
.flip-back form input[type="submit"] {
  background: linear-gradient(to left, #434343, #000000); 
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  width: 100px;
  cursor: pointer;
  margin-top: 10px;
}
textarea {
  font-size: 16px;
  line-height: 1.5;
  padding: 10px;
  border:none; 
  border-radius: 20px; 
  width: 90%;
  color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right, #434343, #000000); 
}
.flip-back form input[type="submit"]:hover {
  background: linear-gradient(to right, #434343, #000000); 
}
.flip-back .social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.flip-back .social-icons a {
  margin-right: 10px;
  color: #fff;
  font-size: 20px;
  padding:10px;
  width: 30px;
  height:30px;
  font-size: 30px;
  border-radius:50%;
  background-color: #000000;
}

.credit a {
  text-decoration: none;
  color: #fff;
  font-weight: 800;
}

.credit {
    color: #fff;
  text-align: center;
  margin-top: 10px;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Creating a Responsive Flip Profile card Using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive Flip Profile card Using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome