forked from priyadarshini09/html-css
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·143 lines (136 loc) · 5.61 KB
/
index.html
File metadata and controls
executable file
·143 lines (136 loc) · 5.61 KB
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
142
143
<!DOCTYPE html>
<!--Html markup-->
<html>
<!--All external stylesheet are included where first comes the reset then 960 grid system.Also links google fonts and awesome icons are included-->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/960_12_col.css">
<link rel="stylesheet" href="css/text.css">
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Black and Chalk</title>
</head>
<!--The prime content of the page starts here-->
<body>
<!--Complete body is contained in a container of 960 grid system-->
<div class="container_12">
<article>
<header class="img_logo grid_12">
<h1>Black and Chalk</h1>
<nav>
<ul class="list">
<li><a class="home" href="#">HOME</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">DEMO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
</article>
<!--Section one which includes the hero element for the complete grid_12 -->
<section class="grid_12 clearfix">
<section class="section">
<h3>DIGITAL PLATFORM FOR LEARNING</h3>
</section>
<section class="section_1">
<img src="img/hero0.jpg" alt="Hero element"/>
</section>
</section>
<hr>
<!--Section two which includes two grids each of four and eight where the grid_8 is intern divided into three rows-->
<section class="sec1">
<div class=" sec_images grid_4">
<img src="img/image_g3_1.png" alt="digital learning"/>
</div>
<div class="sec_para grid_8">
<p>
<h3>DIGITAL LEARNING</h3>
Digital Learning – The 21st century has been rightly termed as the digital era.
</p>
<p>
Most of you must have heard about digital learning. The E-Education has certainly ignited the teaching sector.
</p>
<p>
Gone are the days of blackboards, the chalks and the dusters. They have been substituted with web based education which strengthens student’s
learning experience.
</p>
<a href="#">Learn more..</a>
</div>
</section>
<hr>
<!--Section three is the reverse of section two where grid_8 and grid_4 are provided -->
<section class="sec2 clearfix">
<div class="grid_9">
<h3>WHAT IS IT ABOUT</h3>
<p>
Digital learning can be defined as a web based learning which effectively makes use of the information technology to impart knowledge to the students.
</p>
<p>
It is also known as the Smart Teaching Technique and as such most of the schools and educational institutions have gladly adopted this method
thereby bringing a colossal change in the educational system.
</p>
<p>
The kids are taught with the help of large LCD screens and projectors which is beyond the conventional methods of teaching.
</p>
<a href="#">Learn more..</a>
</div>
<div class=" sec_images1 grid_3">
<img src="img/image_g3_2.jpg" alt="statistics">
</div>
</section>
<hr>
<!--Section four contains 2 vertical columns and divided the column on the right into 3 rows-->
<section class="sec3 clearfix">
<div class="grid_4">
<img src="img/image_criteria.jpg" alt="criteria_no1">
<p>
<h4>TOOLS FOR LEARNING</h4>
The main technical tool behind digital learning and is also known as its backbone is internet. You just need a computer or any other gadget
with an internet connection to get started with e-learning process.
</p>
</div>
<div class="grid_4">
<img src="img/image_criteria1.jpg" alt="criteria_no2">
<p>
<h4>DIGITAL PEDAGOGY</h4>
Digital Pedagogy is a procedure which helps in improving the instructions of the students. In short this term is an amalgamation of technical
information, teaching and understanding of the students.
</p>
</div>
<div class="grid_4">
<img src="img/image_criteria2.jpg" alt="criteria_no3">
<p>
<h4>THE FINAL WORD</h4>
The Digital Learning which was introduced only a few years ago has been warmly and graciously welcomed by the world. A lot has been achieved
in this area but still the journey is not complete and long way to go.
</p>
<a href="#">Learn more..</a>
</div>
</section>
<!--Section for footer with social links and site links and use of font awesome icons-->
<footer class="clearfix">
<div class="copy grid_4">
<p >
Copyrights© All Rights Reserved by <br>
<a href="#">Terms of Use</a>
<a href="#">Privacy Policy</a>
</p>
</div>
<div class="awesome_icon grid_8">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<p>
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
priyad920@gmail.com
<a href="#"><i class="fa fa-headphones" aria-hidden="true"></i></a>0431-2583443
</p>
</div>
</footer>
</div>
</body>
</html>