-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (136 loc) · 8.36 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IMMACULATE's BLOG</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" link="style.css"/>
</head>
<body style=" background-image:linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(./images/pexels-pixabay-302743.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
<!-- <div w3-include-html="navbar/navbar.html"></div> -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">immaculate</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="gallery.html">gallery</a></li>
<li><a class="dropdown-item" href="experience.html">experience in html-css</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="leadership.html">leadership summary</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src=" ./images/pexels-tom-fisk-2246950.jpg" class="d-block" alt="Slide 1" style="width: 300px; height: 200px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src=" ./images/pexels-pixabay-54332.jpg" class="d-block" alt="Slide 2" style="width: 300px; height: 200px; object-fit: cover;">
</div>
<div class="carousel-item">
<img src=" ./images/pexels-pixabay-302743.jpg" class="d-block" alt="Slide 3" style="width: 300px; height: 200px; object-fit: cover;">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h1 style="font-size:xx-large; font-weight:bolder; text-align:center;">A SLIDE BAR OF BLOGPOST CATEGORIES</h1>
<p><h6>my experiences in the leadership class, html and css class</h6> </p>
<div class="container text-center" >
<div class="row" >
<div class="col align-self-start">
<div class="col-sm-20 mb-3" style="background-color: #f2f2f2; border: 20px solid #3b3d3d; padding: 20px;">
<h6>HTML CLASS</h6>
<img src=" ./images/pexels-tom-fisk-2246950.jpg" alt="Image 1"style="width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin: 0 auto; width: 80%;
height: auto;
display: block;">
<p style="padding: 10px;">HTML, or Hypertext Markup Language, is the standard markup language used to create and design web pages. It provides a structure for content on the internet, allowing elements like headings, paragraphs, links, and images to be defined. HTML documents consist of a series of tags enclosed in angle brackets, specifying the role of each element. Tags are organized in a hierarchical structure, forming the backbone of a webpage's layout. Web browsers interpret HTML code to render the visual presentation of a website, making it an essential language for web development.</p></div>
</div>
<div class="col align-self-center">
<div class="col-sm-15 mb-3" style="background-color: #e4e8e8; border: 20px solid #3d4041; padding: 20px;">
<h6>CSS CLASS</h6>
<img src="./images/pexels-pixabay-54332.jpg" alt="Image 1"style="width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin: 0 auto; width: 80%;
height: auto;
display: block;">
<p>CSS, or Cascading Style Sheets, is a styling language used in conjunction with HTML to control the presentation and layout of web pages. It enables the separation of content from design, allowing developers to apply styles such as colors, fonts, and spacing to HTML elements. CSS rules consist of selectors and declarations, specifying which elements to style and how to style them. Selectors target HTML elements, while declarations define the appearance, positioning, and behavior. CSS fosters consistency, reusability, and enhances the overall aesthetics of a website.</p> </div>
</div>
<div class="col align-self-end">
<div class="col-sm-14 mb-3" style="background-color: #f2f2f2; border: 20px solid #3b3f3f; padding: 20px;">
<h6>LEADERSHIP CLASS</h6>
<img src="./images/pexels-pixabay-54332.jpg" alt="Image 1"style="width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin: 0 auto; width: 80%;
height: auto;
display: block;">
Paradigms is how you see yourself. if you want to achieve minor works, works on your behaviour but if you want to achieve greater works, work on your character. once you see things diffrently , you know what they really are , you respond differently. there seven habbits of effectiveness with various principles. practive language refers to the initiative to solve problems and taking control of a situation, the opposite of proactive is reactive. Proactive helps us know that we are not victims of circumstances.</div>
</div>
</div>
</div>
<footer class="footer bg-dark text-light py-3">
<div class="container text-center">
<p>© 2024 immaculate's blog post. All rights reserved.</p>
</div>
</footer>
<script src="js/bootstrap.bundle.js"></script>
<script src="javascript/script.js"></script>
</body>
</html>