202102100410025

Practical-14
Aim-CSS Mini Project
<div class="container">
<!-- Top Navigation -->
<div class="cctop clearfix">
<center><h>Flipkart</h></center>
</div>
<div><span class="right"><a
href="https://www.flipkart.com/"><b>https://www.flipkart.com/</b></
a></div>
<div class="wrapper">
<div class="cctabs">
<input checked id="one" name="tabs" type="radio">
<label for="one"><i class="fa fa-pencil-square-o"></i>
Service</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two"><i class="fa fa-magic"></i> History</label>
<input id="three" name="tabs" type="radio">
<label for="three"><i class="fa fa-plus-square"></i>
Forms</label>
<input id="four" name="tabs" type="radio">
<label for="four"><i class="fa fa-envelope"></i> Contact</label>
<div class="panels">
<div class="panel">
<center>
<h2>Flipkart online Services</h2>
</center>
<p>Flipkart went live in 2007 with the objective of making
books easily available to anyone who had internet access.
Today, we're present across various categories including
movies, music, games, mobiles, cameras, computers,
healthcare and personal products, home appliances and electronics
? and still counting! With over
11.5 million book titles, 11 different categories, more
than 2 million registered users and sale of 30000
items a day, we can say with utmost confidence that we are
one of
the leading e-commerce players in
the country. We believe that our success is largely due to
our
obsession with providing our customers a memorable online
shopping experience. Be it our path-breaking services like Cash on
Delivery, a 30-day replacement policy, EMI options, free
shipping - and of course the

Web design
 202102100410025

great prices that we offer. Then there's our dedicated

Flipkart delivery team that works round the clock to personally make
sure packages reach
on time. For now they're present in 27 lucky cities, but
don't
worry, plans are underway to spread to many others.</p>
<div class="cc-mt-20"></div>
<div class="grid cc-text-center">
<div class="unit-3"> <i class="fa fa-lightbulb-o
fa-4x"></i> <h3>Awesome Tabs</h3>
<p>Awesome in design and ready to used and customize as
you need to fit into your design.</p>
<a href="#">Read more ...</a>
</div>
<div class="unit-3"> <i class="fa fa-laptop fa-4x"></i>
<h3>Responisve Tabs Menu</h3>
<p>These tabs are full responsive and work well on all
kind of devices.</p>
<a href="#">Read more ...</a>
</div>
<div class="unit-3"> <i class="fa fa-leaf fa-4x"></i>
<h3>Superb Design Layout</h3>
<p>Let's get to know more about these CSS Tabs Menu like
how you can build step by step.</p>
<a href="#">Read more ...</a>
</div>
</div>
</div>
<div class="panel">
<div class="headline">
<h1>History of Flipkart</h1>
<hr>
<p class="lead">We provide best solution for your
business</p> </div>
<p>Flipkart was founded in October 2007 by Sachin Bansal and
Binny Bansal, alumni of the
IIT, Delhi and former Amazon employees.[12][13][14] The
company initially focused on online book sales with
country-wide shipping. Flipkart slowly grew in prominence and
was receiving 100 orders per day by 2008.[15] In 2010, Flipkart
acquired the Bangalore-based social book discovery service
WeRead from Lulu.com.[16]</p>
</div>
<div class="panel">
<div class="unit-2">
Web

design
 202102100410025

<h4>Contact Us From</h4>
<form id="cc-contact" action="" method="post">
<input placeholder="your name" type="text" tabindex="1"
autofocus>
<input placeholder="Email Address" type="email"
tabindex="2" required>
<input placeholder="Phone Number" type="tel" tabindex="3"
required>
<input placeholder="Webite" type="text" tabindex="4"
required>
<textarea placeholder="Type your Message Here...." tabindex="5"
required></textarea>
<button name="submit" type="submit" id="contact-submit"
datasubmit="...Sending">Submit</button>
</form>
</div>
<div class="unit-2">
<h4>Registratoin From</h4>
<form id="cc-contact" action="" method="post">
<input placeholder="username" type="text" tabindex="1"
required autofocus>
<input placeholder="Email Address" type="email"
tabindex="1" required autofocus>
<input placeholder="Password" type="password"
tabindex="2" required>
<button name="submit" type="submit">Register</button>
</form>
<h4>Login From</h4>
<form id="cc-contact" action="" method="post">
<input placeholder="Email Address" type="email"
tabindex="1" required autofocus>
<input placeholder="Password" type="password"
tabindex="2" required>
<button name="submit" type="submit">Login</button>
</form>
</div>
</div>
<div class="panel">
<div class="unit-2">
<form id="cc-contact" action="" method="post">
<input placeholder="your name" type="text" tabindex="1"
autofocus>
<input placeholder="Email Address" type="email"
tabindex="2" required>

Web design
 202102100410025

<input placeholder="Phone Number" type="tel" tabindex="3"

required>
<input placeholder="Webite" type="text" tabindex="4"
required>
<textarea placeholder="Type your Message Here...." tabindex="5"
required></textarea>
<button name="submit" type="submit" id="contact-submit"
datasubmit="...Sending">Submit</button>
</form>
</div>
<div class="unit-2">
<div id="map-canvas"></div>
</div>
<div class="unit-1 cc-text-center cc-mt-20">
<div class="unit-3"> <i class="fa fa-map-marker fa-2x"></i>
<p>Post Code 45600, USA NY</p>
</div>
<div class="unit-3"> <i class="fa fa-phone fa-2x"></i>
<p> <strong>Phone:</strong> (+55) 555 5555 <br>
<strong>Mobile:</strong> (+33) 333 5555
</p>
</div>
<div class="unit-3"> <i class="fa fa-envelope-o fa-2x"></i>
<p> <strong>Email:</strong> <a
href="mailto:[email protected]">[email protected]</a> <br>
<strong>Skype:</strong> skypeID
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/*
Author: https://codeconvey.com/
*/
@import url(https://fonts.googleapis.com/css?
family=Lato:300,400,700); body { background: -moz-linear-
gradient(to bottom, blue, red, greem=n, black)
#c4e8e9; color: #000; font-weight:
400; font-size: 1em; font-family:
'Lato', Arial, sans-serif; margin: 0;
padding: 0; padding-bottom: 40px;
Web

design
 202102100410025

} a
{ color:
#ff0000;
textdecoration:
none; }
a:hover, a:focus
{ color: #000;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-
box; -moz-box-sizing:
border-box; box-sizing:
border-box; } a, button
{ outline:
none;
}
.clearfix:before, .
clearfix:after
{ content: " ";
display:
table; } .clearfix:
after { clear:
both; }
/* To Navigation Style */
.cctop { background:
#00ffff; width: 100%;
text-transform: uppercase;
font-weight: 700;
fontsize: 1.9em; line-
height: 2; } .cctop a {
display: inline-block;
padding: 0 1.5em;
textdecoration: none;
letterspacing:
1px; } .cctop
span.right { float:
right; } .cctop
span.right a { display:
block; float: left; }
/* Header Style */
.ccheader { margin:

Web design
 202102100410025

0 auto;
padding: 2em;
text-align:
center; } .cc
header h1
{ font-size:
2.625em; font-
weight: 300;
line-height: 1.3;
margin:
0; } .ccheader h1
span { display:
block; padding:
0 0 0.6em 0.1em;
fontsize: 60%;
opacity: 0.7;
}
/* Demo Buttons Style
*/ .codeconvey-demo
{ paddingtop: 1em; font-
size: 0.8em;
}
.codeconvey-demo a
{ display: inline-block;
margin: 0.5em; padding:
0.7em 1.1em; outline:
none; border: 2px solid
#fff; color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
fontweight: 700;
}
.codeconvey-demo a:hover,
.codeconvey-demo a.current-
demo, .codeconvey-demo a.current-demo:hover {
border-color: #000000; color:
#000000;
}
/* Wrapper Style */
.wrapper
{ margin: 0 auto;
paddingleft: 12%;
paddingright: 12%;
} section
Web

design
 202102100410025

{ float: left;
width: 100%; }
.opt {
background: url(../images/bg.jpg) repeat-x;
padding: 3%; } @import url(https://fonts.googleapis.com/css?
family=Open+Sans:400italic,400,300,600);
@font-face { font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?
v=4.0.3'); src:
url('../fonts/fontawesomewebfont.eot?
#iefix&v=4.0.3')
format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?
v=4.0.3')
format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3')
format('truetype'), url('../fonts/fontawesomewebfont.svg?
v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal;
font-style: normal;
} .cctabs
{ width: 100%;
margin: 100px auto;
}
.cctabs input[type="radio"]
{ opacity: 0; }
.cctabs .fa
{ marginright: 10px;
}
.cctabs label
{ color: #000;
cursor:
pointer; float:
left; margin-
right:
2px; padding: 0.5%
2%; font-size:
16px; font-weight:
bold;
}
.cctabs label:hover { background: -webkitlinear-
gradient(#777, #666);
}
.cctabs input:checked+label
{ background: #c5eac4; color:
#ebb704; border-top: solid 2px
#ebb704;

Web design
 202102100410025

}
.cctabs input:nth-of-type(1):checked~.panels .panel:first-child,
.cctabs input:nth-of-type(2):checked~.panels .panel:nth-child(2),
.cctabs input:nth-of-type(3):checked~.panels .panel:nth-
child(3), .cctabs input:nth-of-type(4):checked~.panels .panel:last-
child { opacity: 1;
-webkit-transition: .3s;
/*position:relative;*/ z-index:
999;
}
.cctabs .panels
{ float: left;
clear: both;
position: relative;
width:
100%; background:
#020101;
} .cctabs .panel {
width: 100%;
opacity: 0;
position: absolute;
background: #94e5ea;
padding: 4%;
boxsizing: border-box;
} .cctabs .panel h2 {
margin: 0;
fontfamily: Arial; }
.cctabs .panel i
{ color: #a57e09;
cursor:
pointer;
}
.cctabs .panel i:hover
{ color: #f4cc42;
}
.cctabs .headline h1
{ fontsize: 30px; font-
weight: bold; letter-spacing:
0.6px; padding-bottom: 0;
text-align: center; text-
rendering:
optimizespeed; margin: 10px 0;
}
.cctabs .headline hr { background:
none repeat scroll 0 0 #ebb704;
Web

design
 202102100410025

border: 2px solid; color: #ebb704;

margin-bottom: 0; margin-top: 0;
width:
30px;
}
.cctabs .headline .lead { font-
family: "Lato", sans-serif; font-
weight: 300; line-height: 1.9;
margin: 5px 0; textalign: center;
}
</style>
Output

Web design
 202102100410025

Web

design