8000 Merge branch 'codescoop:main' into main · codescoop/bootstrap_tutorial@ba97e38 · GitHub
[go: up one dir, main page]
Skip to content

Commit ba97e38

Browse files
deltanodedeltanode
authored
Merge branch 'codescoop:main' into main
2 parents db57291 + a1e4382 commit ba97e38

File tree

35 files changed

+1198
-356
lines changed

35 files changed

+1198
-356
lines changed

‎03 Create_CSS_navigation_bar/README.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
## Practice - CSS Navigation Bar
2-
3-
To practice working with Navigation bar,make your page look just like this one:
4-
5-
<img src="img/output.png" alt="Output">
6-
71
## CSS Layout Exercise
82

93
Complete the below challenges to flex your CSS skills, and see where you need to practice more!

‎04 Bootstrap via CDN/README.md

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎04 Bootstrap via CDN/debug.log

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎04 Bootstrap via CDN/index.html

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎asset/css/main.css renamed to ‎04 Bootstrap/01 business-website/asset/css/main.css

File renamed without changes.

‎asset/font/font.txt renamed to ‎04 Bootstrap/01 business-website/asset/font/font.txt

File renamed without changes.

‎asset/img/about/a1.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/about/a1.jpg

File renamed without changes.

‎asset/img/gallery/g1.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/gallery/g1.jpg

File renamed without changes.

‎asset/img/logo.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/logo.jpg

File renamed without changes.

‎asset/img/service/s1.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/service/s1.jpg

File renamed without changes.

‎asset/img/service/s2.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/service/s2.jpg

File renamed without changes.

‎asset/img/service/s3.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/service/s3.jpg

File renamed without changes.

‎asset/img/slider/a1.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/a1.jpg

File renamed without changes.

‎asset/img/slider/a2.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/a2.jpg

File renamed without changes.

‎asset/img/slider/a3.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/a3.jpg

File renamed without changes.

‎asset/img/slider/a4.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/a4.jpg

File renamed without changes.

‎asset/img/slider/p1.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/p1.jpg

File renamed without changes.

‎asset/img/slider/p2.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/p2.jpg

File renamed without changes.

‎asset/img/slider/p3.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/p3.jpg

File renamed without changes.

‎asset/img/slider/p4.jpg renamed to ‎04 Bootstrap/01 business-website/asset/img/slider/p4.jpg

File renamed without changes.

‎04 Bootstrap/01 business-website/index.html

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<title>Bootstrap Example</title>
9+
<meta name="description" content="">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
12+
<link rel="stylesheet" href="asset/css/main.css">
13+
<!-- Google fonts-->
14+
<link rel="preconnect" href="https://fonts.gstatic.com">
15+
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
16+
<!-- Bootstrap CSS -->
17+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
18+
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
19+
20+
21+
<head>
22+
<title> MWB Html Session </title>
23+
<link rel="stylesheet" href="asset/css/main.css">
24+
25+
</head>
26+
27+
<body>
28+
<!-- Navigation-->
29+
<header id="home">
30+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
31+
<a class="navbar-brand" href="#">Company Name</a>
32+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
33+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
34+
<span class="navbar-toggler-icon"></span>
35+
</button>
36+
37+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
38+
<ul class="navbar-nav ml-auto">
39+
<li class="nav-item active">
40+
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="#about">About</a>
44+
</li>
45+
<li class="nav-item dropdown">
46+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
47+
aria-haspopup="true" aria-expanded="false">
48+
Service
49+
</a>
50+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
51+
<a class="dropdown-item" href="#service">Service</a>
52+
<a class="dropdown-item" href="#gallery">Gallery</a>
53+
<div class="dropdown-divider"></div>
54+
<a class="dropdown-item" href="#connect">Something else here</a>
55+
</div>
56+
</li>
57+
<li class="nav-item">
58+
<a class="nav-link" href="#contact" tabindex="-1" aria-disabled="true">Contact</a>
59+
</li>
60+
</ul>
61+
<form class="form-inline my-2 my-lg-0">
62+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
63+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
64+
</form>
65+
</div>
66+
</nav>
67+
</header>
68+
<!-- Masthead -->
69+
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
70+
<div class="carousel-inner">
71+
<div class="carousel-item active">
72+
<img src="asset/img/slider/p1.jpg" class="d-block w-100" alt="...">
73+
</div>
74+
<div class="carousel-item">
75+
<img src="asset/img/slider/p2.jpg" class="d-block w-100" alt="...">
76+
</div>
77+
<div class="carousel-item">
78+
<img src="asset/img/slider/p3.jpg" class="d-block w-100" alt="...">
79+
</div>
80+
</div>
81+
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
82+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
83+
<span class="sr-only">Previous</span>
84+
</a>
85+
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
86+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
87+
<span class="sr-only">Next</span>
88+
</a>
89+
</div>
90+
<!-- About -->
91+
<section id="about">
92+
<div class="container pb-5">
93+
<div class="text-center py-5">
94+
<h1 class="text-uppercase">about us</h1>
95+
<hr class="w-25">
96+
</div>
97+
<div class="row pb-5">
98+
<div class="col-lg-6">
99+
<img src="asset/img/about/a1.jpg" alt="" class="img-fluid pb-3">
100+
</div>
101+
<div class="col-lg-6">
102+
<h1>Who am I ?</h1>
103+
<hr>
104+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and
105+
sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of
106+
her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a
107+
pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant
108+
pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the
109+
general duties of those who are to blame for your troubles.</p>
110+
<button class="btn btn-primary">Know More</button>
111+
</div>
112+
</div>
113+
</div>
114+
</section>
115+
<!-- Service -->
116+
<section id="service" class="bg-light">
117+
<div class="container py-5">
118+
<div class="text-center pb-5">
119+
<h1 class="text-uppercase font-weight-bold pt-5">Services</h1>
120+
<p>Lorem ipsum dolor sit amet consectetur.</p>
121+
</div>
122+
<div class="row text-center pb-5">
123+
<div class="col-lg-4">
124+
<div class="card">
125+
<img src="asset/img/service/s1.jpg" class="card-img-top" alt="...">
126+
<div class="card-body">
127+
<h5 class="card-title">Card title</h5>
128+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
129+
content.</p>
130+
<a href="#" class="btn btn-primary">Go somewhere</a>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="col-lg-4">
135+
<div class="card">
136+
<img src="asset/img/service/s2.jpg" class="card-img-top" alt="...">
137+
<div class="card-body">
138+
<h5 class="card-title">Card title</h5>
139+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
140+
content.</p>
141+
<a href="#" class="btn btn-primary">Go somewhere</a>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="col-lg-4">
146+
<div class="card">
147+
<img src="asset/img/service/s3.jpg" class="card-img-top" alt="...">
148+
<div class="card-body">
149+
<h5 class="card-title">Card title</h5>
150+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
151+
content.</p>
152+
<a href="#" class="btn btn-primary">Go somewhere</a>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</section>
159+
<!-- connect -->
160+
<section id="connect">
161+
<article class="bg-primary py-2">
162+
<div class="container-fluid text-center py-5 text-white">
163+
<h3 class=" display-4">+91 123456789</h3>
164+
<p>Lorem ipsum dolor sit amet consectetur.</p>
165+
<button class="btn btn-warning">Connect</button>
166+
</div>
167+
</article>
168+
</section>
169+
<!-- Gallery -->
170+
<section id="gallery" class="bg-light">
171+
<div class="container py-5">
172+
<div class="text-center py-5">
173+
<h1 class="text-uppercase font-weight-bolder">Gallery</h1>
174+
<p>Lorem ipsum dolor sit amet consectetur.</p>
175+
</div>
176+
<div class="row pb-5">
177+
<div class="col-lg-4 col-sm-6 pb-4">
178+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
179+
</div>
180+
<div class="col-lg-4 col-sm-6 pb-4">
181+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
182+
</div>
183+
<div class="col-lg-4 col-sm-6 pb-4">
184+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
185+
</div>
186+
187+
<div class="col-lg-4 col-sm-6 pb-4">
188+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
189+
</div>
190+
<div class="col-lg-4 col-sm-6 pb-4">
191+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
192+
</div>
193+
<div class="col-lg-4 col-sm-6 pb-4">
194+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
195+
</div>
196+
197+
<div class="col-lg-4 col-sm-6 pb-4">
198+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
199+
</div>
200+
<div class="col-lg-4 col-sm-6 pb-4">
201+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
202+
</div>
203+
<div class="col-lg-4 col-sm-6 pb-4">
204+
<img class="img-fluid" src="asset/img/gallery/g1.jpg" alt="">
205+
</div>
206+
207+
</div>
208+
</div>
209+
</section>
210+
<!-- contact form -->
211+
<section id="contact">
212+
<div class="container py-5">
213+
<div class="text-center py-5">
214+
<h1 class="text-uppercase font-weight-bolder">Contact Us</h1>
215+
<hr class="w-25">
216+
</div>
217+
<form>
218+
<div class="row w-50 mx-auto">
219+
<div class="col-12 form-group">
220+
<label>Name</label>
221+
<input type="text" class="form-control">
222+
</div>
223+
<div class="col-12 form-group">
224+
<label>Email</label>
225+
<input type="text" class="form-control">
226+
</div>
227+
<div class="col-12 form-group">
228+
<label>Mobile No.</label>
229+
<input type="text" class="form-control">
230+
</div>
231+
<div class="col-12 form-group">
232+
<label>Message</label>
233+
<textarea type="text" class="form-control"></textarea>
234+
</div>
235+
<div class="col-12 form-group">
236+
<button class="btn btn-primary">Submit</button>
237+
</div>
238+
</div>
239+
</form>
240+
</div>
241+
</section>
242+
<!-- footer -->
243+
<footer class="bg-dark">
244+
<div class="container text-white py-2">
245+
<div class="row pt-2">
246+
<div class="col-6">
247+
<p class="text-left">Copyright @ 2020</p>
248+
</div>
249+
<div class="col-6">
250+
<p class="text-right">Website Name</p>
251+
</div>
252+
</div>
253+
</div>
254+
</footer>
255+
<!-- Bootstrap Core Js -->
256+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
257+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
258+
crossorigin="anonymous"></script>
259+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
260+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
261+
crossorigin="anonymous"></script>
262+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
263+
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
264+
crossorigin="anonymous"></script>
265+
</body>
266+
267+
</html>

‎04 Bootstrap/02 portfolio/asset/img/home1.jpg

65.1 KB
Loading

‎04 Bootstrap/02 portfolio/asset/img/p1.png

58.8 KB
Loading

‎04 Bootstrap/02 portfolio/asset/img/p2.webp

34.6 KB
Binary file not shown.

‎04 Bootstrap/02 portfolio/asset/img/p3.png

40.2 KB
Loading

‎04 Bootstrap/02 portfolio/asset/img/p4.webp

12.7 KB
Binary file not shown.

‎04 Bootstrap/02 portfolio/asset/style.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.navbar {
2+
position: sticky;
3+
top: 0;
4+
z-index: 10;
5+
}
6+
7+
.nav-link {
8+
color: rgb(226, 223, 223) !important;
9+
}
10+
11+
.nav-link:hover {
12+
color: #ffffff !important;
13+
}
14+
15+
.home-text {
16+
padding-top: 20%;
17+
}
18+
19+
.home-image {
20+
padding-top: 5%;
21+
}
22+
23+
.home-text-center {
24+
margin: 0 auto;
25+
}

0 commit comments

Comments
 (0)
0