The Code:
This is The HTML CODE which is Great:
<!doctype html>
<html>
<head>
<title>You</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="maincontent">
<img src="yo.png" alt="yo not found">
<h2> Love You</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</body>
</html>
----------------------------------------------------------------------------------
CSS
----------------------------------------------------------------------------------
body{
width:80%;
margin:50px auto;
}
section{
width:70%;
margin:auto;
box-shadow:-10px -10px 50px rgba(200,220,220,1);
padding: 30px;
}
section img {
width:100%;
}
p{
-webkit-columns:4;
-moz-columns:4;
-webkit-column-gap:20px;
}
@media screen and (max-width:800px)
{
p{
-webkit-columns:2;
-moz-columns:2;
}
}
@media screen and (max-width:500px)
{
p{
-webkit-columns:1;
-moz-columns:1;
}
}
This is The HTML CODE which is Great:
<!doctype html>
<html>
<head>
<title>You</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="maincontent">
<img src="yo.png" alt="yo not found">
<h2> Love You</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</body>
</html>
----------------------------------------------------------------------------------
CSS
----------------------------------------------------------------------------------
body{
width:80%;
margin:50px auto;
}
section{
width:70%;
margin:auto;
box-shadow:-10px -10px 50px rgba(200,220,220,1);
padding: 30px;
}
section img {
width:100%;
}
p{
-webkit-columns:4;
-moz-columns:4;
-webkit-column-gap:20px;
}
@media screen and (max-width:800px)
{
p{
-webkit-columns:2;
-moz-columns:2;
}
}
@media screen and (max-width:500px)
{
p{
-webkit-columns:1;
-moz-columns:1;
}
}
---------------------------------------------------------------------------------------------
WEB FORM:
---------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>web form</title>
</head>
<body>
<script>
function check()
{
var name =document.getElementById('name');
var age =document.getElementById('age');
var dowry =document.getElementById('dowry');
var email =document.getElementById('email');
var emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var numericExpression = /^[0-9]+$/;
var alphaExp = /^[a-zA-Z]+$/;
if(name.value.length!=0)
{
if(age.value.match(numericExpression))
{
if(dowry.value > 100000)
{
if(email.value.match(emailExp))
{
alert("email match");
}
else
alert("Wrong Email");
}
else
alert("Put amount Below 100000");
}
else
alert("Enter Numeric Value for Age");
}
else
alert("write Name");
}
</script>
<label >Name</label>
<input type="text" value="mickey" id="name"><br>
<label >Age</label>
<input type="text" value="20" id="age"><br>
<label >Amount</label>
<input type="text" value="enter amount" id="dowry"><br>
<label >Email</label>
<input type="text" value="iamgreat@gmail.com" id="email"><br>
<input type='submit' value='Check Form' onClick='check()'/>
</body>
</html>
--------------------------------------------------------------------------
WEB FORM 2:
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function formValidator(){
var firstname = document.getElementById('firstname');
var addr = document.getElementById('addr');
var zip = document.getElementById('zip');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(madeSelection(state, "Please Choose a State")){
if(lengthRestriction(username, 6, 8)){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
<option>Please Choose</option>
<option>AL</option>
<option>CA</option>
<option>TX</option>
<option>WI</option>
</select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Dropdown Menu</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
</html>
---------------------------------------------------------------------------
CSS FOR ABOVE CODE:
----------------------------------------------------------------------------
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #909eab url(bg.png);
font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
-------------------------------------------------------------------------------------------------
