HTML5Demo/index.html at master · priyasadhale/HTML5Demo · GitHub

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
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Rocket Design - Mobile Web Design Services</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link href="css/font-awesome.min.css" rel="stylesheet"/>
	<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
</head>
<body>
		<header>
			<div id = "header-inner">
				<a href="index.html" id = "logo"></a>
				<nav>
					<a href = "#" id="menu-icon"></a>
					<ul>
						<li> <a href = "index.html" class = "current">Home</a>
						<li> <a href = "#">Skills</a>
						<li> <a href = "#">Portfolio</a>
						<li> <a href = "#">Our Team</a>
						<li> <a href = "#">Contact</a>
					</ul>
				</nav>
			</div>
		</header>
<!-- end of header -->

<section class = "banner">
	<div class = "banner-inner">
		<img src = "img/rocket_design.png">
	</div>
</section>
<!-- end banner -->
<section class = "one-fourth" id = "html">
	<td><i class= "fa fa-html5"></i></td>
	<h3>HTML</h3>
</section>

<section class = "one-fourth" id = "css">
	<td><i class= "fa fa-css3"></i></td>
	<h3>CSS3</h3>
</section>

<section class = "one-fourth" id = "seo">
	<td><i class= "fa fa-search"></i></td>
	<h3>SEO</h3>
</section>

<section class = "one-fourth" id = "social">
	<td><i class= "fa fa-users"></i></td>
	<h3>Social</h3>
</section>

<!-- end of four column section -->

<section class = "inner-wrapper">
	<article id = "tablet">
		<img src = "img/hand_ipad.png">
	</article>
		<aside id = "tablet2">
			<h2>MOBILE. TABLET. DESKTOP</h2>
			<p>
				sdgfjgj sjdhfowerhoiw fsk hfjkshdf hfioi jhfjshf ksdhfhioe nvvniofncnksdnfsdfhioewnc. cgdjhfuhef
				fjsadhfieh . oihfhe nhsdkhcoe.hdfhfjhfwoefh. socheof  hohofhoe. cncoenco ncdienc. ewfhhfiwhefoi  hthskh
				sfhkhri.
			</p>
		</aside>

</section>

<section class = "inner-wrapper-2">
	<article id = "mobile">
		<h2> ACROSS EACH DEVICE</h2>

		<p>
			shfdjsh ieruwie rf njhoe ncsdfhjdfhoefl ahjhdfhoeifh nnhfiriwur. in this video we will learn how to design a responsive HTML5
			and CSS3 website from scratch using a text editor.
		</p>
	</article>
	<aside>
		<img src = "img/hand_mobile.png">
	</aside>
</section>

<section class="inner-wrapper">
	<article>
		<img src = "img/desktop.png">
	</article>
	<aside id = "desktop">
		<p> sfshkh ncioueior nch ahfoe .chfjshoe hfhoqoi ncjandfno weiru nchshoi ncnoirq . sfjhoeihr shfdjhit chaoeir ndhoth calkjwehr.
			ashfeir fnriot ahoir cnoaieut fhjdhtoi.
	</aside>
</section>

<!-- end main two column section -->

	<section class = "inner-wrapper-3">
		<section class = "one-third" id = "google">
			<h3>GOOGLE SEARCH</h3>
			<p>
				fshjtho fshdfhoree fhjhfoeh hfjhfhwoeirh t.s cdhuweirwie chwhtiqwierd. hfriuqer
			</p>
		</section>

		<section class = "one-third" id = "marketing">
			<h3> MARKETING	</h3>
			<p>fjhfhhweoi fshfhiti tfjhfhoieur hdjfhweior nchiowetioh
		</section>

		<section class = "one-third" id = "customers">
			<h3>HAPPY CUSTOMERS</h3>
			<p>
				hfjsfh hsfdjheriow sj fjhsjfh cnjsnsnctiuti hsjfhowier n. hfoiew shfothi nchiwoer hgjhriotioe nshfiwper.
		</section>
	</section>

<!-- end three column strucure -->

	<section id = "smiley">
		<h2>: )</h2>
	</section>
<!-- end of smiely face. -->
	<footer>
		<ul class = "social">
			<li> <a href="www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a>
			<li><a href = "plus.google.com"><i class = "fa fa-google-plus"></i></a>
			<li> <a href="www.twitter.com"><i class = "fa fa-twitter"></i></a>
			<li><a href = "youtube.com"><i class = "fa fa-youtube"></i></a>
			<li><a href = "instagram.com"><i class = "fa fa-instagram"></i></a>
		</ul>
	</footer>
<!-- end footer-->
	<footer class = "second">
		<p>&copy; Roclet Design</p>
	</footer>

	https://www.youtube.com/watch?v=muZ0JYBCnrU
	https://www.youtube.com/watch?v=4Oggpc9gl5g

</body>
</html>