A Pen by Salman Raza

Developer
Salman Raza
Size
8,050 Kb
Views
6,072
  1. A Pen by Salman Raza Previews
  2. A Pen by Salman Raza HTML Codes
  3. A Pen by Salman Raza CSS Codes
  4. A Pen by Salman Raza JS Codes

How do I make an a pen by salman raza?

What is a a pen by salman raza? How do you make a a pen by salman raza? This script and codes were developed by Salman Raza on 30 January 2023, Monday.

A Pen by Salman Raza Previews
IQ Test

A Pen by Salman Raza - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Salman Raza</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="main_cont">	<div class="msg_main_cnt">	<div class="new_msg_main_cnt collapse">	<header class="left">	<p class="left nw_msg_hdng">New Message</p>	<ul class="hdr_nav right">	<li class="minimize_li"></li>	<li class="collapse_window"></li>	<li class="close_li"></li>	</ul>	</header>	<div class="sb_header left">	<span class="left _to" id="_to">Recipients</span>	<span class="right cc_bcc" id="cc_bcc" style="display: none;">	<span class="cc" id="_cc">Cc</span>	<span class="bcc" id="_bcc">Bcc</span>	</span>	<div id="to_sndr_cnt" class="editable_div" contenteditable="true"></div>	</div>	<div class="left subject_cnt">	<input type="text" name="sbjct_hdng" id="sbjct_hdng" class="sbjct_hdng" placeholder="Subject">	</div>	<div class="mail_txt_main_cnt left">	<div class="mial_txt_cnt">	<div class="txt_editable_div" contenteditable="" style="min-height: 100%;">	</div>	<div class="upldd_data_cnt"></div>	</div>	</div>	<footer class="left">	<div class="txt_edt_cnt hide">	<div class="txt_edt_sb_cnt">	<div id="fnt_fmly_cnt" class="fnt_fmly_cnt left">	<span id="fnt_fmly_nm" class="fnt_fmly_nm">Sans Serif</span>	<div id="fnt_fmly_menu" class="fnt_fmly_menu">	<ul>	<li style="font-family: sans-serif;" class="sans_serif selected">Sans Serif</li>	<li style="font-family: serif;" class="serif">Serif</li>	<li style="font-family: "monospace", monospace;" class="fixed_width">Fixed Width</li>	<li style="font-family: "Arial black", sans-serif" class="wide">Wide</li>	<li style="font-family: "Arial narrow", sans-serif" class="narrow">Narrow</li>	<li style="font-family: "comic sans ms", sans-serif" class="comic_sans_ms">Comic Sans MS</li>	<li style="font-family: "garamond", serif" class="garamond">Garamond</li>	<li style="font-family: georgia, serif" class="geogia">Geogia</li>	<li style="font-family: "Tahoma", sans-serif" class="tahoma">Tahoma</li>	<li style="font-family: "trebuchet ms", sans-serif" class="trubochet_ms">Trubochet MS</li>	<li style="font-family: "Verdana", sans-serif" class="verdana">Verdana</li>	</ul>	</div>	</div>	<div id="txtT" class="fnt_fmly_cnt txtT left">	<div id="txtT_cnt" class="fnt_fmly_menu txtT_cnt">	<ul>	<li class="x_small">Small</li>	<li class="normal">Normal</li>	<li class="large">Large</li>	<li class="xx_large">Huge</li>	</ul>	</div>	</div>	<div class="fnt_styl_cnt left">	<ul>	<li id="bold" class="bold fnt_fmly_cnt_li"></li>	<li id="italic" class="italic fnt_fmly_cnt_li"></li>	<li id="underline" class="underline fnt_fmly_cnt_li"></li>	<li id="txt_color" class="txt_color fnt_fmly_cnt_li">	<div class="txt_clr_bx">	<div class="bg_clr_cnt left">	<p class="clr_hdng">Background Color</p>	<div class="tp_gry_clr clr_btn left">	<ul>	<li class="" style="background-color: #000000;"></li>	<li class="" style="background-color: #444444"></li>	<li class="" style="background-color: #666666"></li>	<li class="" style="background-color: #999999"></li>	<li class="" style="background-color: #cccccc"></li>	<li class="" style="background-color: #eeeeee"></li>	<li class="" style="background-color: #f3f3f3"></li>	<li class="" style="background-color: #ffffff"></li>	</ul>	</div>	<div class="tp_gry_clr clr_btn left">	<ul>	<li class="" style="background-color: #ff0000;"></li>	<li class="" style="background-color: #ff9900"></li>	<li class="" style="background-color: #ffff00"></li>	<li class="" style="background-color: #00ff00"></li>	<li class="" style="background-color: #00ffff"></li>	<li class="" style="background-color: #0000ff"></li>	<li class="" style="background-color: #9900ff"></li>	<li class="" style="background-color: #ff00ff"></li>	</ul>	</div>	<div class="all_clr clr_btn left">	<ul>	<li class="" style="background-color: #f4cccc;"></li>	<li class="" style="background-color: #fce5cd"></li>	<li class="" style="background-color: #fce5cd"></li>	<li class="" style="background-color: #fce5cd"></li>	<li class="" style="background-color: #fce5cd"></li>	<li class="" style="background-color: #cfe2f3"></li>	<li class="" style="background-color: #d9d2e9"></li>	<li class="" style="background-color: #ead1dc"></li>	<li class="" style="background-color: #ead1dc;"></li>	<li class="" style="background-color: #f9cb9c"></li>	<li class="" style="background-color: #ffe599"></li>	<li class="" style="background-color: #b6d7a8"></li>	<li class="" style="background-color: #a2c4c9"></li>	<li class="" style="background-color: #9fc5e8"></li>	<li class="" style="background-color: #b4a7d6"></li>	<li class="" style="background-color: #d5a6bd"></li>	<li class="" style="background-color: #e06666;"></li>	<li class="" style="background-color: #f6b26b"></li>	<li class="" style="background-color: #ffd966"></li>	<li class="" style="background-color: #93c47d"></li>	<li class="" style="background-color: #76a5af"></li>	<li class="" style="background-color: #6fa8dc"></li>	<li class="" style="background-color: #8e7cc3"></li>	<li class="" style="background-color: #c27ba0"></li>	<li class="" style="background-color: #cc0000;"></li>	<li class="" style="background-color: #e69138"></li>	<li class="" style="background-color: #f1c232"></li>	<li class="" style="background-color: #6aa84f"></li>	<li class="" style="background-color: #45818e"></li>	<li class="" style="background-color: #3d85c6"></li>	<li class="" style="background-color: #674ea7"></li>	<li class="" style="background-color: #a64d79"></li>	<li class="" style="background-color: #990000;"></li>	<li class="" style="background-color: #b45f06"></li>	<li class="" style="background-color: #bf9000"></li>	<li class="" style="background-color: #38761d"></li>	<li class="" style="background-color: #134f5c"></li>	<li class="" style="background-color: #0b5394"></li>	<li class="" style="background-color: #351c75"></li>	<li class="" style="background-color: #741b47"></li>	<li class="" style="background-color: #660000;"></li>	<li class="" style="background-color: #783f04"></li>	<li class="" style="background-color: #7f6000"></li>	<li class="" style="background-color: #274e13"></li>	<li class="" style="background-color: #0c343d"></li>	<li class="" style="background-color: #073763"></li>	<li class="" style="background-color: #20124d"></li>	<li class="" style="background-color: #4c1130"></li>	</ul>	</div>	</div>	<div class="txt_clr_cnt right">	<p class="clr_hdng">Text Color</p>	<div class="tp_gry_clr clr_btn left">	<ul>	<li class="" style="background-color: #000000; color: #000000;"></li>	<li class="" style="background-color: #444444; color: #444444;"></li>	<li class="" style="background-color: #666666; color: #666666;"></li>	<li class="" style="background-color: #999999; color: #999999;"></li>	<li class="" style="background-color: #cccccc; color: #cccccc;"></li>	<li class="" style="background-color: #eeeeee; color: #eeeeee;"></li>	<li class="" style="background-color: #f3f3f3; color: #f3f3f3;"></li>	<li class="" style="background-color: #ffffff; color: #ffffff;"></li>	</ul>	</div>	<div class="tp_gry_clr clr_btn left">	<ul>	<li class="" style="background-color: #ff0000; color: #ff0000"></li>	<li class="" style="background-color: #ff9900; color: #ff9900"></li>	<li class="" style="background-color: #ffff00; color: #ffff00"></li>	<li class="" style="background-color: #00ff00; color: #00ff00"></li>	<li class="" style="background-color: #00ffff; color: #00ffff"></li>	<li class="" style="background-color: #0000ff; color: #0000ff"></li>	<li class="" style="background-color: #9900ff; color: #9900ff"></li>	<li class="" style="background-color: #ff00ff; color: #ff00ff"></li>	</ul>	</div>	<div class="all_clr clr_btn left">	<ul>	<li class="" style="background-color: #f4cccc; color: #f4cccc;"></li>	<li class="" style="background-color: #fce5cd; color: #fce5cd;"></li>	<li class="" style="background-color: #fce5cd; color: #fce5cd;"></li>	<li class="" style="background-color: #fce5cd; color: #fce5cd;"></li>	<li class="" style="background-color: #fce5cd; color: #fce5cd;"></li>	<li class="" style="background-color: #cfe2f3; color: #cfe2f3;"></li>	<li class="" style="background-color: #d9d2e9; color: #d9d2e9;"></li>	<li class="" style="background-color: #ead1dc; color: #ead1dc;"></li>	<li class="" style="background-color: #ead1dc; color: #ead1dc;"></li>	<li class="" style="background-color: #f9cb9c; color: #f9cb9c;"></li>	<li class="" style="background-color: #ffe599; color: #ffe599;"></li>	<li class="" style="background-color: #b6d7a8; color: #b6d7a8;"></li>	<li class="" style="background-color: #a2c4c9; color: #a2c4c9;"></li>	<li class="" style="background-color: #9fc5e8; color: #9fc5e8;"></li>	<li class="" style="background-color: #b4a7d6; color: #b4a7d6;"></li>	<li class="" style="background-color: #d5a6bd; color: #d5a6bd;"></li>	<li class="" style="background-color: #e06666; color: #e06666;"></li>	<li class="" style="background-color: #f6b26b; color: #f6b26b;"></li>	<li class="" style="background-color: #ffd966; color: #ffd966;"></li>	<li class="" style="background-color: #93c47d; color: #93c47d;"></li>	<li class="" style="background-color: #76a5af; color: #76a5af;"></li>	<li class="" style="background-color: #6fa8dc; color: #6fa8dc;"></li>	<li class="" style="background-color: #8e7cc3; color: #8e7cc3;"></li>	<li class="" style="background-color: #c27ba0; color: #c27ba0;"></li>	<li class="" style="background-color: #cc0000; color: #cc0000;"></li>	<li class="" style="background-color: #e69138; color: #e69138;"></li>	<li class="" style="background-color: #f1c232; color: #f1c232;"></li>	<li class="" style="background-color: #6aa84f; color: #6aa84f;"></li>	<li class="" style="background-color: #45818e; color: #45818e;"></li>	<li class="" style="background-color: #3d85c6; color: #3d85c6;"></li>	<li class="" style="background-color: #674ea7; color: #674ea7;"></li>	<li class="" style="background-color: #a64d79; color: #a64d79;"></li>	<li class="" style="background-color: #990000; color: #990000;"></li>	<li class="" style="background-color: #b45f06; color: #b45f06;"></li>	<li class="" style="background-color: #bf9000; color: #bf9000;"></li>	<li class="" style="background-color: #38761d; color: #38761d;"></li>	<li class="" style="background-color: #134f5c; color: #134f5c;"></li>	<li class="" style="background-color: #0b5394; color: #0b5394;"></li>	<li class="" style="background-color: #351c75; color: #351c75;"></li>	<li class="" style="background-color: #741b47; color: #741b47;"></li>	<li class="" style="background-color: #660000; color: #660000;"></li>	<li class="" style="background-color: #783f04; color: #783f04;"></li>	<li class="" style="background-color: #7f6000; color: #7f6000;"></li>	<li class="" style="background-color: #274e13; color: #274e13;"></li>	<li class="" style="background-color: #0c343d; color: #0c343d;"></li>	<li class="" style="background-color: #073763; color: #073763;"></li>	<li class="" style="background-color: #20124d; color: #20124d;"></li>	<li class="" style="background-color: #4c1130; color: #4c1130;"></li>	</ul>	</div>	</div>	</div>	</li>	<li class="txt_align fnt_fmly_cnt_li">	<span class="txt_align_bg"></span>	<ul class="txt_align_elmnt">	<li class="txt_left" style="background-position: -270px 2px;"></li>	<li class="txt_center" style="background-position: -291px 2px;"></li>	<li class="txt_right" style="background-position: -312px 2px;"></li>	</ul>	</li>	<li class="nmbr_lst fnt_fmly_cnt_li"></li>	<li class="blt_lst fnt_fmly_cnt_li"></li>	<li class="indnt_less fnt_fmly_cnt_li"></li>	<li class="indnt_more fnt_fmly_cnt_li"></li>	<li class="quote fnt_fmly_cnt_li"></li>	<li class="clr_frmt fnt_fmly_cnt_li"></li>	</ul>	</div>	</div>	</div>	<button class="send_btn" id="send_btn" type="button">Send</button>	<ul class="txt_edt_ftr_menu">	<li id="text_A" class="text_A"><span></span></li>	<li id="atch_file" class="atch_file"><span></span></li>	<li id="ggl_drv" class="ggl_drv"><span></span></li>	<li id="insrt_img" class="insrt_img"><span></span></li>	<li id="insrt_link" class="insrt_link"><span></span></li>	<li id="insrt_emoji" class="insrt_emoji"><span></span></li>	</ul>	</footer>	</div>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Salman Raza - Script Codes CSS Codes

* {	margin: 0;	padding: 0;	-webkit-box-sizing: border-box;	box-sizing: border-box;	}	body {	font-family: 'Arial', sans-serif;	font-size: 12px;	line-height: 14px;	position: relative;	}	ul {list-style: none;}	/* Variables */	:root {	--darkGrey: #404040;	--white: #fff;	--border_color: #cfcfcf;	--border1px: 1px solid #cfcfcf;	--outlineNone: none;	--black: #000;	--Grey777: #777;	}	.left {float: left;}	.right{float: right;}	.txt_center{text-align: center;}	.compose_msg { background-color: #d14836; background-image: -webkit-linear-gradient(top,#dd4b39,#d14836); background-image: linear-gradient(top,#dd4b39,#d14836); color: #fff; border: 1px solid transparent; border: 1px solid transparent; margin: 20px; width: 115px; height: 30px; text-transform: uppercase; border-radius: 2px; font-size: 11px;	font-weight: bold;	cursor: pointer;	letter-spacing: 1px;	}	.compose_msg:focus { border: rgba(0,0,0,0) solid 1px; outline: rgba(0,0,0,0) 0; box-shadow: inset 0 0 0 1px #fff;	}	.main_cont {	position: fixed;	right: 0;	bottom: 0;	width: 100%;	height: 100%;	pointer-events: none;	z-index: 20;	}	.msg_main_cnt {	width: auto;	min-width: 590px;	height: 100vh;	float: right;	margin-left: 10px;	position: relative;	display: table;	pointer-events: initial;	}	.msg_main_cnt:first-child {margin-right: 15px;}	.new_msg_main_cnt {	background-color: var(--white);	position: absolute;	bottom: 0;	right: 0;	border:1px solid var(--border_color);	/*overflow: hidden;*/	z-index: 2;	}	.new_msg_main_cnt.minimize {width: 260px; height: 36px;}	.new_msg_main_cnt.collapse {width: 590px;height: 545px;}	.new_msg_main_cnt.expend {	width: 80%;	height: 80%;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	}	.overlay_bg {	width: 100%;	height: 100%;	position: fixed;	top: 0;	left: 0;	z-index: 0;	background-color: rgba(0,0,0,0.5);	}	header {	position: relative;	width: 100%;	height: 36px;	background-color: var(--darkGrey);	line-height: 36px;	padding: 0 5px 0 15px;	z-index: 2;	}	header .nw_msg_hdng {font-size: 13px;color: var(--white);}	.hdr_nav {position: relative; padding-top: 6px;	}	.hdr_nav > li {	width: 24px;	height: 24px;	float: left;	background-repeat: no-repeat;	cursor: pointer;	}	.hdr_nav > li:hover {background-color: #737373;}	.hdr_nav > li.minimize_li {	background-image: url(main_images/general-76906fbc82f79822625038e272fa3893.png);	background-position: 0 -337px;	}	.hdr_nav > li.minimize_li.minimize {background-position: 0 -219px;}	.hdr_nav > li.collapse_window {	background-image: url(main_images/expand_window.png);	background-position: center center;	}	.hdr_nav > li.collapse_window.expend_li { background-image: url(main_images/collapse_window.png); }	.hdr_nav > li.close_li {	background-image: url(main_images/general-76906fbc82f79822625038e272fa3893.png);	background-position: 0 -144px;	}	.sb_header {	width: 100%;	min-height: 40px;	line-height: 40px;	border-bottom: var(--border1px);	position: relative;	color: var(--Grey777);	}	.editable_div {	width: 100%;	height: 100%;	padding: 0 35px;	float: left;	font-size: 13px;	position: relative;	z-index: 0;	color: var(--black);	}	.editable_div:focus, .sbjct_hdng:focus, .txt_editable_div:focus {outline: var(--outlineNone);}	._to, .cc_bcc {position: absolute; z-index: 2;}	._to {left: 10px;top: 1px;}	.cc_bcc {right: 10px;bottom: 1px}	.cc_bcc span {	margin-right: 5px;	}	.cc_bcc span:last-child {margin-right: 0;}	.cc_bcc span:hover {text-decoration: underline;cursor: pointer;}	.subject_cnt {	width: 100%;	height: 40px;	line-height: 40px;	position: relative;	overflow: hidden;	border-bottom: var(--border1px);	}	.cc_cont {	width: 100%;	height: 40px;	line-height: 40px;	position: relative;	}	.cc_cont .cc_bcc { display: block; }	.sbjct_hdng {	width: 100%;	height: 100%;	padding: 0 10px;	border:0;	}	footer {	width: 100%;	height: 40px;	line-height: 40px;	border-top:var(--border1px);	position: absolute;	bottom: 0;	left: 0;	background-color: #f5f5f5;	z-index: 1;	padding: 0 6px;	}	.send_btn {	box-shadow: none; background-color: #4d90fe; background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); background-image: linear-gradient(top,#4d90fe,#4787ed); border: 1px solid #3079ed; color: var(--white); border-radius: 2px; cursor: pointer; font-size: 11px; font-weight: bold; text-align: center; margin:7px 13px 0 0; height: 27px; line-height: 27px; width: 75px; outline: 0; padding: 0 8px; float: left;	}	.txt_edt_ftr_menu {display: inline-block; position: relative;float: left;margin-top: 7px;}	.txt_edt_ftr_menu > li {	width: 29px;	height: 29px;	line-height: 29px;	text-align: center;	position: relative;	float: left;	margin-right: 5px;	border-radius: 2px;	cursor: pointer;	border:1px solid transparent;	}	.txt_edt_ftr_menu > li span {	display: block;	width: 24px;	height: 24px;	background-repeat: no-repeat;	opacity: 0.55;	margin: 3px 0 0 0;	}	.txt_edt_ftr_menu > li:first-child {	margin-right: 15px;	}	.txt_edt_ftr_menu > li:first-child:after,	.fnt_fmly_cnt:after,	.fnt_styl_cnt > ul > li.txt_color:before {	position: absolute;	content: '';	height: 90%;	width: 1px;	background-color: #cfcfcf;	top: 1px;	right: -5px;	}	.txt_edt_ftr_menu > li:hover {border:var(--border1px); }	.txt_edt_ftr_menu > li:hover span, .txt_edt_ftr_menu > li.active span {opacity: 1;}	.txt_edt_ftr_menu > li.text_A span,	.txt_edt_ftr_menu > li.atch_file span,	.txt_edt_ftr_menu > li.insrt_img span {	background-image: url(main_images/compose-28e1860af47052bc9ce7a152b803c105.png);	}	.txt_edt_ftr_menu > li.insrt_link span,	.txt_edt_ftr_menu > li.insrt_emoji span {	background-image: url(main_images/html_editor.png);	}	.txt_edt_ftr_menu > li.text_A span {background-position: 3px -523px;}	.txt_edt_ftr_menu > li.atch_file span {background-position: 3px -392px;}	.txt_edt_ftr_menu > li.ggl_drv span {	background-position: 2px -655px;	background-image: url(main_images/general-76906fbc82f79822625038e272fa3893.png);	}	.txt_edt_ftr_menu > li.insrt_img span {background-position: 2px -127px;}	.txt_edt_ftr_menu > li.insrt_link span {background-position: -144px 2px;}	.txt_edt_ftr_menu > li.insrt_emoji span {background-position: -354px 2px;}	.txt_edt_ftr_menu > li.active {	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); background-color: #eee; border-color: #ccc;	}	.txt_edt_cnt {	width: 471px;	height: 36px;	line-height: 36px;	position: relative;	border:var(--border1px);	position: absolute;	bottom: 45px;	left: 5px;	background-color: #f5f5f5;	display: block; padding: 2px;	}	.txt_edt_cnt.hide{display: none;}	.txt_edt_cnt:after {	position: absolute; content: ''; width: 13px; height: 13px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 1px solid var(--border_color); border-bottom: 1px solid var(--border_color); left: 98px; bottom: -8px; z-index: 2; background-color: #f5f5f5;	}	.txt_edt_sb_cnt {	width: 100%;	height: 100%;	float: left;	position: relative;	z-index: 3;	padding: 3px 1px;	margin-right: 8px;	}	.fnt_fmly_cnt {	width: 85px;	height: 100%;	line-height: 23px;	padding: 0 5px;	border:1px solid transparent; border-radius: 2px; cursor: pointer; position: relative; background-image: url(main_images/small-grey-disclosure-arrow-down.png); background-repeat: no-repeat; background-position: right 7px top 10px; margin-right: 7px;	}	.txtT {width: 40px;}	.txtT:before { position: absolute; content: ''; width: 20px; height: 23px; background-image: url(main_images/html_editor.png); background-position: -85px 0; left: 3px; opacity: 0.5;	}	.txtT.active:before {opacity: 1;}	.fnt_fmly_cnt:hover,	.fnt_fmly_cnt.show,	.txtT.show {	border:var(--border1px);	}	.fnt_fmly_nm {	display: block;	font-size: 11px;	max-width: 85%;	overflow: hidden;	white-space: nowrap;	text-overflow: ellipsis;	vertical-align: middle;	}	.fnt_fmly_menu {	display: none;	width: 165px;	background-color: #fff;	border:var(--border1px);	box-shadow: 0 0 5px rgba(0,0,0,0.2);	position: absolute;	bottom: 100%;	left: 0;	padding: 7px 0;	}	.fnt_fmly_menu.show, .txtT_cnt.show {display: block;}	.fnt_fmly_menu > ul > li {	float: left;	width: 100%;	height: 26px;	line-height: 26px;	padding-left: 30px;	position: relative;	}	.fnt_fmly_menu > ul > li:hover,	.fnt_fmly_menu > ul > li.selected	{	background-color: #eee;	}	.fnt_fmly_menu > ul > li.selected:after {	position: absolute;	content: url(main_images/checkmark_font.png);	width: 20px;	height: 20px;	left: 3px;	top: 50%;	transform: translateY(-50%);	}	.txtT_cnt > ul > li {	height: auto;	line-height: normal;	padding: 6px 0 6px 30px;	}	.xx_large {font-size: 32px;}	.large {font-size: 18px;}	.x_small {font-size: 10px;}	.normal {font-size: 13px;}	.mail_txt_main_cnt {width: 100%; height: 385px; background-color: #fff; position: relative; }	.mial_txt_cnt::-webkit-scrollbar {width: 3px;height: 10px;}	.mial_txt_cnt::-webkit-scrollbar-track {background: transparent; }	.mial_txt_cnt::-webkit-scrollbar-thumb {background:#a5b345;}	.mial_txt_cnt {	width: 100%;	height: 100%;	float: left;	position: relative;	overflow-y: scroll;	overflow-x: hidden;	}	.txt_editable_div {	width: 100%;	float: left;	padding: 10px;	position: relative;	}	.upldd_data_cnt {	width: 100%;	min-height: 0;	background-color: red;	position: relative;	bottom: 0;	left: 0;	pointer-events: none;	float: left;	}	.fnt_styl_cnt {}	.fnt_styl_cnt > ul > li {	width: 25px;	height: 25px;	float: left;	margin-right: 2px; background-image: url(main_images/html_editor.png);	background-repeat: no-repeat;	cursor: pointer;	border-radius: 2px;	border:1px solid transparent;	opacity: 0.5;	position: relative;	}	.fnt_styl_cnt > ul > li.active, .fnt_styl_cnt > ul > li:hover {border:var(--border1px);opacity: 1;}	.fnt_styl_cnt > ul > li.active {	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;	box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;	}	.fnt_styl_cnt > ul > li.bold {background-position: 1px 2px;}	.fnt_styl_cnt > ul > li.italic {background-position: -20px 2px;}	.fnt_styl_cnt > ul > li.underline {background-position: -41px 1px;}	.fnt_styl_cnt > ul > li.txt_align { width: 35px; background-image: initial; margin-left: 5px;	}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_bg {	background-image: url(main_images/html_editor.png);	background-repeat: no-repeat;	background-position: -270px 2px;	width: 20px; height: 19px; float: left; margin: 0 -1px; position: relative; pointer-events: none;	}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_bg:after	{	width: 6px; height: 4px; content: ''; position: absolute; right: -11px; top: 9px; background-image: url(main_images/small-grey-disclosure-arrow-down.png); background-repeat: no-repeat;	}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt {	position: absolute;	bottom: 100%;	left: -1px;	width: 35px;	height: 100px;	background-color: #f5f5f5;	border:1px solid rgba(0,0,0,0.2);	padding: 4px;	display: none;	}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt.show {display: block;}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li {	background-image: url(main_images/html_editor.png);	background-repeat: no-repeat;	width: 100%;	float: left;	height: 26px;	margin-bottom: 5px;	}	.fnt_styl_cnt > ul > li.nmbr_lst {background-position: -167px 1px;}	.fnt_styl_cnt > ul > li.blt_lst {background-position: -188px 1px;}	.fnt_styl_cnt > ul > li.indnt_less {background-position: -208px 1px;}	.fnt_styl_cnt > ul > li.indnt_more {background-position: -230px 1px;}	.fnt_styl_cnt > ul > li.quote {background-position: -252px 1px;}	.fnt_styl_cnt > ul > li.clr_frmt {background-position: -335px 1px;}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li:hover,	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li.active {background-color: #e0edfe;}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li.txt_left {}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li.txt_center {}	.fnt_styl_cnt > ul > li.txt_align > .txt_align_elmnt > li.txt_right {}	.fnt_styl_cnt > ul > li.txt_color {	width: 37px;	background-position: right 7px center;	background-image: url(main_images/small-grey-disclosure-arrow-down.png);	}	.fnt_styl_cnt > ul > li.txt_color:after {	position: absolute;	content: '';	width: 25px;	height: 25px;	left: 0; background-image: url(main_images/html_editor.png); background-position: -103px 2px; background-repeat: no-repeat;	}	.txt_clr_bx {	width: 325px;	height: 205px;	border:var(--border1px);	background-color: var(--white);	position: absolute;	bottom: 100%;	right: 0;	z-index: 2;	opacity: 1;	box-shadow: 0 0 5px rgba(0,0,0,0.2);	padding: 12px;	display: none;	}	.txt_clr_bx.show {display: block;}	.bg_clr_cnt, .txt_clr_cnt {	width: 48%;	height: 100%;	}	.tp_gry_clr {width: 100%; height: 16px; position: relative;margin-bottom: 6px;}	.tp_gry_clr ul li,	.all_clr ul li {	width: 16px;	height:16px;	position: relative;	margin-right: 1.95px;	float: left;	cursor: pointer;	border:0;	}	/*.tp_gry_clr ul li:last-child, .all_clr ul li:last-child {margin-right: 0;}*/	.all_clr ul li {margin-bottom: 1.95px;}	.all_clr {width: 100%; height: 99px; position: relative;}	.clr_hdng {line-height: normal; margin: 4px 0 8px;}	.all_clr ul li:hover:after,	.all_clr ul li.active:after,	.tp_gry_clr ul li:hover:after,	.tp_gry_clr ul li.active:after {	position: absolute;	content: '';	width: 100%;	height: 100%;	border:1px solid #000;	top: -1px;	left: -1px;	}	.all_clr ul li.active:before,	.tp_gry_clr ul li.active:before {	position: absolute;	content: url(main_images/checkmark.png);	background-image: url();	top: -7px;	left: 2px;	}

A Pen by Salman Raza - Script Codes JS Codes

$(document).ready(function(){	// variables	let ccHtml =	'<div id="cc_cont" class="left cc_cont">' +	'<span class="left _to" id="_cc">Cc</span>' +	'<span class="right cc_bcc" id="">' +	'<span class="bcc salman" id="_cc_bcc">Bcc</span>' +	'</span>' +	'<div id="_cc_sndr_cnt" class="editable_div" contenteditable=""></div>' +	'</div>';	let bccHtml =	'<div id="bcc_cont" class="left cc_cont">' +	'<span class="left _to" id="_cc">Bcc</span>' +	'<span class="right cc_bcc" id="">' +	'<span class="cc" id="_bcc_cc">Cc</span>' +	'</span>' +	'<div id="_bcc_sndr_cnt" class="editable_div" contenteditable=""></div>' +	'</div>';	// collapse and expend	$('.hdr_nav').on('click', 'li.collapse_window', function(){	let classExpend = $('.collapse_window').attr('class');	let $msg_main_cnt = $(this).parent().parent().parent().parent('.msg_main_cnt');	let $new_msg_main_cnt = $(this).parent().parent().parent('.new_msg_main_cnt');	if ( classExpend == 'collapse_window' ) {	$(this).addClass('expend_li');	$($new_msg_main_cnt).addClass('expend');	$($msg_main_cnt).css({'width' : '100%'});	$('body').append('<div class="overlay_bg"></div>')	}	else {	$(this).removeClass('expend_li');	$($new_msg_main_cnt).removeClass('expend').addClass('collapse');	$($msg_main_cnt).css({'width' : '590px'});	$('.overlay_bg').remove();	}	});	// remove message	$('.hdr_nav').on('click', 'li.close_li', function(){	let $msg_main_cnt = $(this).parent().parent().parent().parent('.msg_main_cnt');	$($msg_main_cnt).remove();	$('.overlay_bg').remove();	});	// Minimize	$('.hdr_nav').on('click', 'li.minimize_li', function(){	let classMinimize = $('.minimize_li').attr('class');	let $msg_main_cnt = $(this).closest('.msg_main_cnt');	let $new_msg_main_cnt = $(this).closest('.new_msg_main_cnt');	if( classMinimize == 'minimize_li' ){	$(this).addClass('minimize');	$($new_msg_main_cnt).addClass('minimize').removeClass('collapse expend');	$($msg_main_cnt).css('min-width', '260px')	$('.overlay_bg').remove();	$('footer').hide();	}	else {	$(this).removeClass('minimize');	$($new_msg_main_cnt).removeClass('minimize expend').addClass('collapse');	$($msg_main_cnt).css({'min-width' : '590px'})	$('.overlay_bg').remove();	$('footer').show();	}	});	$('#to_sndr_cnt').on('focusin', function(){	$('#_to').text('To');	if ( $('#cc_cont').attr('class') == 'active' ) {	$('#cc_bcc').css('display', 'none');	} else {	$('#cc_bcc').css('display', 'block');	}	// Cc added	$('#_cc').on('click', function(){	$('#cc_bcc').css('display', 'none');	$('.sb_header').append(ccHtml);	$('#cc_cont').addClass('active');	});	// Bcc added	$('#_bcc').on('click', function(){	$('#cc_bcc').css('display', 'none');	$('.sb_header').append(bccHtml);	$('#cc_cont').addClass('active');	});	$('#_bcc').on('click', function(){	$('#bcc_cont').css('display', 'block');	});	});	$('#to_sndr_cnt').on('focusout', function(){	if ( $(this).html().length >= 1 ) {	if ( $('#cc_cont').css('display') == 'block' ) {	$('#cc_bcc').css('display', 'none');	} else {	$('#cc_bcc').css('display', 'block');	}	}	else {	$('#_to').text('Recipients');	$('#cc_bcc').css('display', 'none');	}	if ( $('#_cc_sndr_cnt').html().length <= 0 ) {	$('#cc_cont').remove();	$('#cc_cont').removeClass('active');	}	if ( $('#_bcc_sndr_cnt').html().length <= 0 ) {	$('#bcc_cont').remove();	$('#bcc_cont').removeClass('active');	}	});	let $text_A = $('.active').attr('class');	$('#text_A').on('click', function(){	$(this).toggleClass('active');	$('.txt_edt_cnt').toggleClass('hide');	// editable cont active or not checkout	if ( $('.txt_edt_cnt').css('display') == 'block') {	$('.mail_txt_main_cnt').css('height', 339 + 'px');	} else {	$('.mail_txt_main_cnt').css('height', 385 + 'px');	}	// Color box hide when editable box is hidden	if ( $(this).attr('class') == 'active') {	alert('yes');	} else {	$('.txt_color').removeClass('active');	$('.txt_clr_bx').removeClass('show');	}	});	// editable cont active or not checkout	if ( $('.txt_edt_cnt').css('display') == 'block') {	$('.mail_txt_main_cnt').css('height', 339 + 'px');	} else {	$('.mail_txt_main_cnt').css('height', 385 + 'px');	}	if ( $('.text_A').attr('class') == 'block') {	$('.mail_txt_main_cnt').css('height', 339 + 'px');	} else {	$('.mail_txt_main_cnt').css('height', 385 + 'px');	}	$('#fnt_fmly_cnt').on('click', function(){	$('#fnt_fmly_menu').toggleClass('show');	$(this).addClass('active');	$('#fnt_fmly_menu > ul').on('click', 'li', function(){	let $thisValue = $(this).text();	$('#fnt_fmly_menu ul li').removeClass('selected');	$(this).addClass('selected');	$('#fnt_fmly_nm').text($thisValue);	if ( $(this).attr('class') == 'selected' ) {	$(this).parent().parent('#txtT_cnt').removeClass('show');	}	})	});	$('#txtT').on('click', function(){	$(this).toggleClass('active');	$('#txtT_cnt').toggleClass('show');	$('#txtT_cnt > ul').on('click', 'li', function(){	let $thisValue = $(this).text();	$('#txtT_cnt ul li').removeClass('selected');	$(this).addClass('selected');	if ( $(this).attr('class') == 'selected' ) {	$(this).parent().parent('#txtT_cnt').removeClass('show');	}	})	});	$('.fnt_styl_cnt > ul').on('click', 'li.fnt_fmly_cnt_li', function(){	$(this).toggleClass('active');	});	$('#txt_color').on('click', function(){	$('.txt_clr_bx').toggleClass('show')	});	$('.txt_align').on('click', function(){	$('.txt_align_elmnt').toggleClass('show')	$('.txt_align_elmnt > li').on('click', function(){	$('.txt_align_elmnt > li').removeClass('active');	$('.txt_align_bg').css('background-position', $(this).css('background-position'));	$(this).addClass('active');	});	});	var bgColorCnt = $('.bg_clr_cnt > .clr_btn > ul'),	txtColorCnt = $('.txt_clr_cnt > .clr_btn > ul');	$(bgColorCnt).on('click', 'li', function(){	$('.bg_clr_cnt > .clr_btn > ul > li').removeClass('active');	$(this).addClass('active');	});	$(txtColorCnt).on('click', 'li', function(){	$('.txt_clr_cnt > .clr_btn > ul > li').removeClass('active');	$(this).addClass('active');	});	});
A Pen by Salman Raza - Script Codes
A Pen by Salman Raza - Script Codes
Home Page Home
Developer Salman Raza
Username salmanraza
Uploaded January 30, 2023
Rating 3
Size 8,050 Kb
Views 6,072
Do you need developer help for A Pen by Salman Raza?

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!

Salman Raza (salmanraza) Script Codes
Name
Hamburger Menu Animation
Product showcase
Event short details Card view
Pure CSS search bar
Testimonial carousel
App design
Circle-background-animation
Close button with css and jquery
Dynamic Add li using jQuery
Progress with CSS variables
Create amazing video scripts 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!