Skip to content

I have done the footer section of all the three pages. Added some font. #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdlutfurrahmanjelany wants to merge 1 commit into
base: master
Choose a base branch
from
Open

I have done the footer section of all the three pages. Added some font. #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions assets/css/all.min.css
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added assets/css/footer-bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions assets/css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@media screen and (max-width: 500px) {
footer .input-group {
display: none;
}
footer .with-bg .logo2{
width: 30%;
}
}
@media screen and (max-width: 320px) {
footer .with-bg .logo2{
width: 40%;
}
}
124 changes: 122 additions & 2 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,132 @@ body{



/* Footer section Start */
footer{
margin: 0;
width: 100vw;
background: #F9F9FA;
position:absolute;
transform:translate(0%,0%);
}
footer p{
font-family: 'Nunito', sans-serif;
font-size: 11px;
text-align: center;
overflow: hidden;
line-height: 18px;
}
footer .with-bg{
margin: 0;
padding-top: 30px;
width: 100vw;
position:absolute;
background-image: linear-gradient(to bottom, #00baff 0%, #0af 21%, #133272 150%);
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius: 50% 20%;
border-top-right-radius: 50% 20%;
}
/*footer section for homepage*/
.downapp{
width: 100%;
background: white;
display: flex;
text-align: center;
}
.downapp h5{
font-family: 'Nunito', sans-serif;
font-weight: 700;
padding: 15px 0;
}
.downapp h6{
font-family: 'Rubik', sans-serif;
font-size: 17px;
background: -webkit-linear-gradient(left, #00baff 0%, #0af 21%, #133272 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downapp img {
width: 100%;
padding: 20px;
}
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}


/*end of homepage footer*/

/* Footer section Start */
/* Footer section End */
/*starting common footer*/
.with-bg .logo2{
text-align: center;

}
.with-bg .logo2 img{
width: 100%;
}

.with-bg .socio-txt{
color: #ffffff;
}
.with-bg .social{
padding: 15px 3px 10px 3px;
}
footer ul li{

}
footer ul li a{
color: white;
}
.footer-btm{
font-family: "Nunito Regular";
margin: 0;
padding: 10px 0;
border-top: 1px solid;
color: #a2a3a3;
font-weight: bold;
text-align: center;
}
.footer-btm span{
color: white;
}
/*end of common footer*/

/*start of blog post&blog page details footer*/

.vlog{
padding: 50px 20px 5px 20px;
background: #F9F9FA;
}
.vlog-up{

}
.vlog-up h3{
font-family: 'Rubik', sans-serif;
padding: 10px 0;
font-weight: bold;
}
.vlog-up p{
line-height: 15px;
font-size: 12px;
padding: 5px;

}
.vlog-down .input-group input{
line-height: 3;
font-size: 12px;
border: 1px solid #3090CE;
border-radius: 30px !important;
}
.vlog-down button span{
background-image: linear-gradient(to right, #00baff 0%, #0af 21%, #133272 150%);
border-radius:20px ;
padding: 6px 25px;
}
#button-addon2{
z-index:9;
}
/* Footer section End */



Expand Down
5 changes: 3 additions & 2 deletions assets/js/all.min.js
View file
Open in desktop

Large diffs are not rendered by default.

60 changes: 58 additions & 2 deletions blog-page-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
<!-- |---------------------------|
| All Css File Here |
|---------------------------| -->
<!-- rubik font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<!-- end of rubik font -->

<!-- css for bootstrap -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
Expand Down Expand Up @@ -63,9 +68,60 @@





<!-- footer section start -->
<footer>

<div class="container">
<div class="row vlog mx-3">
<div class="col-md-5 col-sm-12 vlog-up ">
<p class="text-start">No credit card required</p>
<h3 class="text-start">Start 21 days free trial</h3>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i</p>
</div>
<div class="col-md-7 col-sm-12 vlog-down">
<div class="input-group mb-3">
<input type="text" class="form-control position-relative" placeholder="Enter Your Email Address" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn position-absolute top-50 end-0 translate-middle-y" type="button" id="button-addon2"><span>Start Free Trial</span></button>
</div>
</div>
</div>
</div>

<div class="with-bg">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="logo2 col-lg-3 col-md-auto col-sm-auto col-xs-3">
<img src="images/logo2.png" alt="logo">
</div>

</div>
<div class="row justify-content-center">
<div class="socio-txt d-flex justify-content-center">
<p class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<br>dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="social col-md-3">
<ul class=" d-flex justify-content-between p-0">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-skype"></i></a></li>
<li><a href="#"><i class="fa-brands fa-google-plus-g"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>

</ul>
</div>
</div>
</div>
<div class="row d-flex justify-content-center m-0 p-0">
<p class="footer-btm">&copy2018 Appo! Powered by <span>Themexpo</span></p>
</div>
</div>
</footer>
<!-- footer section end -->

<!--|---------------------------|
Expand Down
53 changes: 53 additions & 0 deletions blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,59 @@


<!-- footer section Start -->
<footer>

<div class="container">
<div class="row vlog mx-3">
<div class="col-md-5 col-sm-12 vlog-up ">
<p class="text-start">No credit card required</p>
<h3 class="text-start">Start 21 days free trial</h3>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i</p>
</div>
<div class="col-md-7 col-sm-12 vlog-down">
<div class="input-group mb-3">
<input type="text" class="form-control position-relative" placeholder="Enter Your Email Address" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn position-absolute top-50 end-0 translate-middle-y" type="button" id="button-addon2"><span>Start Free Trial</span></button>
</div>
</div>
</div>
</div>

<div class="with-bg">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="logo2 col-lg-3 col-md-auto col-sm-auto col-xs-3">
<img src="images/logo2.png" alt="logo">
</div>

</div>
<div class="row justify-content-center">
<div class="socio-txt d-flex justify-content-center">
<p class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<br>dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="social col-md-3">
<ul class=" d-flex justify-content-between p-0">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-skype"></i></a></li>
<li><a href="#"><i class="fa-brands fa-google-plus-g"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>

</ul>
</div>
</div>
</div>
<div class="row d-flex justify-content-center m-0 p-0">
<p class="footer-btm">&copy2018 Appo! Powered by <span>Themexpo</span></p>
</div>
</div>
</footer>
<!-- footer section End -->


Expand Down
87 changes: 83 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,24 @@
<!-- |---------------------------|
| All Css File Here |
|---------------------------| -->
<!-- font for this website -->
<!-- Nunito font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<!-- end of nunito font cdn -->
<!-- rubik font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<!-- end of rubik font -->

<!-- css for bootstrap -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<!-- css for Fontawesome -->
<link rel="stylesheet" type="text/css" href="./assets/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
<!-- my css file -->
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- responsive css file -->
<link rel="stylesheet" href="./assets/css/responsive.css">

Expand Down Expand Up @@ -121,8 +132,76 @@




<!-- Footer Section Start -->

<footer>
<div class="section">
<div class="downapp">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 ">
<h5>
Download this app now
</h5>
<p>Choose your operating system:</p>
<div class="d-flex justify-content-between">
<img src="images/download-logo1.png" alt="#">
<img src="images/download-logo2.png" alt="#">
</div>
<div>
<h6 class="py-3">Stay Updated</h6>
</div>
</div>
<div class="col-md-9 col-sm-12 vlog-down">
<div class="input-group mb-3">
<input type="text" class="form-control position-relative fontAwesome" placeholder="&#xf0e0; Your Email" aria-label="Recipient's username" aria-describedby="button-addon2"/>
<button class="btn position-absolute top-50 end-0 translate-middle-y" type="button" id="button-addon2"><span>Subscribe</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="with-bg">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="logo2 col-lg-3 col-md-auto col-sm-auto col-xs-3">
<img src="images/logo2.png" alt="logo">
</div>

</div>
<div class="row justify-content-center">
<div class="socio-txt d-flex justify-content-center">
<p class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<br>dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="social col-md-3">
<ul class=" d-flex justify-content-between p-0">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-skype"></i></a></li>
<li><a href="#"><i class="fa-brands fa-google-plus-g"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>

</ul>
</div>
</div>
</div>
<div class="row d-flex justify-content-center m-0 p-0">
<p class="footer-btm">&copy2018 Appo! Powered by <span>Themexpo</span></p>
</div>
</div>

</footer>




<!-- Footer Section End -->


Expand All @@ -145,7 +224,7 @@
<!-- js fo bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- js for fontawesome -->
<script src="./assets/js/all.min.js"></script>
<script src="assets/js/all.min.js"></script>
<!-- External js -->
<script src="./assets/js/app.js"></script>

Expand Down