-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (172 loc) · 6.79 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn User Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* .sidebar {
position: sticky;
top: 0;
z-index: 1;
overflow-y: auto;
padding: 0;
height: 100vh;
width: 200px;
float: left;
} */
/* carous is class name for div enclosing myCarousel tag */
.carous {
width: 50vw; /* setting width of carous container to 50% of viewport width */
height: 100vh; /* setting height of carous container to 100% of viewport height */
}
.carous img {
height: 600px; /* setting height of images inside carousel */
}
html {
height: 100%;
}
/* flex-direction to column: to make the header, main, and footer elements stack vertically. */
body {
position: relative; /* add this to allow for absolute positioning */
min-height: 100%;
display: flex;
flex-direction: column;
}
/* flex: 1 on the main element: to make it take up all the available space */
main {
flex: 1;
display: flex; /* add this to allow for flexbox */
flex-direction: column;
}
/* flex-shrink: 0 on the footer element: to prevent it from shrinking and staying at the bottom of the page */
.footer-text {
padding-left: 35%;
}
footer {
flex-shrink: 0;
}
</style>
</head>
<body>
<!-- header here -->
<header>
<h1 class="text-center">Learn User Interface</h1>
</header>
<!-- main content here -->
<main>
<!-- container for carousel: custom css applied -->
<div class="container-fluid carous">
<!-- carouse starts here -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_960_720.png" alt="Slide 1"
class="d-block w-100">
<div class="carousel-caption">
<h3>HTML</h3>
<p>A language of website structure</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582747_960_720.png" alt="Slide 2"
class="d-block w-100">
<div class="carousel-caption">
<h3>CSS</h3>
<p>A language of website look and feel</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png" alt="Slide 3"
class="d-block w-100">
<div class="carousel-caption">
<h3>JavaScript</h3>
<p>A language of website interaction</p>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_960_720.png"
alt="HTML logo">
<div class="card-body">
<h5 class="card-title">Learn HTML</h5>
<p class="card-text">HTML is the foundation of web development. It's the language used to create the
structure and content of web pages.</p>
</div>
<div class="card-footer">
<a href="html.html" class="btn btn-primary">Learn more here</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582747_960_720.png"
alt="css logo">
<div class="card-body">
<h5 class="card-title">Learn CSS</h5>
<p class="card-text">CSS is used to style web pages and make them look visually appealing. It allows you
to change the color, font, layout, and other design elements of a page.</p>
</div>
<div class="card-footer">
<a href="css.html" class="btn btn-primary">Learn more here</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png"
alt="js logo">
<div class="card-body">
<h5 class="card-title">Learn JavaScript</h5>
<p class="card-text">JavaScript is used to make web pages interactive and dynamic. It allows you to add
behavior to web pages, such as form validation, animations, and interactivity.</p>
</div>
<div class="card-footer">
<a href="js.html" class="btn btn-primary">Learn more here</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/04/20/10/52/code-5067826_960_720.jpg"
alt="projects">
<div class="card-body"><br><br>
<h5 class="card-title">Learn through Projects</h5>
<p class="card-text">If you already know basics of HTML, CSS, JS and you want to try some projects mixing
all together, you are at the right place.</p>
</div>
<div class="card-footer">
<a href="pbl.html" class="btn btn-primary">Learn more here</a>
</div>
</div>
</div>
</div>
</main>
<footer class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Learn Web Dev</a>
<div class="container footer-text text-white">
© 2023 Made with 🤍 by Vikas Bandaru
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.
js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>