Task

Developer
Nugroho Indra Utomo
Size
5,383 Kb
Views
28,336
  1. Task Previews
  2. Task HTML Codes
  3. Task CSS Codes

How do I make an task?

What is a task? How do you make a task? This script and codes were developed by Nugroho Indra Utomo on 17 October 2022, Monday.

Task Previews
IQ Test

Task - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>task</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DM Soft Gaming :.</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name="description" content="Digital Marketing">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Transcosmos Indonesia">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/parts.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--#wrap-->
<div id="wrap">	<!--#wrapInner-->	<div id="wrapInner">	<!--#headerArea-->	<div id="headerArea">	<div id="gnavArea">	<div id="navbarArea"> <div class="logo"> <img src="images/img_logo_01.png" alt="logo" /> </div> <ul> <a href="#" title="home"><li>HOME</li></a> <a href="#" title="games"><li>GAMES</li></a> <a href="#" title="store"><li>STORE</li></a> <a href="#" title="support"><li>SUPPORT</li></a> </ul> <div id="formArea">	<div id="signArea"> <ul> <a href="#" title="log in"><li>Log in</li></a> <a href="#" title="sign up"><li>Sign up</li></a> </ul> </div> <div id="searchBar"> <input type="text" placeholder="Search Here..." /> <input type="submit" value="" /> </div> </div>	</div> </div> </div> <!-- / #headerArea --> <!--#dirPathArea--> <div id="dirPathArea">	<ul>	<li><a href="" title="Home">HOME</a></li> <li><a href="" title="Sign Up">SIGN UP</a></li> </ul> </div> <!--/#dirPathArea--> <!--#mainArea --> <div id="mainArea"> <!--#contentArea -->	<div id="contentArea">	<div class="columnBlockK01">	<img src="../login/images/img_logo_02.png"/> <h2>Create DMSOFT Account</h2> <div class="form">	<form>	<label>Email Address </label> <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Email Address"/> <label>Password</label> <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Email Address"/><br> <label>Confirm Password</label> <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Email Address"/><br> <label>User Name</label> <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Email Address"/><br> </form> <p>Date of Birth</p> <div class="select1">	<select>	<option>Month</option>	<option>January</option> <option>February</option> <option>March</option> <option>April</option> </select> </div> <div class="select2">	<select>	<option>Day</option>	<option>January</option> <option>February</option> <option>March</option> <option>April</option> </select> </div> <div class="select3">	<select>	<option>Year</option>	<option>1985</option> <option>1985</option> <option>1985</option> <option>April</option> </select> </div> <div class="clear"></div> <div class="checkbox"> <input type="checkbox"><label>I have read and accept the terms and agreement of DMSOFTs</label> </div> <div class="clear"></div> <div class="checkbox2"> <input type="checkbox"><label>I accept the collection and use of my data Collection by DMSOFT according to the Privacy Policy</label> </div> <div class="clear"></div> <a href="#" class="createAccount">Create Account</a> </div> <!--/.form --> </div> <!-- /.columnBlockK01 --> </div> <!-- / #contentArea --> <!--#sideArea --> <div id="sideArea"> </div> <!-- / #sideArea --> </div> <!-- / #mainArea --> <!--#footerArea--> <div id="footerArea"> <!--#footerAreaBlockA--> <!--/#footerAreaBlockA--> <!--#footerAreaBlockB-->	<div id="footerAreaBlockB">	<div class="footerMain"> <div class="siteMap"> <ul> <li>DMSOFT</li> <a href="#" title="About DMSOFT"><li>About DMSOFT</li></a> <a href="#" title="Terms of Sale"><li>Terms of Sale</li></a> <a href="#" title="About Guarantee"><li>About Guarantee</li></a> <a href="#" title="Release Note"><li>Release Note</li></a> <a href="#" title="Corporate Information"><li>Corporate Information</li></a> </ul> </div> <div class="siteMap"> <ul> <li>LEGAL</li> <a href="#" title="Terms and Condition"><li>Terms and Condition</li></a> <a href="#" title="Privacy Policy"><li>Privacy Policy</li></a> <a href="#" title="Legal Notices"><li>Legal Notices</li></a> </ul> </div> <div class="siteMap"> <ul> <li>HELP</li> <a href="#" title="Help center"><li>Help center</li></a> <a href="#" title="FAQ"><li>FAQ</li></a> </ul> </div> <div id="copyright">	<img src="images/img_logo_02.png" alt="logo"/>Copyright 2014. All Right Reserved </div>	</div> </div> <!--/#footerAreaBlockB--> <!--#footerAreaBlockC-->	<div id="footerAreaBlockC">	<div class="footerMain">	<ul>	<a href="#" title="home"><li><img src="images/img_icon_04.png" alt="facebook" />FACEBOOK</li></a>	<a href="#" title="twitter"><li><img src="images/img_icon_05.png" alt="twitter" />TWITTER</li></a>	<a href="#" title="google"><li><img src="images/img_icon_06.png" alt="google +" />GOOGLE +</li></a>	<a href="#" title="youtube"><li><img src="images/img_icon_07.png" alt="youtube" />YOUTUBE</li></a>	<a href="#" title="tumblr"><li><img src="images/img_icon_08.png" alt="tumblr" />TUMBLR</li></a> </ul> </div> </div> <!--#footerAreaBlockC--> </div> <!-- / #footerArea --> </div>	<!--/#wrapInner-->
</div>
<!--/#wrap-->
</body>
</html>
</body>
</html>

Task - Script Codes CSS Codes

/*============================================================
RESET
==============================================================*/
@charset "utf-8";
/*===============
css reset stylesheet is to reduce browser inconsistencies
in things like default line heights, margins and font sizes of headings,
and so on. =====*/
html{	background:#ffffff;	}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fiel dset,input,textarea,p,blockquote,th,td{	margin:0;	padding:0;	}
table{	border-collapse:separate;	border-spacing:0;	}
fieldset,img{	border:0;	}
img{	vertical-align:top;	}
address,caption,em,strong,th{	font-style:normal;	font- weight:normal;	}
ol,ul{	list-style:none;	}
caption,th,td{	text-align:left;	}
h1,h2,h3,h4,h5,h6{	font-size:100%;font-weight:normal;	}
sup{	vertical-align:text-top;	}
sub{	vertical-align:text-bottom;	}
input,textarea,select{	font-family:inherit;	font-size:inherit;	font- weight:inherit;	}
input,textarea,select{	*font-size:100%;	}
a{color:#0A00FF;}
a:link{text-decoration:underline;}
a:visited{text-decoration:underline;}
a:hover{text-decoration:none;cursor:pointer!important;}
a:active{text-decoration:underline;}
@charset "utf-8";
/*===============
contain : construct page layout like page background,
header, footer, global navigation and so on =====*/
/*----- contents -------	1: Wrap Section	2: Header Area	: gnavArea	3: Main Area	: contentArea	: sideArea	4: Footer Area
----------------------*/
/*=====================================================
PART
=======================================================*/
/*===============
contain : such as strong text, margin set, basic list & font style and so on =====*/
body {	margin: 0px;	padding: 0px;	font-family: Arial, sans-serif;	font-size:14px;	color:#FFFFFF;
}
a:link{	color:#d9d9d9;	text-decoration:none;
}
/*============================== dirPathArea ==============================*/ #dirPathArea{	width:100%;	height:auto;	overflow:hidden;	background-color:#0c0b0b;
}
#dirPathArea ul {	width:1230px;	height:40px;	display:block;	margin:20px auto 0 auto;
}
#dirPathArea ul li{	display:block;	float:left;	margin:0 5px 0 0;	padding:0 0 0 18px;	position:relative;
}
#dirPathArea ul li a{	color:#d9d9d9;
}
#dirPathArea ul li:before{	content: '';	display: block;	position: absolute;	top:4px;	left:5px;	width: 0;	height: 0;	border-top: 5px solid transparent;	border-bottom: 5px solid transparent;	border-left: 5px solid #cdcdcd;
}
#dirPathArea ul li:first-child{	padding:0;
}
#dirPathArea ul li:first-child:before{	display: none;
}
#dirPathArea ul li:last-child:before{	content: '';	display: block;	position: absolute;	top:4px;	left:5px;	width: 0;	height: 0;	border-top: 5px solid transparent;	border-bottom: 5px solid transparent;	border-left: 5px solid #5d9516;
}
#dirPathArea ul li:last-child a{	color:#5d9516;
}
/*============================== contentBlockK01 ==============================*/
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 h1{	font-size:24px;	font-family:;	/*border-bottom:1px solid red;*/	padding:20px 0 50px 10px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 h2 {	font-size:24px;	color:#5d9516;	padding:0 0 20px 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 p {	line-height:22px;	padding:0 0 0 0;
}
/*
===== 1: Wrap Section ===========================*/
#wrap {	margin: 0px;	padding: 0px;
}
#wrap #wrapInner {	width: 100%;	height: auto;	margin: 0px auto;
}
/*
===== 2: Header Area ============================*/
#headerArea {	width:100%;
}
/* #gnavArea
----------------------------*/
#headerArea #gnavArea {	position:relative;	width:100%;	height:95px;	background:url(../images/bg_header_01.png);	border-top:1px solid #2b2b2b;	border-bottom:1px solid #2b2b2b;
}
#headerArea #gnavArea #navbarArea{	position:relative;	width:1230px;	height:95px;	margin: 0 auto;
}
#headerArea #gnavArea #navbarArea .logo{	width:48px;	height:75px;	padding:10px 10px 10px 0;	float:left;
}
#headerArea #gnavArea #navbarArea > ul{
}
#headerArea #gnavArea #navbarArea > ul li{	float:left;	height:25px;	background:green;	font-size:18px;	color:#ffffff;	padding:40px 42px 30px 42px;	background:url(../images/bg_li_01.png);	background-repeat:no-repeat;	background-position:right center;
}
#headerArea #gnavArea #navbarArea > ul li:hover{	background-image:url(../images/bg_header_01_on.png);	background-position:center right;	background-repeat:repeat;
}
#headerArea #gnavArea #formArea{	float:right;	min-width:415px;	margin-right:-272px;
}
#headerArea #gnavArea #formArea #signArea{	float:left;
}
#headerArea #gnavArea #formArea #signArea > ul{	display:block;	float:left;
}
#headerArea #gnavArea #formArea #signArea > ul li{	float:left;	height:25px;	padding:40px 18px 30px 18px;	font-size:14px;	color:#cac8c8;
}
#headerArea #gnavArea #formArea #signArea > ul li:first-child{	background:url(../images/bg_li_02.png);	background-repeat:no-repeat;	background-position:right center;
}
#headerArea #gnavArea #formArea #searchBar{	padding:32px 0 30px 0;	float:left;
}
#headerArea #gnavArea #formArea #searchBar input[type=text]{	height:23px;	padding:5px 45px 5px 10px;	border-radius:8px;	border:none;	background:url(../images/bg_input_search_01.png)#ffffff;	background-position:right center;	background-repeat:no-repeat;
}
#headerArea #gnavArea #formArea #searchBar input[type=submit]{	height:33px;	width:45px;	margin-left:-45px;	opacity:0;	cursor:pointer;
}
/*
===== 3: Main Area ===============================*/
#mainArea {	background:#0c0b0b;	height:auto;
}
/* #contentArea
----------------------------*/
#mainArea #contentArea {	position:relative;	width:1230px;	min-height:800px;	margin: 0 auto;	background:#111111;	border-left:1px solid #504f4f;	border-right:1px solid #504f4f;	border-top:1px solid #504f4f;	overflow:hidden;
}	/*code your #contentArea css here*/
/* .columnBlockK01
-------------------------------*/
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 {	height:auto;	width:325px;	/*background-color:red;*/	margin:50px auto;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 img {	margin:0 0 35px 100px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form {	width:auto;	height:auto;	/*background-color:blue;*/
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form form label {	width:250px;	height:auto;	margin:0 0 0 0;	display:inline-block;	color:#b3a778;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form input[type="text"] {	width: 320px;	height:35px;	margin:25px 0 0 0;	border-radius:5px;	border:none;	padding-left:14px
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 {	float:left;	margin:25px 4px 0 0;	width:87px;	height:30px;	background-color:#ffffff;	padding:10px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 select {	border:none;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 label {	margin:0 51px 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select2 {	float:left;	margin:25px 4px 0 0;	width:87px;	height:30px;	background-color:#ffffff;	padding:10px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select2 select {	border:none;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select3 {	float:left;	margin:25px 20px 0 0;	width:87px;	height:30px;	background-color:#ffffff;	padding:10px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select3 select {	border:none;	width:83px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox {	margin:43px 0 0 0px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox input {	margin:0px 22px 9px 0px;	float:left;	width:19px;	height:19px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox label {	margin:0 0 0 0;	font-size:12px;	color:#b2a778;	float:right;	width:280px;	height:32px;	line-height:21px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox2{	margin:27px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox input {	margin:0px 22px 9px 0px;	float:left;	width:19px;	height:19px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox2 label {	margin:0 0 0 0;	font-size:12px;	color:#b2a778;	float:right;	width:280px;	height:51px;	line-height:21px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .createAccount {	background-image:url(../images/main_btn_003.png);	background-repeat:no-repeat;	display:block;	text-align:center;	width:190px;	height:42px;	color:#232323;	font-weight:bold;	padding:12px 0 0 0;	margin:35px 0 341px 48px;
}
/* #sideArea
----------------------------*/
#mainArea #sideArea {	/*code your #sideArea css here*/
}	/*code your #sideArea css here*/
/*
===== 4: Footer Area =============================*/
#footerArea {
}
#footerArea .footerMain{	width:1230px;	margin:0 auto;
}
/* #footerAreaBlockA
----------------------------*/
/* #footerAreaBlockB
----------------------------*/
#footerArea #footerAreaBlockB {	position:relative;	background:#1d1c1c;	border-top:1px solid #807f7f;	height:235px;
}
#footerArea #footerAreaBlockB .footerMain .siteMap{	width:205px;	float:left;
}
#footerArea #footerAreaBlockB .footerMain .siteMap > ul a li{	font-size:16px;	height:20px;	padding:5px 0 0 0;
}
#footerArea #footerAreaBlockB .footerMain .siteMap > ul > li:first-child{	height:20px;	background:url(../images/bg_footer_001.png);	background-repeat:no-repeat;	background-position:left bottom;	padding:0 0 12px 0;	margin:42px 0 0 0;
}
#footerArea #footerAreaBlockB .footerMain #copyright{	border-left:1px solid #858484;	float:left;	margin:37px 0 0 0;	padding:0 0 0 70px;	font-size:12px;
}
#footerArea #footerAreaBlockB .footerMain #copyright img{	margin-right:30px;
}
/* #footerAreaBlockC
----------------------------*/
#footerArea #footerAreaBlockC {	position:relative;	background:#0c0b0b;	height:88px;
}
#footerArea #footerAreaBlockC .footerMain > ul a li{	float:left;	width:138px;	margin:28px 52px 0 0;	padding:8px 10px 6px 10px;	background:#868585;
}
#footerArea #footerAreaBlockC .footerMain > ul a:hover li{	background:#c3c2c2;
}
#footerArea #footerAreaBlockC .footerMain > ul a li img{	margin:0 10px 0 2px;
}
.clear {	clear: both;
}
Task - Script Codes
Task - Script Codes
Home Page Home
Developer Nugroho Indra Utomo
Username indra_z85
Uploaded October 17, 2022
Rating 3
Size 5,383 Kb
Views 28,336
Do you need developer help for Task?

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!

Nugroho Indra Utomo (indra_z85) Script Codes
Name
Javascript2
Club t
A Pen by nugroho indra utomo
JQuery Dropdown Menu
Jquery effect
Javascript only
Parents
Meiji
Template
Responsive2
Create amazing marketing copy 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!