-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (126 loc) · 4.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<title>Beena Avireni - Front end Developer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1 class="main-title">Beena Avireni<br><span>Front end Developer</span></h1>
<nav class="main-nav">
<ul>
<li class="bg-orange"><a href="#">home</a>
</li>
<li class="bg-purple"><a href="#">about</a>
</li>
<li class="bg-yellow"><a href="#">services</a>
</li>
<li class="bg-green"><a href="#">blog</a>
</li>
<li class="bg-blue"><a href="#">contact</a>
</li>
</ul>
</nav>
</header>
<section class="main-content">
<div class="feature-slider">
<a href="#" class="nav-left"></a>
<a href="#" class="nav-right"></a>
<ul class="slider-nav">
<li class="active">
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<div class="slide">
<div class="slide-text">
<h2>Web Design Services</h2>
<p>Beena has been developing websites. Learn more about how she can help your business find the online presence it deserves.</p>
<a class="btn bg-orange" href="#">Click Here to Learn More</a>
</div>
<!-- slide-text -->
<img class="slide-image" alt="Web Design Services" src="img/portfolio.jpg">
</div>
<!-- slide -->
</div>
<!-- feature-slider -->
<section class="feature-services">
<div class="column-half bg-green">
<img alt="Web and Graphic Design" src="img/monitor.png">
<h2><a href="#">Web & Graphic Design</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p><a href="#">Read More >></a>
</p>
</div>
<div class="column-half bg-dark-green">
<img alt="Video Production" src="img/camera.png">
<h2><a href="#">Video Production</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p><a href="#">Read More >></a>
</p>
</div>
</section>
<!-- feature-services -->
<footer class="clearfix">
<div class="column-one-third">
<h2>From the Blog</h2>
<ul class="blog-list">
<li><a href="#">Flat Design - Here to Stay?</a>
</li>
<li><a href="#">Determining Your Audience</a>
</li>
<li><a href="#">Han Shot First</a>
</li>
</ul>
</div>
<div class="column-one-third">
<h2>Connect with Me</h2>
<ul class="social-list">
<li>
<a href="#">
<img src="img/facebook.gif">
</a>
</li>
<li>
<a href="#">
<img src="img/twitter.gif">
</a>
</li>
<li>
<a href="#">
<img src="img/google-plus.gif">
</a>
</li>
<li>
<a href="#">
<img src="img/youtube.gif">
</a>
</li>
</ul>
</div>
<div class="column-one-third column-registration">
<h2>Register for Updates</h2>
<form method="post" action="">
<input id="txtName" type="text" placeholder="Name">
<input id="txtEmail" type="email" placeholder="[email protected]">
<button id="btnRegister" class="btn">Sign Me Up</button>
</form>
</div>
</footer>
</section>
<!-- main-content -->
</body>
</html>