Create A Web Page Using HTML5 & CSS


HTML5 Code:

<!DOCTYPE html>
<html>
<head>
<title>Systematic - An Accounting Firm</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="top-bar clearfix">
<div class="top-bar-links">
<ul>
<li><a href="#">Sign up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">RSS Feeds</a></li>
<li><a href="#">Archived News</a></li>
<ul>
</div>

<div class="site-search">
<form method= "get" action="index.html">
<input type="search" name="search-box">
<button type="submit"></button>
</form>
    </div>
</div>

<header class="clearfix">
<div class="logo">
<h1>Systematic</h1>
<p>An Accounting Firm</p>
</div>

<div class="socialmedia">
<ul>
<li><a href="#"><i class="fa fa-linkedin  fa-fw"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p fa-fw"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus fa-fw"></i></a></li>
<li><a href="#"><i class="fa fa-rss fa-fw"></i></a></li>
</ul>
</div>

</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

<div class="intro clearfix">
<div class="introimage">
<img src="img/accountant.jpg" alt="Accountant">
</div>
<div class="introtext">
<h1>A Huge <br>Title Here</h1>
<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.</p>
<a href="#">Read More &raquo;</a>
</div>
</div>
<div class="homecontent clearfix">
<div class="home-col">
<h2>A Little About Us</h2>
<img src="img/about-us.jpg" alt="About Us">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">Read More About Us &raquo;</a>
</div>

<div class="home-col">
<h2>Some of Our Services</h2>
<div class="Services">
<img src="img/services/statistics-market-icon.png" alt="service">
<h3>Service Name</h3>
<p>A brief description about each service goes here...</p>
</div>
<div class="Services">
<img src="img/services/certificate-icon.png" alt="service">
<h3>Service Name</h3>
<p>A brief description about each service goes here...</p>
</div>
<div class="Services">
<img src="img/services/dollar-rotation-icon.png" alt="service">
<h3>Service Name</h3>
<p>A brief description about each service goes here...</p>
</div>
<div class="Services">
<img src="img/services/lock-icon.png" alt="service">
<h3>Service Name</h3>
<p>A brief description about each service goes here...</p>
</div>
<a href="#">View All of Our Services &raquo;</a>
</div>

<div class="home-col">
<h2>What Our clients Say</h2>
<div class="quote">
<i class="fa fa-quote-left fa-4x"></i>
<h3>Harshana Walpita - CEO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">View This Project &raquo;</a>
</div>
<div class="quote">
<i class="fa fa-quote-left fa-4x"></i>
<h3>Harshana Walpita - CEO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">View This Project &raquo;</a>
</div>
</div>

</div>

<footer>
<div class="footercol">
<h4>Latest Tweets</h4>
<div class="tweet">
<p>
<a href="#">@namehere</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.<br>1 day ago
</p>

</div>
<div class="tweet">
<p>
<a href="#">@namehere</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.<br>1 day ago
</p>

</div>
</div>
<div class="footercol">
<h4>Quick Links</h4>
<ul class="quicklinks">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>

</ul>
</div>
<div class="footercol">
<h4>Latest Blog Posts</h4>
<div class="blogpost">
<h5>Post Title</h5>
<div class="postinfo">
<a href="#">Admin</a>
domainname.com <br>
Sunday, 29th May 2016
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#"class="readmore">Read More &raquo;</a>
</div>
<div class="blogpost">
<h5>Post Title</h5>
<div class="postinfo">
<a href="#">Admin</a>
domainname.com <br>
Sunday, 29th May 2016
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#"class="readmore">Read More &raquo;</a>
</div>
</div>
<div class="footercol">
<h4>Contact Us</h4>
<form action="index.html" class="contact">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" id="" cols="30" rows="10" placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</footer>

<div class="copyrights">
<div class="left">
Copyrights &copy; Domain Name. All Rights Reserved
</div>
<div class="right">
Website by: Harshana Walpita
</div>


</div>

</div>

</body>
</html>

CSS Code:

* { margin: 0; padding: 0; }

a { text-decoration: none; color: red; }

p {margin-top: 10px; margin-bottom: 15px; font-size: 18px; color: #444;}

.clearfix { overflow: auto }

.wrapper {
margin: 0 auto;
width: 1000px;
}

.top-bar {
width: 1000px;
background: maroon;
}

.top-bar-links {
float: left;
}

.top-bar-links ul {
margin: 15px;
list-style: none;
}

.top-bar-links ul li {
padding: 0 10px;
display: inline-block;
border-right: 1px solid white;
}

.top-bar-links ul li:last-child {
border: 0;
}

.top-bar-links ul li a {
color: white;
}

.site-search {
padding: 3px 5px 3px 10px ;
margin: 15px;
float: right;
background: white;
border-radius: 10px;
}

.site-search input {
border: 0;
float: left;
}

.site-search button {
width: 18px;
height: 18px;
background: url(../img/icons/search.png);
border: 0;
float: right;
}

header .logo{
margin-top: 30px;
margin-left: 20px;
float: left;
}

header .logo h1{
        font-size: 48px;
        font-weight: normal;
        letter-spacing: -1px;
        font-varient: small-caps;
}

header .socialmedia ul{float: right; margin-top: 50px; margin-right: 20px;}
header .socialmedia ul{list-style: none}
header .socialmedia ul li{display: inline}

header .socialmedia ul li a {
margin-left: 5px;
padding: 6px;
background: #444;
color: #fff;
display: inline-block;
border-radius: 20px;
}

header .socialmedia ul li a:hover{
background: orange;
}

nav{
margin-top: 20px;
background: #000;
background: linear-gradient(#0d0d0d, #404040, #0d0d0d);
text-align: center;
border-radius: 5px;
}

nav{
list-style: none;
}

nav ul li{
display: inline;
}
nav ul li a{
color: #fff;
text-transform: uppercase;
margin: 10px 40px 10px 40px;
     display: inline-block;
}
nav ul li a:hover{
color: red;
}

div.intro{
width: 970px;
margin: 15px;
margin-bottom: 0;

}

div.intro div.introimage{
width: 400px;
float: left;
}

div.introimage img{
float: left;
}

div.intro div.introtext{
width: 570px;
float: left;
}

div.introtext h1{
font-weight: normal;
margin-top: 100px;
font-size: 72px;
text-transform: uppercase;
}
div.introtext p{
font-size: 18px;
}

div.introtext a{
text-transform: uppercase;

float: right;
}

div.homecontent{
width: 1000px;
background: #eee;
margin-bottom: 15px;
padding-bottom: 15px;
}

div.home-col{
margin-left: 15px;
width: 313.33px;
    float: left;

}
div.home-col img{
width: 313.33px;
}

div.home-col h2{
margin: 30px 0 30px 0;
font-size: 30px;
font-weight: normal;
}
div.home-col a {
float: right;
}

div.Services{
margin-bottom: 20px;
}

div.Services img{
width: 64px;
float: left;
margin-right: 15px;
}
div.Services p{
margin-top: 0;
}
div.quote {
float: left;
}

div.quote i{
float: left;
}
div.quote h3{
margin-top: 20px;
margin-left: 15px;
float: left;
}
div.quote p{
clear: both;
}

footer{
width: 1000px;
margin-top: 15px;
margin-bottom: 15px;
float: left;
}
div.footercol{
width: 231.25px;
float: left;
margin-left: 15px;
border-top: 1px solid #000;
}
div.footercol h4{
font-size: 20px;
text-transform: uppercase;
margin-top: 15px;
margin-bottom: 15px;
color: #444;
}

div.tweet p{
font-size: 16px;
}

ul.quicklinks{
margin-top: 10px;
list-style: none;
}
ul.quicklinks li a{
padding-bottom: 5px;
margin-bottom: 5px;
display: block;
border-bottom: 1px solid #aaa;
color: #666;
}
ul.quicklinks li a::before{
content: "*";
}

ul.quicklinks li a:hover{
color: red;
}
div.blogpost h5{
font-size: 20px;
}
div.blogpost p{
font-size: 16px;
}
div.blogpost a.readmore{
float: right;
}
div.blogpost{
clear: both;
}

form.contact input, form.contact textarea {
background: #eee;
padding: 5px;
margin-bottom: 5px;
width: 221.25px;
border: none;
border-radius: 5px;
font-family: inherit;
font-size: 16px;
}
form.contact textarea{
height: 120px;
}
form.contact button{
background: #eee;
color: red;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
font-family: inherit;
}
div.copyrights{
width: 1000px;
background: #eee;
float: left;
}
div.left{
float: left;
margin: 20px;
}
div.right{
float: right;
margin: 20px;
}

Web Page:




Comments

Post a Comment

Popular posts from this blog

Programming Using GNU Octave

Image
  Questions: 1 A small object is projected from a toy gun to travel some distance and land on the ground. 1. Write a function to model the dynamics of the object in Octave called f_trajectory. f_trajectory will accept following arguments in the same order (measured in the given units). Also specify the default values for each parameter as given in brackets. i. h(5) : Initial height of the projectile (m) ii. g(9.81) : acceleration from gravity (m/s/s) iii. v(25) : speed at initial release (m/s) iv. theta(π/4) : angle of release (radians) v. t : a vector representing the points in time For default values of t check if the variable ‘exist’ with name ‘t’ and type ‘var’ if not initialize it as a row vector starting from 0 and goes to 5 with increments of 0.1. If x is distance and y is height, the equations below describe their dependence on time and all the other parameters. 𝑥(𝑡)=𝑣𝑐𝑜𝑠(𝜃)𝑡 ----------------(eq1) 𝑦(𝑡)=ℎ+𝑣𝑠𝑖𝑛(𝜃)𝑡− 12𝑔𝑡2 ---------------(eq2) Convert the above e
Read more

Library Problem

Image
A giant library has just been inaugurated this week. It can be modeled as a sequence of N consecutive shelves with each shelf having some number of books. No, think of the following two queries which can be performed on these shelves. ● Change the number of books in one of the shelves. ● Obtain the number of books on the shelf having the kth rank within the range of shelves. A shelf is said to have the kth rank if its position is k when the shelves are sorted based on the number of the books they contain, in ascending order. Can you write a program to simulate the above queries? Input Format : The first line contains a single integer T, denoting the number of test cases. The first line of each test case contains an integer N denoting the number of shelves in the library. The next line contains N space separated integers where the ith integer represents the number of books on the ith shelf where 1<=i<=N. The next line contains an integer Q denoting the number of queries to
Read more

What Is A Gamma Ray Burst?

Image
Imagine if you could gather the energy from every star within a hundred million light-years. From thousands of galaxies, each with billions of stars. Imagine, you could take this kind of power, and use it to fire the biggest super-weapon in the universe. Imagine the damage you could do. It turns out, you don't need to imagine it. These exist, and they're called gamma-ray bursts. But what are these cosmic snipers? And what happens if one takes a shot at Earth? To understand gamma-ray bursts, we first have to understand gamma rays. Gamma rays are electromagnetic radiation – waves that carry energy just like visible light. Visible light is a tiny part of the electromagnetic spectrum: it's the part your eyes can see. At lower energies, there are radio waves, microwaves, and infrared. And at higher energies: ultraviolet, x-rays, and gamma rays. Gamma rays are incredibly powerful. A single gamma-ray photon is more energetic than a million visible photons combined. Their
Read more