Crazy Cat Lady Application

Developer
Corinne Winthrop
Size
4,404 Kb
Views
12,144
  1. Crazy Cat Lady Application Previews
  2. Crazy Cat Lady Application HTML Codes
  3. Crazy Cat Lady Application CSS Codes
  4. Crazy Cat Lady Application JS Codes

How do I make an crazy cat lady application?

An app to keep track of all my cats.. What is a crazy cat lady application? How do you make a crazy cat lady application? This script and codes were developed by Corinne Winthrop on 24 December 2022, Saturday.

Crazy Cat Lady Application Previews
IQ Test

Crazy Cat Lady Application - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crazy Cat Lady Application</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cat-app"> <div class="cat-app__inner"> <div class="cat-app__info"> <img src="https://s3.amazonaws.com/btp-front-end-testing/logo.png" alt="Crazy Cat Lady Logo"> <p>Cat ipsum dolor sit amet, pounce on owner. Run at litter box at full speed sleep nap playing with balls of wool meow meow.</p> </div> <div class="cat-app__login"> <form class="form" action="#"> <div class="form__field"> <input autocomplete="off" type="text" id="username" name="username"> <label for="username"> <img src="https://s3.amazonaws.com/btp-front-end-testing/person-Icon.png" alt="Password Input field"> <p><span>Username</span></p> </label> </div> <div class="form__field"> <input autocomplete="off" type="password" id="pwd" name="pwd"> <label for="pwd"> <img src="https://s3.amazonaws.com/btp-front-end-testing/lock-icon.png" alt="Password Input field"> <p><span>Password</span></p> </label> </div> <button type="submit">Log in</button> </form> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Crazy Cat Lady Application - Script Codes CSS Codes

/*------------------------------------*\ ::Breakpoints
\*------------------------------------*/
/*------------------------------------*\ ::Media Queries
\*------------------------------------*/
/*------------------------------------*\ ::Colors
\*------------------------------------*/
/*------------------------------------*\ ::Layout
\*------------------------------------*/
/*------------------------------------*\ :: Global
\*------------------------------------*/
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #D1D6D0; font-family: Arial; font-size: 18px;
}
*, *:before, *:after { box-sizing: border-box;
}
/*------------------------------------*\ :: Main Body
\*------------------------------------*/
.cat-app { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 100%; min-height: 100%; background: url("https://s3.amazonaws.com/btp-front-end-testing/cats.jpg") center center no-repeat; background-size: cover;
}
.cat-app:after { content: ''; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; background-color: white; opacity: 0.75;
}
.cat-app__inner { position: relative; z-index: 20; max-width: 1000px; margin: auto; padding: 0.9375rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.cat-app__inner > div { width: 40%; margin: 0.9375rem 3%;
}
@media only screen and (max-width: 800px) { .cat-app__inner > div { width: 100%; }
}
@media only screen and (max-width: 800px) { .cat-app__inner { -ms-flex-wrap: wrap; flex-wrap: wrap; }
}
.cat-app__info { line-height: 1.5;
}
.cat-app__info img { display: block; margin-bottom: 1.875rem;
}
@media only screen and (max-width: 800px) { .cat-app__info img { margin: 0 auto 1.875rem; }
}
.cat-app__info p { max-width: 500px; margin: auto;
}
.cat-app__login { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
/*------------------------------------*\ :: Form
\*------------------------------------*/
.form { width: 100%; max-width: 280px; margin: auto;
}
.form__field { position: relative; margin: 0.9375rem 0;
}
.form label { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding: 0.9375rem; border-radius: 5px; box-shadow: inset 0 3px 2px -1px #dddddd; background-color: white;
}
.form label img, .form label p { display: inline-block; vertical-align: middle; margin: 0; opacity: 0.25; -webkit-transition: 200ms; transition: 200ms;
}
.form label p { position: relative; overflow: hidden; margin-left: 10px;
}
.form label p:before { content: ""; position: absolute; top: -5px; bottom: -5px; left: 0; width: 1px; background-color: black;
}
.form label span { display: block; padding-left: 10px; -webkit-transition: 200ms; transition: 200ms;
}
.form input { width: 100%; padding: 0.9375rem 0.9375rem 0.9375rem 3.75rem; background-color: transparent; border: none;
}
.form input:hover + label img, .form input:hover + label p { opacity: 1;
}
.form input.filled, .form input:focus { outline-color: #ef4c87;
}
.form input.filled + label img, .form input.filled + label p, .form input:focus + label img, .form input:focus + label p { opacity: 1;
}
.form input.filled + label span, .form input:focus + label span { text-indent: -120%;
}
.form button { width: 100%; margin: 0.9375rem 0; padding: 1.40625rem 0.9375rem; background-color: black; color: #ef4c87; font-weight: bold; text-transform: uppercase; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; -webkit-transition: 200ms; transition: 200ms;
}
.form button:hover { color: black; background-color: #ef4c87;
}

Crazy Cat Lady Application - Script Codes JS Codes

/*-----------------------------------------*\	::Log In Form
\*-----------------------------------------*/
var emptyFields = function(){	$('.form__field input').focusout(function(){ var $this = $(this);	if( $this.val().length > 0 ) { $this.addClass('filled');	} else { $this.removeClass('filled');	}	});
};
jQuery(function($){	emptyFields();
});
Crazy Cat Lady Application - Script Codes
Crazy Cat Lady Application - Script Codes
Home Page Home
Developer Corinne Winthrop
Username cwint
Uploaded December 24, 2022
Rating 3
Size 4,404 Kb
Views 12,144
Do you need developer help for Crazy Cat Lady Application?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Corinne Winthrop (cwint) Script Codes
Name
Image tiling
Zenman Front-End Dev interview homework
VUE
Responsive Image Tiling
Email obfuscation test
Tic Tac Code
Pinned scrolling sections
Responsive image sizes
Another animated SVG sequence
Cat vs Mouse
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!