Thursday, 12 January 2023

Flat HTML5/CSS3 Login Form

Written by codekeys on January 12, 2023 with No comments

HML CODE

<button>create</button>

<p class="message">Already registered? <a href="#">Sign In</a></p>

</form>

<button>login</button>

<p class="message">Not registered? <a href="#">Create an account</a></p>

</form>

</div>

CSS CODE

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {

width: 360px;

padding: 8% 0 0;

margin: auto;

}

.form {

position: relative;

z-index: 1;

background: #FFFFFF;

max-width: 360px;

margin: 0 auto 100px;

padding: 45px;

text-align: center;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}

.form input {

font-family: "Roboto", sans-serif;

outline: 0;

background: #f2f2f2;

width: 100%;

border: 0;

margin: 0 0 15px;

padding: 15px;

box-sizing: border-box;

font-size: 14px;

}

.form button {

font-family: "Roboto", sans-serif;

text-transform: uppercase;

outline: 0;

background: #4CAF50;

width: 100%;

border: 0;

padding: 15px;

color: #FFFFFF;

font-size: 14px;

-webkit-transition: all 0.3 ease;

transition: all 0.3 ease;

cursor: pointer;

}

.form button:hover,.form button:active,.form button:focus {

background: #43A047;

}

.form .message {

margin: 15px 0 0;

color: #b3b3b3;

font-size: 12px;

}

.form .message a {

color: #4CAF50;

text-decoration: none;

}

.form .register-form {

display: none;

}

.container {

position: relative;

z-index: 1;

max-width: 300px;

margin: 0 auto;

}

.container:before, .container:after {

content: "";

display: block;

clear: both;

}

.container .info {

margin: 50px auto;

text-align: center;

}

.container .info h1 {

margin: 0 0 15px;

padding: 0;

font-size: 36px;

font-weight: 300;

color: #1a1a1a;

}

.container .info span {

color: #4d4d4d;

font-size: 12px;

}

.container .info span a {

color: #000000;

text-decoration: none;

}

.container .info span .fa {

color: #EF3B3A;

}

body {

background: #76b852; /* fallback for old browsers */

background: rgb(141,194,111);

background: linear-gradient(90deg, rgba(141,194,111,1) 0%, rgba(118,184,82,1) 50%);

font-family: "Roboto", sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

JS CODE

$('.message a').click(function(){

$('form').animate({height: "toggle", opacity: "toggle"}, "slow");

});

Simple Signup Page HTML

Written by codekeys on January 12, 2023 with No comments

HTML CODE

<!DOCTYPE html>

<html>

<head>

<title>Singup</title>

</head>

<body>

<h1>Singup</h1>

</form>

</body>

</html>

CSS CODE

* {

padding: 0px;

margin: 0px;

}

body {

width: 25%;

margin: 0 auto;

background-color: #007bff;

margin-top: 10%;

border: 2px solid #fff;

border-radius: 10px;

}

h1 {

text-align: center;

color: #fff;

margin-top: 10%;

}

input {

width: 70%;

display: block;

padding: 10px;

margin: 10px auto;

border-color: transparent;

border-radius: 10px;

margin-top: 10%;

}

.login {

margin-bottom: 10%;

width: 50%;

background-color: transparent;

border: 2px solid #fff;

color: #fff;

}

.login:hover {

background-color: #00356d;

transition: all 0.5s;

cursor: pointer;

}

Signup Page HTML

Written by codekeys on January 12, 2023 with No comments

HTMLCODE

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>

<form>

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

</form>

</div>

</body>

CSS CODE

body{

margin:0 auto;

background-image:url(https://images.pexels.com/photos/33582/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&h=350);

background-repeat: no-repeat;

background-size: cover;

opacity:0.8;

}

.box{

width:400px;

height:480px;

background: #400080;

margin-top:100px;

margin-left: 420px;

opacity: 0.9;

text-align: center;

border-radius:5px;

}

.box h1{

color:white;

text-align: center;

font-size: 50px;

}

input[type="text"],input[type="email"],input[type="password"]{

width:300px;

height:30px;

margin-bottom: 25px;

font-size: 15px;

border:1px solid black;

padding-left: 45px;

}

.icon{

position: absolute;

padding-top: 8px;

margin-right: 15px;

width:45px;

}

button[type="submit"]{

background:green;

cursor: pointer;

width:150px;

height:35px;

border: 1px solid black;

font-size:20px;

color: white;

border-radius:20px;

}

Clean Simple Signup Page with Preloader HTML

Written by codekeys on January 12, 2023 with No comments

HTML CODE

<html>

<head>

</head>

<body>

<form>

</form>

</div>

</body>

</html>

CSS CODE

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f3f3f3;

color: #333;

font-family: sans-serif;

}

.container {

text-align: center;

max-width: 500px;

width: 100%;

padding: 32px;

box-sizing: border-box;

border-radius: 4px;

background-color: #f3f3f3;

display: none;

}

.preloader {

width: 50px;

height: 50px;

border: 5px solid #333;

border-radius: 50%;

border-top-color: transparent;

animation: spin 1s linear infinite;

}

@keyframes spin {

100% {

transform: rotate(360deg);

}

h1 {

font-size: 32px;

margin-bottom: 16px;

}

p {

font-size: 16px;

margin-bottom: 16px;

}

input[type="email"],

input[type="password"] {

display: block;

width: 100%;

padding: 8px 12px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 16px;

box-sizing: border-box;

margin-bottom: 16px;

background-color: #f3f3f3;

}

button {

display: block;

width: 100%;

padding: 8px 12px;

border: 1px solid #333;

border-radius: 4px;

background-color: #333;

color: #fff;

font-size: 16px;

cursor: pointer;

}

JS CODE

setTimeout(function () {

document.querySelector(".preloader").style.display = "none";

document.querySelector(".container").style.display = "block";

}, 1000);

UPLOAD BOX HTML

Written by codekeys on January 12, 2023 with No comments

HTML CODE

<h1>Drop file to upload</h1>

</div>

</div>

<button type="button" class="btn" name="uploadbutton">Upload file</button>

</div>

CSS (SCSS) CODE

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

border-radius: 2px;

box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);

overflow: hidden;

background: linear-gradient(to top right, darkmagenta 0%, hotpink 100%);

color: #333;

font-family: "Open Sans", Helvetica, sans-serif;

}

.center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

height: 260px;

border-radius: 3px;

box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.2);

background: #fff;

display: flex;

align-items: center;

justify-content: space-evenly;

flex-direction: column;

}

.title {

width: 100%;

height: 50px;

border-bottom: 1px solid #999;

text-align: center;

}

h1 {

font-size: 16px;

font-weight: 300;

color: #666;

}

.dropzone {

width: 100px;

height: 80px;

border: 1px dashed #999;

border-radius: 3px;

text-align: center;

}

.upload-icon {

margin: 25px 2px 2px 2px;

}

.upload-input {

position: relative;

top: -62px;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

}

.btn {

display: block;

width: 140px;

height: 40px;

background: darkmagenta;

color: #fff;

border-radius: 3px;

border: 0;

box-shadow: 0 3px 0 0 hotpink;

transition: all 0.3s ease-in-out;

font-size: 14px;

}

.btn:hover {

background: rebeccapurple;

box-shadow: 0 3px 0 0 deeppink;

}

Chat Box HTML

Written by codekeys on January 12, 2023 with No comments

HTML CODE

!doctype html>

<head>

</head>

<body>

<h4>Mehmet Mert</h4>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>

</div>

</div>

<hr>

<h5>Marco Biedermann</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

</div>

</div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

</div>

</div>

<hr>

</div>

<p class="chat-feedback">Yazıyor..</p>

</fieldset>

</form>

</div>

</div>

</body>

</html>

CSS CODE

@charset "utf-8";

/* CSS Document */

/* ---------- GENERAL ---------- */

body {

background: #e9e9e9;

color: #9a9a9a;

font: 100%/1.5em "Droid Sans", sans-serif;

margin: 0;

}

a { text-decoration: none; }

fieldset {

border: 0;

margin: 0;

padding: 0;

}

h4, h5 {

line-height: 1.5em;

margin: 0;

}

hr {

background: #e9e9e9;

border: 0;

-moz-box-sizing: content-box;

box-sizing: content-box;

height: 1px;

margin: 0;

min-height: 1px;

}

img {

border: 0;

display: block;

height: auto;

max-width: 100%;

}

input {

border: 0;

color: inherit;

font-family: inherit;

font-size: 100%;

line-height: normal;

margin: 0;

}

p { margin: 0; }

.clearfix { *zoom: 1; } /* For IE 6/7 */

.clearfix:before, .clearfix:after {

content: "";

display: table;

}

.clearfix:after { clear: both; }

/* ---------- LIVE-CHAT ---------- */

#live-chat {

bottom: 0;

font-size: 12px;

right: 24px;

position: fixed;

width: 300px;

}

#live-chat header {

background: #293239;

border-radius: 5px 5px 0 0;

color: #fff;

cursor: pointer;

padding: 16px 24px;

}

#live-chat h4:before {

background: #1a8a34;

border-radius: 50%;

content: "";

display: inline-block;

height: 8px;

margin: 0 8px 0 0;

width: 8px;

}

#live-chat h4 {

font-size: 12px;

}

#live-chat h5 {

font-size: 10px;

}

#live-chat form {

padding: 24px;

}

#live-chat input[type="text"] {

border: 1px solid #ccc;

border-radius: 3px;

padding: 8px;

outline: none;

width: 234px;

}

.chat-message-counter {

background: #e62727;

border: 1px solid #fff;

border-radius: 50%;

display: none;

font-size: 12px;

font-weight: bold;

height: 28px;

left: 0;

line-height: 28px;

margin: -15px 0 0 -15px;

position: absolute;

text-align: center;

top: 0;

width: 28px;

}

.chat-close {

background: #1b2126;

border-radius: 50%;

color: #fff;

display: block;

float: right;

font-size: 10px;

height: 16px;

line-height: 16px;

margin: 2px 0 0 0;

text-align: center;

width: 16px;

}

.chat {

background: #fff;

}

.chat-history {

height: 252px;

padding: 8px 24px;

overflow-y: scroll;

}

.chat-message {

margin: 16px 0;

}

.chat-message img {

border-radius: 50%;

float: left;

}

.chat-message-content {

margin-left: 56px;

}

.chat-time {

float: right;

font-size: 10px;

}

.chat-feedback {

font-style: italic;

margin: 0 0 0 80px;

}

JS CODE

(function() {

$('#live-chat header').on('click', function() {

$('.chat').slideToggle(300, 'swing');

$('.chat-message-counter').fadeToggle(300, 'swing');

});

$('.chat-close').on('click', function(e) {

e.preventDefault();

$('#live-chat').fadeOut(300);

});

}) ();

Chat Widget HTML

Written by codekeys on January 12, 2023 with No comments

HTML CODE

div class="container clearfix">

</div>

<div class="name">Vincent Porter</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

<div class="name">Aiden Chavez</div>

<i class="fa fa-circle offline"></i> left 7 mins ago

</div>

</li>

<div class="name">Mike Thomas</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

<div class="name">Erica Hughes</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

<div class="name">Ginger Johnston</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

<div class="name">Tracy Carpenter</div>

<i class="fa fa-circle offline"></i> left 30 mins ago

</div>

</li>

<div class="name">Christian Kelly</div>

<i class="fa fa-circle offline"></i> left 10 hours ago

</div>

</li>

<div class="name">Monica Ward</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

<div class="name">Dean Henry</div>

<i class="fa fa-circle offline"></i> offline since Oct 28

</div>

</li>

<div class="name">Peyton Mckinney</div>

<i class="fa fa-circle online"></i> online

</div>

</li>

</ul>

</div>

<div class="chat-with">Chat with Vincent Porter</div>

<div class="chat-num-messages">already 1 902 messages</div>

</div>

</div>

<ul>

<span class="message-data-time" >10:10 AM, Today</span>    

</div>

Hi Vincent, how are you? How is the project coming along?

</div>

</li>

<li>

<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>

<span class="message-data-time">10:12 AM, Today</span>

</div>

Are we meeting today? Project has been already finished and I have results to show you.

</div>

</li>

<span class="message-data-time" >10:14 AM, Today</span>    

</div>

Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?

</div>

</li>

<li>

<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>

<span class="message-data-time">10:20 AM, Today</span>

</div>

Actually everything was fine. I'm very excited to show this to our team.

</div>

</li>

<li>

<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>

<span class="message-data-time">10:31 AM, Today</span>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

<span class="message-data-time" >{{time}}, Today</span>    

</div>

</div>

</li>

</script>

<li>

<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>

<span class="message-data-time">{{time}}, Today</span>

</div>

</div>

</li>

</script>

CSS (SCSS) CODE

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

$green: #86BB71;

$blue: #94C2ED;

$orange: #E38968;

$gray: #92959E;

*, *:before, *:after {

box-sizing: border-box;

}

body {

background: #C5DDEB;

font: 14px/20px "Lato", Arial, sans-serif;

padding: 40px 0;

color: white;

}

.container {

margin: 0 auto;

width: 750px;

background: #444753;

border-radius: 5px;

}

.people-list {

width:260px;

float: left;

.search {

padding: 20px;

}

input {

border-radius: 3px;

border: none;

padding: 14px;

color: white;

background: #6A6C75;

width: 90%;

font-size: 14px;

}

.fa-search {

position: relative;

left: -25px;

}

ul {

padding: 20px;

height: 770px;

li {

padding-bottom: 20px;

}

img {

float: left;

}

.about {

float: left;

margin-top: 8px;

}

.about {

padding-left: 8px;

}

.status {

color: $gray;

}

.chat {

width: 490px;

float:left;

background: #F2F5F8;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

color: #434651;

.chat-header {

padding: 20px;

border-bottom: 2px solid white;

img {

float: left;

}

.chat-about {

float: left;

padding-left: 10px;

margin-top: 6px;

}

.chat-with {

font-weight: bold;

font-size: 16px;

}

.chat-num-messages {

color: $gray;

}

.fa-star {

float: right;

color: #D8DADF;

font-size: 20px;

margin-top: 12px;

}

.chat-history {

padding: 30px 30px 20px;

border-bottom: 2px solid white;

overflow-y: scroll;

height: 575px;

.message-data {

margin-bottom: 15px;

}

.message-data-time {

color: lighten($gray, 8%);

padding-left: 6px;

}

.message {

color: white;

padding: 18px 20px;

line-height: 26px;

font-size: 16px;

border-radius: 7px;

margin-bottom: 30px;

width: 90%;

position: relative;

&:after {

bottom: 100%;

left: 7%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-bottom-color: $green;

border-width: 10px;

margin-left: -10px;

}

.my-message {

background: $green;

}

.other-message {

background: $blue;

&:after {

border-bottom-color: $blue;

left: 93%;

}

.chat-message {

padding: 30px;

textarea {

width: 100%;

border: none;

padding: 10px 20px;

font: 14px/22px "Lato", Arial, sans-serif;

margin-bottom: 10px;

border-radius: 5px;

resize: none;

}

.fa-file-o, .fa-file-image-o {

font-size: 16px;

color: gray;

cursor: pointer;

}

button {

float: right;

color: $blue;

font-size: 16px;

text-transform: uppercase;

border: none;

cursor: pointer;

font-weight: bold;

background: #F2F5F8;

&:hover {

color: darken($blue, 7%);

}

.online, .offline, .me {

margin-right: 3px;

font-size: 10px;

}

.online {

color: $green;

}

.offline {

color: $orange;

}

.me {

color: $blue;

}

.align-left {

text-align: left;

}

.align-right {

text-align: right;

}

.float-right {

float: right;

}

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

JS CODE

(function(){

var chat = {

messageToSend: '',

messageResponses: [

'Why did the web developer leave the restaurant? Because of the table layout.',

'How do you comfort a JavaScript bug? You console it.',

'An SQL query enters a bar, approaches two tables and asks: "May I join you?"',

'What is the most used language in programming? Profanity.',

'What is the object-oriented way to become wealthy? Inheritance.',

'An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol'

init: function() {

this.cacheDOM();

this.bindEvents();

this.render();

cacheDOM: function() {

this.$chatHistory = $('.chat-history');

this.$button = $('button');

this.$textarea = $('#message-to-send');

this.$chatHistoryList = this.$chatHistory.find('ul');

bindEvents: function() {

this.$button.on('click', this.addMessage.bind(this));

this.$textarea.on('keyup', this.addMessageEnter.bind(this));

render: function() {

this.scrollToBottom();

if (this.messageToSend.trim() !== '') {

var template = Handlebars.compile( $("#message-template").html());

var context = {

messageOutput: this.messageToSend,

time: this.getCurrentTime()

};

this.$chatHistoryList.append(template(context));

this.scrollToBottom();

this.$textarea.val('');

// responses

var templateResponse = Handlebars.compile( $("#message-response-template").html());

var contextResponse = {

response: this.getRandomItem(this.messageResponses),

time: this.getCurrentTime()

};

setTimeout(function() {

this.$chatHistoryList.append(templateResponse(contextResponse));

this.scrollToBottom();

}.bind(this), 1500);

}

addMessage: function() {

this.messageToSend = this.$textarea.val()

this.render();

addMessageEnter: function(event) {

// enter was pressed

if (event.keyCode === 13) {

this.addMessage();

}

scrollToBottom: function() {

this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight);

getCurrentTime: function() {

return new Date().toLocaleTimeString().

replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");

getRandomItem: function(arr) {

return arr[Math.floor(Math.random()*arr.length)];

}

};

chat.init();

var searchFilter = {

options: { valueNames: ['name'] },

init: function() {

var userList = new List('people-list', this.options);

var noItems = $('<li id="no-items-found">No items found</li>');

userList.on('updated', function(list) {

if (list.matchingItems.length === 0) {

$(list.list).append(noItems);

} else {

noItems.detach();

}

});

}

};

searchFilter.init();

})();