Skip to content

Commit

Permalink
add footer of marketing agency website
Browse files Browse the repository at this point in the history
  • Loading branch information
@ANKeshri
ANKeshri committed Jul 24, 2024
1 parent 64f7e4c commit fbeb10b
Show file tree
Hide file tree
Showing 2 changed files with 324 additions and 5 deletions.
229 changes: 229 additions & 0 deletions Projects/Marketing_agency/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@
/*-----------------------------------*\
#CUSTOM PROPERTY
\*-----------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

:root {
--primaryColor: #f09d51;
--mainWhite: #fff;
--mainBlack: #222;
--mainGrey: #ececec;
--mainSpacing: 0.1rem;
--mainTransition: all 0.3s linear;
}

:root {

Expand Down Expand Up @@ -1174,4 +1184,223 @@ textarea.input-field {

.contact-card .card-icon { padding: 15px; }

}
/* footer styling */
#footer {
color: #fff;
font-family: "Ubuntu";
padding: 60px;
}
.gradient-background{
background: #333;
}


#footer ul {
list-style: none;
padding-left: 0;

}

#footer ul li {
margin-bottom: 10px;
}

#footer ul li a {
color: aliceblue;
font-weight: 600;

}

#footer .signup_form {
padding-bottom: 30px;
}

#footer .signup_form input {
width: 85%;
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
background: white;
margin-right: 5px;
}

#footer .signup_form button {
padding: 10px;
background-image: var(--gradient);
border: none;
border-radius: 0 5px 5px 0;
color: black;
}

.footer-icon {
margin-right: 30px;
}

.footer-social-icons i {
font-size: 2.6rem;
margin: 0 10px;
}

.footer-social-icons i:hover {
color: #f2cbd0;
transform: scale(1.1);
}
/* Footer */
.footer {
background-color: #f8f9fa;
padding: 20px 0;
}

.footer h4 {
font-weight: 600;
margin-bottom: 20px;
}

.social-icons {
list-style: none;
padding: 0;
}

.social-icons li {
display: inline;
margin-right: 10px;
}

.social-icons a {
text-decoration: none;
color: #000;
font-size: 1.5rem;
}

.footer p {
margin: 0;
}
b, strong {
font-weight: 600;
}
.row{
display: flex;
justify-content: space-evenly;
}
.location{
width: 20%;
}
.cnt{
width: 40%;
}
.cnt h3{
color: white;
}
.location h3{
color: white;
}
#cont{
margin-top: 1rem;
margin-bottom: 2rem;

}
#footer ul {
list-style: none;
padding-left: 0;
}
@media (min-width: 768px) {
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
}
.copyright {
text-align: center;
font-weight: 800;
padding-top: 10px;
border-top: 2px solid var(--gradient);
margin-top: 30px;
}
.gradient-background {
background: #333;
background-size: 180% 180%;
animation: gradient-animation 18s ease infinite;
}
#footer h4 {
font-family: "Montserrat";
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
}
#footer ul li a {
color: aliceblue;
font-weight: 600;
}
.text-decoration-none {
text-decoration: none !important;
}
#footer {
color: #fff;
font-family: "Ubuntu";
padding: 60px;
}
#footer h4 {
font-family: "Montserrat";
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
}

#footer h4::after {
content: '';
position: absolute;
width: 50px;
height: 5px;
background-image: var(--gradient);
left: 0;
bottom: 0;
}
.subscribe{
display: flex;
}
button {
appearance: auto;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
writing-mode: horizontal-tb !important;
margin: 0em;
padding-block: 1px;
padding-inline: 6px;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
border-image: initial;
}
100 changes: 95 additions & 5 deletions Projects/Marketing_agency/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
<link
href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
</head>

<body id="top">
Expand Down Expand Up @@ -788,13 +794,70 @@ <h3 class="h3 card-title">Call Here</h3>
<!--
- #FOOTER
-->

<footer class="footer">
<!-- Footer -->
<section id="footer" class="gradient-background">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-12">
<div>
<h4>Services</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Home</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Features</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Pricing</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">FAQs</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">About</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div>
<h4>Further Infomation</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Terms & Conditions</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Phone: 91+ 9900000000</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Address: XYZ,India</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div>
<h4>Subscribe</h4>
<div class="signup_form">
<form class="subscribe">
<input type="text" class="subscribe__input" placeholder="Enter Email Address">
<button type="button" class="subscribe__btn"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
<div>
<h4>Follow Us</h4>
<ul class="footer-social-icons">
<i class="footer-icon fa-brands fa-facebook-f"></i>
<i class="footer-icon fa-brands fa-instagram"></i>
<i class="footer-icon fa-solid fa-envelope"></i>
</ul>
</div>
</div>

</div>
<div id="popup">Thanks for subscribing!</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<p class="copyright">
&copy; 2022 All Rights Reserved by <a href="#" class="copyright-link">codewithsadee</a>
</p>
</div>
</div>
</div>

<p class="copyright">
&copy; 2022 All Rights Reserved by <a href="#" class="copyright-link">codewithsadee</a>
</p>
</section>

</div>
</footer>
Expand Down Expand Up @@ -825,6 +888,33 @@ <h3 class="h3 card-title">Call Here</h3>
-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
document.querySelector('.subscribe__btn').addEventListener('click', function() {
// Show the popup
var popup = document.getElementById('popup');
popup.style.display = 'block';
popup.style.position = 'fixed';
popup.style.top = '23rem'; // Positioning at the top
popup.style.right = '20px'; // Positioning at the right
popup.style.backgroundColor = 'green'; // Green background
popup.style.color = 'white'; // White text
popup.style.padding = '10px 20px';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
popup.style.zIndex = '1000';
popup.style.width = '13rem';

// Hide the popup after 3 seconds
setTimeout(function() {
popup.style.display = 'none';
}, 3000);
});

// Initial style setup for the popup (hidden by default)
var popup = document.getElementById('popup');
popup.style.display = 'none';
</script>
<script src="https://kit.fontawesome.com/eb59e06a58.js" crossorigin="anonymous"></script>

</body>

Expand Down

0 comments on commit fbeb10b

Please sign in to comment.