1.
Coding Step:-
<html>
<head>
<title>
Scratch Work
</title>
<!--- In this portion we include CSS and
Javascript--->
<style>
body{
background-color:
white;
}
ul
{
list-style: none;
text-align:center;
}
li
{
display: inline;
padding: 5px;
}
.header_div
{
width: 100%;
height: auto;
background-color:
white;
}
.header_div1
{
width: 100%;
height: 50%;
background-color:
white;
background:
url("images/extra.png");
}
.div_parent_form
{
width: 30%;
height: auto;
/*background-color:
red;*/
/*background:
url("images/we.jpg");*/
display: block;
}
.div_parent_form1
{
width: 60%;
height: 50%;
/*background-color:#46A93C;*/
float:right;
}
.header_div2
{
width: 100%;
height: auto;
background-color:
yellow;
}
.header_div3
{
width: 50%;
height: auto;
background-color:
pink;
}
.header_div4
{
width: 100%;
height: auto;
background-color:
white;
}
.header_div5
{
width: 100%;
height: 200;
background-color:
white;
color:blue;
}
.header_div51
{
width: 10%;
height:30%;
background-color:
pink;
color:blue;
}
.header_div515
{
width: 30%;
height:50%;
background-color:yellow;
color:blue;
}
.header_div6
{
width: 100%;
height: auto;
background-color:
black;
color: white;
}
.haeder_div7
{
width:100%;
height:200%;
background-color:pink;
}
.ab
{
text-decoration:
none;
}
input
{
width: 40%;
box-shadow: rgb(0, 5,
10, 10);
}
.form_header
{
outline: red;
height;
}
</style>
</head>
<body>
<div class="header_div">
<ul>
<li><a
href="" class="ab">Go Green</a></li>
<li><a
href="" class="ab">Jhoomley</a></li>
<li><a
href="" class="ab">Sell Products</a></li>
<li><a
href="" class="ab">Request Pickup</a></li>
<li><a
href="" class="ab">Subscribe
Newsletter</a></li>
<li><a
href="" class="ab">Subscribe
Newsletter</a></li>
<li><a
href="" class="ab">Redeem Coupon</a></li>
<li><a
href="" class="ab">Contact us</a></li>
</ul>
<div class="header_div1">
<div
class="div_parent_form1">
<form
class="form_header" align="center">
<!--<input
type="text" name="name">-->
<div>
<span><input
type="text" placeholder="Name" style="padding:5px;
font-size:30px; text-align:center;"></span>
</div>
<div>
<span><input
type="text" placeholder="Email id" style="padding:5px;
font-size:30px; text-align:center;"></span>
</div>
<div>
<span><input
type="text" placeholder="Contact
number"style="padding:5px; font-size:30px; text-align:center;"
></span>
</div>
<div>
<span><input
type="text" placeholder="Address" style="padding:5px;
font-size:30px; text-align:center;"></span>
</div>
<div>
<span
colspan="2"><input type="submit"
style="padding:5px; font-size:30px; text-align:center;"
></span>
</div>
</form>
</div>
<div
class="div_parent_form">
<form
>
<div>
<center><h2><span
style="color:Black">Go </span><span
style="color:green">Green</span></h2></center>
<p>At
Extracarbon, our goal is to inspire & reward smarter everyday choices that
lead to a greener, sustainable future.</p>
<p>Extracarbon
allows you to recycle your waste, buy & sell second hands items, and make
eco-friendly choices every day that rewards you now, and in the
future.</p>
<p>Once
you register & start using ExtraCarbon you earn carbon points. These points
can be redeemed for a variety of deals or discounts, and for products &
services that are good for you, your wallet, and the planet.</p>
</div>
</form>
</div>
<!--<div
class="header_div2">
<center><h2><b>Feel
free to call us at : +91-9650527700 </h2></center>
</div>
<div
class="header_div3">
<form>
<div>
<center><h2><b> What is, Extracarbon
</h2></center>
<p>Extracarbon
is simple & efficient platform that allow you to recycle your waste &
sell your product responsibly. It is also a place to learn & inoculated
habits that have direct impact on you and your community.We started Extracarbon
because we saw a need for a unifying platform where members of any local
community can exercise responsibility in getting rid of stuff from their
houses. Extracarbon band together your local wise collectors or 'Kabadiwalas',
and organizes them to make - collection fast easy & honest.You can use
Extracarbon to arrange pick-ups from your house,buy or sell second hand items,
and learn how to better go green.</p>
</div>
</form>
</div>
<div class="header_div4">
<center><p><b>Watch
more videos about Extracarbon and how it works</p></center>
</div>
<div
class="header_div5">
<center><h2><b><u>Our
3 Easy Steps</u></b></h2></center>
<div
class="header_div51"><align="left"><h2
style="color: black;">Step 1</h2></div>
<div
class="header_div515">
<p>You fill in the Online Form or
call with us your pick-up or product details.For products we calculate the
selling price and keep you updated via Email, SMS or
Phone.</p></div>
</div>
<div class="header_div6">
<center><h2><b>Earn
carbon points on every pick-up and sale you make with Extracarbon. Learn
more</b></h2></center>
</div>
<div
class="header_div7">
<center><h2><b><u><span
style="color:brown">Real People, </span><span
style="color:black"> Real Experiences</span>
</b></u></h2></center>
</div>
</div>
</div>-->
</body>
</html>
2. I need to align 2 divs next to each other, so
that each contains a title and a list of items, similar to
Coding Step:-
<html>
<head>
<title>
Scratch Work
</title>
<!--- In this portion we include CSS and
Javascript--->
<style>
body{
background-color: white;
}
ul
{
list-style: none;
text-align:center;
}
li
{
display: inline;
padding: 5px;
}
.header_div
{
width: 100%;
height: auto;
background-color: white;
}
.header_div1
{
width: 100%;
height: 50%;
background-color: white;
background:
url("images/extra.png");
}
.div_parent_form
{
width: 30%;
height: auto;
/*background-color: red;*/
/*background:
url("images/we.jpg");*/
display: block;
}
.div_parent_form1
{
width: 60%;
height: 50%;
/*background-color:#46A93C;*/
float:right;
}
.header_div2
{
width: 100%;
height: auto;
background-color: yellow;
}
.header_div3
{
width: 50%;
height: auto;
background-color: pink;
}
.header_div4
{
width: 100%;
height: auto;
background-color: white;
}
.header_div5
{
width: 100%;
height: 200;
background-color: white;
color:blue;
}
.header_div51
{
width: 10%;
height:30%;
background-color: pink;
color:blue;
}
.header_div515
{
width: 30%;
height:50%;
background-color:yellow;
color:blue;
}
.header_div6
{
width: 100%;
height: auto;
background-color: black;
color: white;
}
.haeder_div7
{
width:100%;
height:200%;
background-color:pink;
}
.ab
{
text-decoration: none;
}
.form_header
{
outline: red;
height;
}
</style>
</head>
<body>
<div class="header_div">
<ul>
<li><a
href="" class="ab">Go Green</a></li>
<li><a
href="" class="ab">Jhoomley</a></li>
<li><a
href="" class="ab">Sell Products</a></li>
<li><a
href="" class="ab">Request Pickup</a></li>
<li><a
href="" class="ab">Subscribe
Newsletter</a></li>
<li><a
href="" class="ab">Subscribe
Newsletter</a></li>
<li><a
href="" class="ab">Redeem Coupon</a></li>
<li><a
href="" class="ab">Contact us</a></li>
</ul>
<div class="header_div1">
<div
class="div_parent_form">
<form >
<div>
<center><h2><span
style="color:Black">Go </span><span
style="color:green">Green</span></h2></center>
<p>At
Extracarbon, our goal is to inspire & reward smarter everyday choices that
lead to a greener, sustainable future.</p>
<p>Extracarbon
allows you to recycle your waste, buy & sell second hands items, and make
eco-friendly choices every day that rewards you now, and in the
future.</p>
<p>Once
you register & start using ExtraCarbon you earn carbon points. These points
can be redeemed for a variety of deals or discounts, and for products &
services that are good for you, your wallet, and the planet.</p>
</div>
</form>
</div>
<div
class="header_div3">
<form>
<div>
<div
class="div_parent_form1">
<form
class="form_header" align="center">
<!--<input
type="text" name="name">-->
<div>
<span><input
type="text" placeholder="Name" style="padding:2px;
font-size:20px; text-align:center;"></span>
</div>
<div>
<span><input
type="text" placeholder="Email id" style="padding:2px;
font-size:20px; text-align:center;"></span>
</div>
<div>
<span><input
type="text" placeholder="Contact
number"style="padding:2px; font-size:20px; text-align:center;"
></span>
</div>
<div>
<span><input
type="text" placeholder="Address" style="padding:2px;
font-size:20px; text-align:center;"></span>
</div>
<div>
<span
colspan="2"><input type="submit"
style="padding:2px; font-size:20px; text-align:center;"
></span>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
<!--- Headings--->
<!--<p>Hello
<br/>world</p>
<p>Hi</p>-->
</body>
</html>
Thanks...
