-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtask1.html
130 lines (108 loc) · 4.61 KB
/
task1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="task1.css">
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Task 2</title>
</head>
<body>
<header>
<div class="nav">
<a href="#" class="logo">Green</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<!-- <li>
<a href="#">DropDown</a>
<ul>
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
<li><a href="#">Option3</a></li>
</ul>
</li> -->
<li><a href="#">DropDown<i class="fa fa-angle-down" style="padding: 5px; "></i></a>
<!-- <select>
<option>option1</option>
<option>option1</option>
<option>option1</option>
</select>
</li> -->
<li><a href="#">Contact</a></li>
<button type="button">Get Started</button>
</ul>
</div>
</header>
<div class="slider">
<input type="radio" name="slider" checked="checked">
<div class="imgBx" >
<img src="p2.jpg">
<div class="content">
<h2>slide one</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iure
voluptatibus maiores rem facere debitis, obcaecati quae, cumque vel delectus ea sequi
reiciendis, facilis ut voluptate id nesciunt est! Atque!</p>
<a href="#">Read More</a>
</div>
</div>
<input type="radio" name="slider">
<div class="imgBx">
<img src="p3.jpg">
<div class="content">
<h2>slide two</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iure
voluptatibus maiores rem facere debitis, obcaecati quae, cumque vel delectus ea sequi
reiciendis, facilis ut voluptate id nesciunt est! Atque!</p>
<a href="#">Read More</a>
</div>
</div>
<input type="radio" name="slider">
<div class="imgBx">
<img src="p4.jpg">
<div class="content">
<h2>slide three</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iure
voluptatibus maiores rem facere debitis, obcaecati quae, cumque vel delectus ea sequi
reiciendis, facilis ut voluptate id nesciunt est! Atque!</p>
<a href="#">Read More</a>
</div>
</div>
<input type="radio" name="slider">
<div class="imgBx">
<img src="b1.jpg">
<div class="content">
<h2>slide four</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iure
voluptatibus maiores rem facere debitis, obcaecati quae, cumque vel delectus ea sequi
reiciendis, facilis ut voluptate id nesciunt est! Atque!</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<section class="columns">
<div class="column">
<i class="fa fa-laptop"></i>
<h2>lorem ipsum</h2><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. HarumLorem ipsum dolor sit amet consectetur adipisicing elit. Harum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum </p>
</div>
<div class="column">
<i class="fa-solid fa-business-time"></i>
<h2>Dolar Sitema</h2><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
</p>
</div>
<div class="column">
<i class="fa-solid fa-address-book"></i>
<h2>lorem ipsum Dolar</h2><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum </p>
</div>
</section>
</body>
</html>