5 CSS Pinterest Login Page Examples

This post contains a total of 5 Hand-Picked CSS Pinterest Login Page Examples with Source Code. All these Pinterest Login Pages are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Pinterest Login Page Examples

1. By Rod Pride

Made by Rod Pride. A simple Pinterest Login page UI made using CSS. Source

Css Pinterest login Page by Rod Pride
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style>
body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
  background: #a90329;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}


/* BOX POSITIONING */

.login {
  margin: 0 auto;
  margin-top: 50px;
}


/* BOX SIZE */

.login {
  width: 400px;
  height: 500px;
  background-color: #DEE5E5;
}


/* BOX SHADOW */

.login {
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
}

.input-group {
  width: 300px;
  padding-bottom: 10px;
  margin: auto
}

.pinlogo {
  width: 75px;
  padding-bottom: 30px;
  padding-top: 30px;
}

.login-title {
  padding-top: 50px;
}

.login-center {
  text-align: center;
}

.btn-group {
  padding-top: 5px;
}

.red {
  margin-right: 10px;
}

.terms {
  padding-top: 15px;
  font-size: .85em;
}

a,
a:hover {
  text-decoration: none;
}
</style>
</head>
<body translate="no" >
  <div class="login">
  <div class="login-center">
    <div class="login-content">
      <h3 class="login-title">PINTEREST LOGIN</h3>
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Pinterest-logo.png" class="pinlogo">
    </div>
    <div class="input-group input-group-sm">
      <span class="input-group-addon" id="basic-addon1">USERNAME</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    <div class="input-group input-group-sm">
      <span class="input-group-addon" id="basic-addon1">PASSWORD</span>
      <input type="password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-danger red">Submit</button>
      <button type="button" class="btn btn-primary blue">Sign Up</button>
    </div>
    <p class="terms">Creating an account means you’re okay with</br> Pinterest's Terms of Service, <a href="#">Privacy Policy</a></p>
  </div>
</div>
</body>
</html>

2. By Carlos Torres

Made by Carlos Torres. Pinterest Sign Up page Clone. Source

Css Pinterest login Page by Carlos Torres
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color: #000;
    background:
  url('https://i.ibb.co/MCtqGk7/pinterest-bg.png');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
    
.form {
  border-radius: 10px;
  padding: 7px;
  width: 190px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.buttonG {
  background-color: #FFFFFF;  
  width: 210px;
  border-radius: 20px;
  padding: 6px;
  font-size: 13px;
  line-height: 20px;
  height: 35px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.buttonF {
    background-color: rgb(24, 119, 242);
    width: 210px;
    border-radius: 20px;
    padding: 7px;
    font-size: 13px;
    line-height: 20px;
    height: 35px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.buttonP {
    background-color: #D01212;
    width: 210px;
    border-radius: 20px;
    padding: 7px;
    font-size: 13px;
    line-height: 20px;
    height: 35px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

a {
    color: #FFFFFF;
    text-decoration:none;
}

.space {
    padding: 4px;
    line-height: 20px;
}

.spacef {
    padding: 10px;
    line-height: 20px;
    background-color: #e5e5e5;
}

.box {
    padding: 5px;
    line-height: 20px;
}

.space0 {
    line-height: 10px;
}

table{
	border-radius: 10px;
	border-style: solid;
	border-color: #f2f2f2;
	border-width: 1px;
	background-color: #FFFFFF;
}
</style>
</head>
<body>
  <html>
  <head>
    <title>Pinterest</title>
  </head>
  <body>
    <table cellspacing="0" border="0" align="center" width="380">
      <tr>
        <td class="">&nbsp;</td>
      </tr>
      <tr>
        <td align="center"><img src="https://graffica.info/wp-content/uploads/2017/08/badgeRGB.png" width="30"></td>
      </tr>
      <tr>
        <td align="center"><font size="5"><b>Welcome to Pinterest</b></font></td>
      </tr>
      <tr>
        <td align="center"><font size="2">Find new ideas to try</font></td>
      </tr>
      <tr>
        <td class="space">&nbsp;</td>
      </tr>
      <tr>
        <td class="box" align="center"><input class="form" type="text" placeholder="Email"></td>
      </tr>
      <tr>
        <td class="box" align="center"><input class="form" type="password" placeholder="Create a password" autocomplete="off"></td>
      </tr>
      <tr>
        <td class="box" align="center"><input class="form" type="number" placeholder="Age" min="1" max="100"></td>
      </tr>
      <tr>
 <td class="box" align="center"><button class="buttonP" type="submit"><a href=""><b> Continue</a></b></button></td>
      </tr>
      <tr>
        <td align="center"><font size="1"><b>OR</b></font></td>
      </tr>
      <tr>
        <td class="box" align="center"><button class="buttonF" type="submit"><img src="https://vuela.tag.com.gt/hubfs/Iconos-Redes-Sociales/facebook-round-white.png" width="15" alt="icon-facebook" align="left"><a href="#"><b> Continue with Facebook</a></b></button></td>
      </tr>
      <tr>
        <td class="box" align="center"><button class="buttonG" type="button"><img src="https://www.konfest.com/wp-content/uploads/2019/05/Konfest-PNG-JPG-Image-Pic-Photo-Free-Download-Royalty-Unlimited-clip-art-sticker-icon-google-website-search-engine-information-company-logo-17.png" width="18" alt="x" align="left"><a href="#"><font color="#000000"><b>Continue with Google</b></font></button></td>
      </tr>
      <tr>
        <td>
          <table align="center" cellpadding="5" width="240">
            <tr>
        <td class="space0" align="center" cellpadding="0"><font size="1">By continuing you agree to Pinterest's <b><a href="" target="_blank"><font color="#000000">Terms of Service.</font></a><a href="#" target="_blank"><font color="#000000"> Privacy Policy</font></a></b></font></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="box" align="center"><a href="#"><font font size="1" color="#000000"><b>Already a member? Log in</b></font></a></td>
      </tr>
      <tr>
        <td class="spacef" align="center"><a href="#"><font size="2" color="#000000"><b>Create a business account</b></font></a></td>
    </tr>
     </table>
  </font>
</body>
</html>

3. By Parul

Made by Parul. Pinterest login page with Sign Up button. Source

Css Pinterest login Page by Parul
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: gray;
  font-family: Arial, Helvetica, sans-serif;
}
.container {
  background-color: white;
  width: 480px;
  height: 650px;
  position: absolute;
  margin: auto;
  top: 20%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  box-shadow: 2px 2px 3px -1px rgba(0, 0, 0, 0.5);
}
.content {
  width: 56%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
 
.img1{
  width: 70px;
  position: relative;
  top: 20px;
}
.header {
  font-size: 32px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 10px;
  line-height: 46px;
}
.detail {
  width: 100%;
  height: 48px;
  margin: 5px;
  padding: 15px;
  font-size: 15px;
  color: gray;
  border: 2px solid rgb(218, 214, 214);
  border-radius: 15px;
}
.detail:focus {
  box-shadow: 0px -7px 3px -2px rgba(15, 91, 231, 0.4),
    0px 7px 3px -2px rgba(15, 91, 231, 0.4),
    7px 0px 3px -2px rgba(15, 91, 231, 0.4),
    -7px 0px 3px -2px rgba(15, 91, 231, 0.4);
  outline: none;
}

h4 {
  font-size: 13px;
  font-weight: 700;
  position: relative;
  left: -60px;
  margin: 5px;
}

.btn {
  width: 100%;
  height: 40px;
  border: hidden;
  border-radius: 20px;
  font-size: 18px;
  margin: 5px 0px;
}

.int {
  background-color: #f30d19;
  margin: 10px 0px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.int:hover{
  background-color: #df0812;
}

.or {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0px;
}

.fbk {
  background-color: rgb(9, 128, 240);
  margin: 5px 0px;
  font-size: 16px;
  font-weight: 700;
}
.fbk a {
  text-decoration: none;
  color: white;
  text-align: center;
  letter-spacing: 1px;
}
.fbk:hover{
  background-color: rgb(8, 110, 206);
}
.ggl{
  text-align: center;
  background-color: #ccc;
}
.ggl a {
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}
.ggl:hover{
  background-color: #a0a0a0;
}

footer p {
  font-size: 12px;
  margin: 10px;
  opacity: 0.7;
}
p:last-child {
  opacity: 1;
}
hr {
  width: 50%;
  opacity: 0.4;
  margin-left: 25%;
}
.upbtn{
  position: relative;
  top: 50px;
  left: 140px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: 126px;
  padding: 11px 0px;
  background-color: rgb(241, 236, 236);
  border-radius: 20px;
}
</style>
</head>
<body>
  <div class="container">
      <div class="content">
        <!--pinterest logo-->
        <img src="https://i.pinimg.com/originals/d3/d1/75/d3d175e560ae133f1ed5cd4ec173751a.png" alt="pin logo" class="img1" />
        <p class="header">Log in to see more</p>

        <input type="email" placeholder="Email" class="detail" /><br />
        <input type="password" placeholder="Password" class="detail" />

        <h4>Forgot your password?</h4>

        <button class="btn int">Log in</button>
        <p class="or">OR</p>
        <button class="btn fbk">
          <i
            class="fab fa-facebook fa-lg"
            style="color: white; padding-right: 10px"
          ></i
          ><a href="#">Continue with Facebook</a></button
        ><br />
        <button class="btn ggl">
          <i
            class="fab fa-google"
            style="color: rgb(11, 241, 22); padding-right: 10px"
          ></i
          ><a href="#">Continue with Google</a>
        </button>

        <footer>
          <p>
            By continuing, you agree to Pinterest's
            <b>Terms of Service, Privacy policy.</b>
          </p>
          <hr />
          <p>Not on Pinterest yet? Sign up</p>
        </footer>
      </div>
    </div>
    <div class="upbtn">Sign up</div>
</body>
</html>

4. By Rochie

Made by Rochie. Very Basic CSS Pinterest Login Page Clone. Source

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title></title>             
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>   
    </head>
    <body>
   <img src="https://i.ibb.co/HYytBZs/Small-image-Diya.jpg" class="small_image_1">
   <img src="https://i.ibb.co/5s5dQYZ/Small-image-cake.jpg" class="small_image_2">
   <img src="https://i.ibb.co/vDfFBK4/Small-image-saree.jpg" class="small_image_3">
   <img src="https://i.ibb.co/P6KCCjD/Small-image-ornaments.jpg" class="small_image_4">
   <img src="https://i.ibb.co/hK6SWZq/Small-image-therapy.jpg" class="small_image_5">
   <img src="https://i.ibb.co/xqH5DLQ/Small-image-Honey.jpg" class="small_image_6">
   <img src="https://i.ibb.co/bHPvJcm/Small-image-dinner.jpg" class="small_image_7">
   <img src="https://i.ibb.co/zSQpZJ0/Small-image-cyberpunk.jpg" class="small_image_8">
   <img src="https://i.ibb.co/GHPBfGy/Kheer-food.jpg" class="small_image_9">
   <img src="https://i.ibb.co/vHZCQcY/Cyberpunk.jpg" class="small_image_10">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTSkhZmYIzf0v6HvvmpPjqgsqf79yaAAsUEg&usqp=CAU" class="small_image_11">
   <img src="https://i.ibb.co/HLZ37hy/Cyberpunk.png" class="small_image_12">
            <!-- fade effect -->
<img src="https://i.ibb.co/n1TGKMq/Fade-effect.png" class="fade">    
            <!-- logo setup -->
<img src="https://i.ibb.co/P5Ym2s8/Top-Logo.png"    class="top_logo">

<h1 class="welcome"> Welcome to Pinterest </h1>
            <!-- Login setup -->
     <div class="continue_by_email"> 
      <span> Continue with Email
       </span>
    </div>
      <img src="https://i.ibb.co/znSdkN8/Gmail-logo.png" class="email_logo">
    <div class="continue_by_fb">
      <span> Continue with Facebook
      </span> 
    </div>
    <img src="https://i.ibb.co/9WrpwBk/Facebook-logo.png" class="fb_logo">
    <div class="continue_by_G">
      <span> Continue with Google
      </span>
    </div>
    <img src="https://i.ibb.co/2N88FG4/Google-logo.png" class="G_logo">
    <h5> Already a member? Log in </h5>
    </body>
</html>

5. By Fredy Alas

Made by Fredy Alas. Pinterest login page with Header. Source

Css Pinterest login Page by Fredy Alas
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wapp">
      <div class="thh">
      <div class="aj">
      <div class="lot">
        <img class="logo" src="https://i.ibb.co/3zGwWNL/ico.png" alt="ff">
        <div class="text_wapp">
          <h2>Pinterest</h2>
          <small>Get the free app for more ideas</small>
        </div>
      </div>
      <div class="bwapp">
        <button type="button" name="button">Download</button>
      </div>
    </div>
  </div>
  </div>
    <div class="contenedor">
      <div class="login_facebook">
        <span class="logo_facebook">
            <img src="https://i.ibb.co/862T2TF/fc.png" alt="" class="lgtt cf">
        </span>
        <span class="text_facebbok">Continue with Facebook</span>
      </div>
      <div class="login_google">
        <span class="logo_google">
          <img src="https://i.ibb.co/w49pt27/go.png" alt="" class="lgtt">
        </span>
        <span class="text_google">Continue with Google</span>
      </div>
      <div class="or">
        <span>OR</span>
      </div>
      <div class="formulario">
        <form class="formulario_pinterest" action="index.html" method="post">
          <div class="correo">
            <input type="text" name="correo" value="" placeholder="Email">
          </div>
          <div class="pass">
            <input type="password" name="pass" value="" placeholder="Password">
          </div>
          <div class="otc">Forgot your password?</div>
          <div class="boton">
            <input type="submit" name="registro" value="Log in">
          </div>
        </form>
      </div>
      <div class="ceroreg">
        <div class="tgh">
          No Account? <a href="#">Sign up</a>
        </div>
        <div class="tgh">
          Are you a business? <a href="#">Get started hire!</a>
        </div>
      </div>
      <footer>
        <small>By continuing, you agree to Pinterest <strong> Terms of Service </strong>and <strong>Privacy policy</strong></small>
      </footer>
    </div>
  </body>
</html>