Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abu-Salah-Musha-Lemon
Abu-Salah-Musha-Lemon committed Jan 1, 2024
1 parent dd267d4 commit dc2c29b
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 110 deletions.
213 changes: 104 additions & 109 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,22 +98,12 @@ <h6>$50.24</h6>

<div class="col-md-6 col-12 my-2 ">
<div class="card rounded-2" style="width: 90%;">
<div class="card-body" id="hover">
<h5 class="card-title">1</h5>
<h6 class="card-subtitle mb-2 text-muted">Get Creatificates from us</h6>
<p class="card-text"> WE are providing a certificate to you after completing any
course or subjects</p>
<div class="card-body d-flex justify-content-space-between align-items-center" id="hover">
<span class="card-title">01</span> <span style="border: 3px solid orange; width:4px;height: 1px;"></span>
<div>
<h4 class="card-subtitle mb-2 text-muted">Get Certificates from us</h4>
<p class="card-text"> WE are providing a certificate to you after completing anymore or subjects</p>
</div>
</div>
</div>

<div class="col-md-6 col-12 my-2 ">
<div class="card rounded-2" style="width: 90%;">
<div class="card-body" id="hover">
<h5 class="card-title">1</h5>
<h6 class="card-subtitle mb-2 text-muted">Get Creatificates from us</h6>
<p class="card-text"> WE are providing a certificate to you after completing any
course or subjects</p>
</div>
</div>
</div>
Expand All @@ -122,7 +112,7 @@ <h6 class="card-subtitle mb-2 text-muted">Get Creatificates from us</h6>
<div class="card rounded-2" style="width: 90%;">
<div class="card-body" id="hover">
<h5 class="card-title">1</h5>
<h6 class="card-subtitle mb-2 text-muted">Get Creatificates from us</h6>
<h6 class="card-subtitle mb-2 text-muted">Get Certificates from us</h6>
<p class="card-text"> WE are providing a certificate to you after completing any
course or subjects</p>
</div>
Expand All @@ -133,7 +123,7 @@ <h6 class="card-subtitle mb-2 text-muted">Get Creatificates from us</h6>
<div class="card rounded-2" id="hover" style="width: 90%;">
<div class="card-body d-flex align-items-center">
<img src="assets/img/1.jpg" style="width: 100px" />
<h4 class="card-title">Videography Section</h4><span class="mx-2"><i class="bi bi-play"></i></span>
<h4 class="card-title">Ideography Section</h4><span class="mx-2"><i class="bi bi-play"></i></span>
</div>
</div>
</div>
Expand All @@ -146,80 +136,82 @@ <h4 class="card-title">Videography Section</h4><span class="mx-2"><i class="bi b
<!-- Start: section-2 Columns -->
<div class="container-fluid" style=" background-color:aliceblue;">

<div class="container me-auto" style="padding-top:200px; padding-bottom:200px;">
<div class="row">
<div class="col-md-6 col-lg-6 d-flex">
<div class="card-1">
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<div class="section-2">
<div class="container me-auto" style="padding-top:200px; padding-bottom:200px;">
<div class="row">
<div class="col-md-6 col-lg-6 d-flex">
<div class="card-1">
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>

<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
<div class="card-2" style="margin-left: 40px;">
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card-2" style="margin-left: 40px;">
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>

<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<div class="card mb-2">
<div class="card-body shadow d-flex flex-row align-items-center justify-content-center"
style="width: 350px; height: 140px;">
<img class="img-fluid p-2" style="max-width: 60px; max-hight: 60px"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Live Class</h5>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 my-2">
<div class="members" style="margin-left:120px">
<h2 class="fs-2 fw">Membership</h2>
<h2 class="fs-4">Start your learning journey today</h2>
<p class="fs-2">a best and cheapest way of getting know learning to make a better tomorrow</p>
<a href="#" class="btn btn-danger">Sign up</a>
</div>
</div>
<div class="col-md-6 col-lg-6 my-2">
<div class="members" style="margin-left:120px">
<h2 class="fs-2 fw">Membership</h2>
<h2 class="fs-4">Start your learning journey today</h2>
<p class="fs-2">a best and cheapest way of getting know learning to make a better tomorrow</p>
<a href="#" class="btn btn-danger">Sign up</a>
</div>

</div>

</div>
</div>
</div>
</div>

<!-- End: Columns -->

Expand Down Expand Up @@ -252,35 +244,38 @@ <h2 class="text-center fs-1 fw-bold gap-2">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col" style="margin: 10px; padding: 4px">
<div class="card-group">
<div class="card" id="designSection" style="margin: 26px; width: 352.328px">
<img class="card-img-top w-100 d-block" src="assets/img/bg-showcase-1.jpg" style="margin: 4px" />
<div class="card-body" style="margin: 3px">
<h4 class="card-title">Design Section</h4>
<p class="card-text">5 course</p>
</div>
<div class="col-mc-6 col-lg-6 d-flex justify-content-center align-items-center">

<div class="card">
<img src="assets/img/bg-showcase-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Design Section</h5>
<p class="card-text">5 Course</p>
</div>
<div class="card" id="designSection-3" style="margin: 26px; width: 352.328px">
<img class="card-img-top w-100 d-block" src="assets/img/bg-showcase-1.jpg" style="margin: 4px" />
<div class="card-body" style="margin: 3px">
<h4 class="card-title">Design Section</h4>
<p class="card-text">5 course</p>
</div>
</div>


<div class="card">
<img src="assets/img/bg-showcase-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Design Section</h5>
<p class="card-text">5 Course</p>
</div>
<div class="card" id="designSection-2" style="margin: 26px; width: 352.328px">
<img class="card-img-top w-100 d-block" src="assets/img/bg-showcase-1.jpg" style="margin: 4px" />
<div class="card-body" style="margin: 3px">
<h4 class="card-title">Design Section</h4>
<p class="card-text">5 course</p>
</div>
</div>

<div class="card">
<img src="assets/img/bg-showcase-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Design Section</h5>
<p class="card-text">5 Course</p>
</div>
<div class="card" id="designSection-1" style="margin: 26px; width: 352.328px">
<img class="card-img-top w-100 d-block" src="assets/img/bg-showcase-1.jpg" style="margin: 4px" />
<div class="card-body" style="margin: 3px">
<h4 class="card-title">Design Section</h4>
<p class="card-text">5 course</p>
</div>
</div>

<div class="card">
<img src="assets/img/bg-showcase-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Design Section</h5>
<p class="card-text">5 Course</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -793,11 +788,11 @@ <h5 class="card-title text-center">Carl Kent</h5>

<!-- End: 1 Row 1 Column -->

<div class="container-fluid" style="background-color: #F8F8FF;">
<div class="container" style="padding: 140px;">
<div class="container-fluid" style="background-color: #F8F8FF; ">
<div class="container" style="padding: 140px;height: 770px;">
<div class="row d-flex align-items-center justify-content-center" style="height:470px; background-color: white;">
<div class="col-md-2 col-lg-6">
<div class="background orangeBg " style="padding:140px;;">
<div class="background orangeBg " >
<p class="text-center fs-2 fw-bold text-white">Practice makes perfect. Improve your skill easily.</p>
</div>
<h1 class="text-center text-white orangeBg">
Expand Down Expand Up @@ -843,7 +838,7 @@ <h3 class="mr-2 fs-2 fw-bold">UpSkill</h3>
</div>

<div class="col-sm-4 col-md-3 col-lg-2">
<h5>Information</h5>
<h5 class="mr-2 fw-bold">Information</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="#">About</a></li>
Expand All @@ -853,8 +848,8 @@ <h5>Information</h5>
</ul>
</div>

<div class="col-sm-4 col-md-3 col-lg-1">
<h5>Helpful Link</h5>
<div class="col-sm-4 col-md-3 col-lg-2 m-0">
<h5 class="mr-2 fw-bold">Helpful Link</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="/">Students</a></li>
<li class="mb-2"><a href="#">Business</a></li>
Expand All @@ -865,8 +860,8 @@ <h5>Helpful Link</h5>
</ul>
</div>

<div class="col-sm-4 col-md-3 col-lg-2">
<h5>Our Services</h5>
<div class="col-sm-4 col-md-3 col-lg-2 m-0">
<h5 class="mr-2 fw-bold">Our Services</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="/">Design</a></li>
<li class="mb-2"><a href="#">Study</a></li>
Expand All @@ -876,7 +871,7 @@ <h5>Our Services</h5>
</div>

<div class="col-sm-4 col-md-3 col-lg-2">
<h5>Contact</h5>
<h5 class="mr-2 fw-bold">Contact</h5>
<ul class="list-unstyled">
<address>120/7 Seddon Park, Auckland New Zealnd</address>
<li class="mb-2"><a href="#">email@gmail.com</a></li>
Expand Down
27 changes: 26 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,35 @@ a{
}
#hover:hover{
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
border: none!important;
}

@media only screen and (max-width: 768px) {
.section-2{
width: 100%;
}
.section-2 .row{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.section-2 .row .col-md-6{
flex-wrap: wrap;
}
.section-2 .row .col-md-6 .card-1, .card-2{
margin: 0px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-2 .row .col-md-6 .members {
/* background-color: red; */
margin: 0 !important;
margin-top: 40px !important;
}


}



Expand Down

0 comments on commit dc2c29b

Please sign in to comment.