-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (117 loc) · 4.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>doctor website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="header">
<div class="container">
<img src="img/logo.png" alt="this my site logo" class="logo">
<div class="header-text">
<h1>The purpose is to <br> teach, bring learning people.</h1>
<span class="square"></span>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod aliquid natus laborum incidunt ipsa? Saepe libero, recusandae cumque quibusdam consequatur temporibus doloremque maiores id, aperiam vero tempore soluta praesentium itaque.</p>
<button class="common-btn">Read More</button>
<div class="line">
<span class="line1"></span> <br>
<span class="line2"></span> <br>
<span class="line3"></span>
</div>
</div>
</div>
</section>
<nav id="side-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">FUCTER</a></li>
<li><a href="#">COURSES</a></li>
<li><a href="#">OFFER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<img src="img/menu.png" alt="" id="menuBtn">
<!-- about -->
<section id="about">
<div class="about-left">
<img src="img/about.png" alt="">
</div>
<div class="about-right">
<div class="aboutText">
<h1>About text</h1>
<span class="square"></span>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident eaque nihil cum dolorum vel suscipit maiores voluptatum alias sint neque optio est incidunt saepe ipsum aliquid, non doloremque adipisci quos corrupti consequatur, illo cumque ad labore. At, nihil corporis? Atque exercitationem vel nihil libero nulla deleniti recusandae neque ratione unde.</p>
<br>
<div class="line">
<span class="line1"></span> <br>
<span class="line2"></span> <br>
<span class="line3"></span>
</div>
<h2>"Learning is not attained by chance,it nust be sought for with ardor and attended to with diligence"</h2>
<h3>----Abugakk Adams</h3>
</div>
</div>
</section>
<section id="fucture">
<div class="row">
<div class="col"><img src="img/pic-1.png" alt="">
<h4>Learn Anywhare
</h4>
<p>Switch between your computer, tablet or mobile</p></div>
<div class="col"><img src="img/pic-2.png" alt="">
<h4>Expert Teacher
</h4>
<p>learn form industy expert who are pasionate about teaching</p></div>
<div class="col"><img src="img/pic-3.png" alt="">
<h4>Unlimted access
</h4>
<p>Choice what you'd like to learn from our extensive subsvription libary</p></div>
</div>
</section>
<section class="fucture-btn">
<div class="line">
<span class="line1"></span> <br>
<span class="line2"></span> <br>
<span class="line3"></span>
</div>
<button class="common-btn">Start free trail</button>
</section>
<!--courses-->
<section id="courses">
<div class="courses-row">
<div class="courses-left">
<div class="courses-text">
<h1>Browse our top <br> courses</h1>
<br>
<span class="square"></span>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis molestiae accusamus dicta eum, reiciendis earum dolores vitae nam accusantium animi minus quae voluptatem non explicabo cum laborum hic exercitationem ipsam. </p> <br>
<div class="line">
<span class="line1"></span> <br>
<span class="line2"></span> <br>
<span class="line3"></span>
</div>
</div>
</div>
<div class="courses-right">
<img src="img/course.png" alt="">
</div>
</div>
</section>
<script>
var menuBtn = document.getElementById("menuBtn");
var sideNav = document.getElementById("side-nav");
sideNav.style.right = "-250px";
menuBtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right = "0";
}
else{
sideNav.style.right = "-250px";
}
}
</script>
</body>
</html>