-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (87 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Top Container -->
<!-- Nav-container -->
<!-- main-content -->
<div class="container">
<div class="d-flex align-item-center justify-content-between ">
<div class="inner-container-left">
<h1>Become a <span class="text-warning">Web Developer</span></h1>
<p class="lead my-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus voluptatem totam excepturi nostrum tempora necessitatibus reiciendis debitis possimus. Consectetur, voluptatem id natus culpa sed quas delectus ea nihil odio! Error?
Quae voluptatibus error quasi voluptas officia ab quo hic illo, provident cumque perspiciatis enim assumenda, quisquam voluptates neque. Odio earum quam mollitia provident eaque, excepturi aut ipsam dicta voluptatibus dignissimos?
</p>
<button class="btn btn-primary btn-lg">Join Now</button>
</div>
<div class="inner-container-right">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2024/01/12/03/59/lioness-8503063_1280.jpg" alt="">
</div>
</div>
</div>
<!-- Top Container | End -->
<!-- Cards Container -->
<div class="my-4">
<div class="container">
<div class="row text-center">
<div class="col-sm-12 col-md-4">
<div class="card bg-dark text-light">
<div class="card-body">
<!-- img/icon -->
<i class="bi bi-laptop-fill"></i>
<!-- title -->
<h3>Example</h3>
<!-- para -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, autem qui ipsam quod eos eaque commodi aspernatur, libero amet nostrum quisquam vero reiciendis illum, totam magni. Mollitia nulla pariatur eaque.</p>
<!-- button -->
<button class="btn btn-primary btn-lg">Join Now</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card bg-dark text-light">
<div class="card-body">
<!-- img/icon -->
<i class="bi bi-laptop-fill"></i>
<!-- title -->
<h3>Example</h3>
<!-- para -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, autem qui ipsam quod eos eaque commodi aspernatur, libero amet nostrum quisquam vero reiciendis illum, totam magni. Mollitia nulla pariatur eaque.</p>
<!-- button -->
<button class="btn btn-primary btn-lg">Join Now</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card bg-dark text-light">
<div class="card-body">
<!-- img/icon -->
<i class="bi bi-laptop-fill"></i>
<!-- title -->
<h3>Example</h3>
<!-- para -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, autem qui ipsam quod eos eaque commodi aspernatur, libero amet nostrum quisquam vero reiciendis illum, totam magni. Mollitia nulla pariatur eaque.</p>
<!-- button -->
<button class="btn btn-primary btn-lg">Join Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cards Container | END-->
</body>
</html>