<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Beginner</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.625em;
color: #406070;
}
#wrapper {
max-width:735px;
width: 100%;/*735/735=1*100=100%*/
margin-right: auto;
margin-left: auto; }
header {
width: 100%;
position:relative;
}
#logo {
position: absolute;
width:25.98639455782313%;
left: 1.360544217687075%;/*10/735*/
}
#banner {
width:100%;
}
.top-menu {
width: 100%;
height: 42px;
margin-right: auto;
margin-left: auto;
}
.top-menu img {
float: left;
}
.content {
width: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.col1 {
width: 27.2108843537415%;
margin-top: 30px;
margin-left: 0.6802721088435374%;
float: left;
}
.col1 h2 {
background-image: url(images/company-highlight.png);
background-repeat: no-repeat;
height: 18px;
width: 100%;
overflow: hidden;
text-indent: -100px;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #ececec;
}
.col1 article {
padding-left: 9%;
padding-top: 15px;
padding-right: 10.5%;
}
.col1 article p {
padding-bottom: 14px;
}
.col1 article h6 {
color: #a61260;
font-weight: 700;
}
.text-normal {
font-weight: 400;
}
.support {
background-image: url(images/professional-sup-img.png);
background-repeat: no-repeat;
height: 100px;
width: 83%;
margin-left: 5%;
}
.col2 {
float: left;
width: 30.8843537414966%;
margin-left: 3.524229074889868%;
margin-top: 24px;
}
.col2 h2 {
background-image: url(images/welcome.png);
background-repeat: no-repeat;
height: 39px;
width: 86.784140969163%;
text-indent: -200px;
overflow: hidden;
margin-left: 7.048458149779736%;
}
.col2 .box1 {
padding-right: 20.70484581497797%;
padding-left: 7.048458149779736%;
}
.col2 .box1 p {
padding-top: 11px;
padding-bottom: 4px;
}
.col2 .box1 p strong {
color: #a90b0a;
font-weight: 700;
}
.arrow {
background-image: url(images/arrow.png);
background-repeat: no-repeat;
height: 14px;
width: 100%;
background-position: right top;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #ececec;
}
.service {
background-image: url(images/service-img.png);
background-repeat: no-repeat;
height: 86px;
width: 29.07488986784141%;
float: left;
margin-left: 5.726872246696035%;
margin-top: 10px;
margin-right: 4.405286343612335%;
}
.col2 article .box2 {
width: 50.06607929515419%;/*125/227*/
float: left;
padding-right: 10.4%;/*13/125*/
margin-top: 12px;
margin-bottom: 18px;
}
.col2 .box2 h4 {
color: #a90b0a;
font-size: 0.75em;/*12/16*/
text-transform: uppercase;
padding-bottom: 14px;
font-weight: 700;
}
.col2 article {
overflow: hidden;
}
.col3 {
float: left;
width: 31.42857142857143%;/*231/735*/
margin-left: 5.306122448979592%;
margin-top: 22px;
}
.col3 .arrow.right {
margin-left: 1.731601731601732%;/*4/231*/
}
.col3 .arrow.right.top {
margin-bottom: 18px;
}
.col3 article{
overflow: hidden;
}
.col3 article .pic1 {
background-image: url(images/develop-img.png);
background-repeat: no-repeat;
float: left;
height: 108px;
width: 35.4978354978355%;
margin-bottom: 14px;
}
.col3 article .pic2 {
background-image: url(images/partner-img.png);
background-repeat: no-repeat;
float: left;
height: 108px;
width: 35.4978354978355%;
margin-bottom: 5px;
}
.col3 article .text {
width: 54.54545454545455%;/*126/231*/
float: left;
margin-left: 4.761904761904762%;
margin-top: 8px;
}
.col3 article .text h4 {
font-size: 0.75em;
color: #a90b0a;
padding-bottom: 12px;
font-weight: 700;
}
.purple {
color: #a61260;
font-weight: 700;
padding-top: 12px;
}
.orange {
color: #e27c00;
font-weight: 700;
padding-top: 12px;
}
footer {
height: 76px;
width: 100%;
}
footer summary {
color: #949494;
margin-left: 1.224489795918367%;/*9/735*/
float: right;
line-height: 76px;
}
footer nav ul {
float: right;
width: 49.93877551020408%;/*345/735*/
margin-left: 16.3265306122449%;
height: 76px;
}
footer nav ul li {
display: block;
float: left;
margin:0 0.4695652173913043%;
}
footer nav ul li a {
line-height: 76px;
color: #6290a8;
text-decoration: none;
font-weight: 700;
}
footer nav ul li a:link {
}
footer nav ul li a:hover {
color: #a90b0a;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 320px)
{
#logo {
display:block;
margin-top:3px;
}
.top-menu img {
width: 50%;
display: block;
clear: both;
margin: 0 25%;
}
.col1 {
margin-top: 30px;
margin-left: 0.1%;
float: none;
}
.col1 h2 {
width: 230px;
}
.col1 article {
width: 230px;
margin: 0 5px;
padding-top: 15px;
}
.support {
width: 200px;
margin-left: 60%;
}
.col2, .col3 {
float: none;
width: 230px;
margin-left: 3.524229074889868%;
margin-top: 24px;
}
footer {
width: 280px;
}
footer summary {
line-height: 25px;
float:none;
margin:50px;
}
footer nav{
width:280px;
float:none;
}
footer nav ul {
width: 200px;
}
footer nav ul li {
display: block;
float: left;
height:15px;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<a href="index.html" title="first-page"><img src="images/logo.png" title="logo" alt="logo" id="logo"></a>
<img src="images/banner.png" title="banner" alt="banner" id="banner">
</header>
<nav class="top-menu">
<a href="company.html" title="company"><img src="images/company.png" alt="company" title="company"></a>
<a href="service.html" title="service"><img src="images/service.png" title="service" alt="service"></a>
<a href="partner.html" title="partner"><img src="images/partner.png" title="partner" alt="partner"></a>
<a href="support.html" title="support"><img src="images/support.png" title="support" alt="support"></a>
<a href="news.html" title="news"><img src="images/news.png" title="news" alt="news"></a>
<a href="contact.html" title="contact"><img src="images/contact.png" title="contact" alt="contact"></a>
</nav>
<div class="content" role="main">
<div class="col1">
<h2>Company Highlights</h2>
<article>
<h6>11.04.05 <span class="text-normal">– At vero eos et</span></h6>
<p>Accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua.</p>
<h6>10.04.05 <span class="text-normal">– Accusam et justo</span></h6>
<p>Duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua. Accusam et justo</p>
</article>
<div class="support"></div>
</div>
<div class="col2">
<h2>Welcometo Our Company Website</h2>
<article class="box1">
<p>Lorem ipsum dolor sit amet, cons etetur sadi pscing sed adiam ipsum </p>
<p><strong>Erat, sed diam voluptua.</strong> At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua.</p>
</article>
<div class="arrow"></div>
<article>
<div class="service"></div>
<div class="box2">
<h4>Service overview</h4>
<p>Duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua. Accusam et justo</p>
</div>
</article>
<div class="arrow"></div>
</div>
<div class="col3">
<article>
<div class="pic1"></div>
<div class="text">
<h4>DEVELOPMENT</h4>
<p>Duo dolores et ea rebum. </p>
<h6 class="purple">Lorem ipsum dolor sit </h6>
<p>amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua. Accusam et justo</p>
</div>
</article>
<div class="arrow right top"></div>
<article>
<div class="pic2"></div>
<div class="text">
<h4>PARTNERS</h4>
<p>Duo dolores et ea rebum. </p>
<h6 class="orange">Lorem ipsum dolor sit </h6>
<p>amet, consetetur sadi pscing elitr, sed dam Erat, sed diam voluptua. Accusam et justo</p>
</div>
</article>
<div class="arrow right"></div>
</div>
</div>
<footer>
<nav>
<ul>
<li><a href="index.html" title="home">Home</a> |</li>
<li><a href="About.html" title="About">About Us</a> |</li>
<li><a href="Services.html" title="Services">Services</a> |</li>
<li><a href="Support.html" title="Support">Support</a> |</li>
<li><a href="Partners.html" title="Partners">Partners</a> |</li>
<li><a href="News.html" title="News">News</a> |</li>
<li><a href="Contact.html" title="Contact">Contact Us</a></li>
</ul>
</nav>
<summary>Copyright © Your Company Name</summary>
</footer>
</div>
</body>
</html>
---------------------------------------------------------------------------
