diff --git a/native/helpers/challenges.js b/native/helpers/challenges.js index 40eb57558..5b5d88bd4 100644 --- a/native/helpers/challenges.js +++ b/native/helpers/challenges.js @@ -82,6 +82,15 @@ export const challenges = [ youtube: 'https://youtu.be/urA5ogzG0L0', tags: [], }, + { + title: 'Footer', + link: 'Footer', + difficulty: 'easy', + developer: 'AbhineshJha', + youtube: 'https://youtu.be/FRRlFLfdvBE?si=HWn88BwJGTJvEBUD', + tags: [], + isNew: true, + }, { title: 'Multi Typing', link: 'multi-typing', diff --git a/native/helpers/contributors.js b/native/helpers/contributors.js index f0daad201..f123cd2a1 100644 --- a/native/helpers/contributors.js +++ b/native/helpers/contributors.js @@ -10,4 +10,5 @@ export const contributors = new Map([ ['Sukomal07', { name: 'Sukomal Dutta', pic: 'https://avatars.githubusercontent.com/u/100500478' }], ['5h0ov', { name: 'Shuvadipta Das', pic: 'https://avatars.githubusercontent.com/u/83227649' }], ['shruti-sen2004', { name: 'Shruti Sen', pic: 'https://avatars.githubusercontent.com/u/115914670' }], + ['AbhineshJha', { name: 'ABHINESH KUMAR JHA', pic: 'https://avatars.githubusercontent.com/u/142514166' }], ]); diff --git a/native/machine-coding/Footer/index.html b/native/machine-coding/Footer/index.html new file mode 100644 index 000000000..5c9f1d473 --- /dev/null +++ b/native/machine-coding/Footer/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + Enhanced Responsive Footer + + + + +
+ +
+ + + diff --git a/native/machine-coding/Footer/logo.png b/native/machine-coding/Footer/logo.png new file mode 100644 index 000000000..91f86543f Binary files /dev/null and b/native/machine-coding/Footer/logo.png differ diff --git a/native/machine-coding/Footer/script.js b/native/machine-coding/Footer/script.js new file mode 100644 index 000000000..d2d297718 --- /dev/null +++ b/native/machine-coding/Footer/script.js @@ -0,0 +1,8 @@ +// JavaScript functionality for toggling the mobile navigation menu +const toggleMenu = () => { + const footerLinks = document.querySelector('.footer-links ul'); + footerLinks.classList.toggle('show'); +}; + +const menuButton = document.querySelector('.footer-links button'); +menuButton.addEventListener('click', toggleMenu); diff --git a/native/machine-coding/Footer/style.css b/native/machine-coding/Footer/style.css new file mode 100644 index 000000000..5e9519539 --- /dev/null +++ b/native/machine-coding/Footer/style.css @@ -0,0 +1,81 @@ +/* Reset some default styles */ +body, ul { + margin: 0; + padding: 0; +} + +/* Define styles for the footer */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +footer { + background-color: #7f3535; + color: #fff; + padding: 20px; + border-top: 2px solid #555; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-logo img { + max-width: 100px; + background: white; + border-radius: 85px; +} + +.footer-links ul, +.footer-social ul { + list-style: none; + font-size: 25px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + padding: 0; +} + +.footer-links ul li, +.footer-social ul li { + margin: 5px 0; +} + +.footer-links a, +.footer-social a { + text-decoration: none; + color: #fff; +} + +.footer-contact p { + margin: 10px 0; +} + +.footer-contact a { + color: #fff; +} + +.footer-bottom { + text-align: center; + padding-top: 10px; +} + +/* Media query for responsiveness */ +@media screen and (min-width: 768px) { + .footer-content { + flex-direction: row; /* Display elements in a row on larger screens */ + justify-content: space-between; /* Add spacing between elements */ + align-items: center; /* Vertically align content */ + text-align: left; /* Reset text alignment */ + } + .footer-logo img { + margin-bottom: 10px; + } + + .footer-links ul, + .footer-social ul { + text-align: center; + } +}