diff --git a/footer.css b/footer.css new file mode 100644 index 0000000..d84f163 --- /dev/null +++ b/footer.css @@ -0,0 +1,53 @@ +.footer{ + background:#93B1C6; + padding:30px 0px; + font-family: 'Play', sans-serif; + text-align:center; + } + + .footer .row{ + width:100%; + margin:1% 0%; + padding:0.6% 0%; + color:gray; + font-size:2.5em; + } + + .footer .row a{ + text-decoration:none; + color:gray; + transition:0.5s; + } + + .footer .row a:hover{ + color:#fff; + } + + .footer .row ul{ + width:100%; + } + + .footer .row ul li{ + display:inline-block; + margin:0px 30px; + } + + .footer .row a i{ + font-size:3em; + margin:0% 1%; + } + + @media (max-width:720px){ + .footer{ + text-align:left; + padding:5%; + } + .footer .row ul li{ + display:block; + margin:10px 0px; + text-align:left; + } + .footer .row a i{ + margin:0% 3%; + } + } \ No newline at end of file diff --git a/footer1.css b/footer1.css new file mode 100644 index 0000000..f71a2ce --- /dev/null +++ b/footer1.css @@ -0,0 +1,218 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); + +/* *{ + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Poppins', sans-serif; +} */ + +html{ + position: relative; +} + +footer{ + color: #fff; + background-image: linear-gradient(90deg, rgba(39,27,111,1) 0%, rgba(87,25,45,1) 100%); + position: relative; + width: 100%; + height: 100%; + top:350px; + border-top-left-radius: 70px; + font-size: 0.8rem; + z-index: -1; + +} + +@media (max-width:960px) { + footer{ + width: 100%; + top: 120px; + } + +.main{ + margin: 50px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; +} + +.logo{ + grid-column: 1/3; + } + +.office{ + grid-column: 3/5; + } + +.link{ + grid-column: 1/3; + } + + +} + +@media (max-width:660px){ + .main{ + gap:10px; + margin: 0; + + } + + .icons{ + display: flex; + } + + + + .row{ + grid-column: 1/4; + } +} + +.abdullah{ + width: 100px; +} + +.main{ + margin: 50px; + padding-top: 20px; + padding-bottom: 50px; + display: grid; + gap: 50px; + grid-template-columns: repeat(4, 1fr ); +} + +.row{ + margin-top: 50px; +} + +.footer-header{ + font-size: 1.5rem; + margin-bottom: 20px; +} + +.office-des{ + display: flex; + flex-direction: column; + gap: 20px; +} + +.office a{ + text-decoration: none; + color: #98A8F8; +} + +.office a:hover{ + color: #fff; +} + +.num{ + font-size: 1rem; + font-weight: 500; +} + +.link-des{ + display: flex; + flex-direction: column; + gap:10px; +} + +.link-des a{ + color: #fff; + text-decoration: none; + font-size: 1rem; +} + +.link-des a:hover{ + color: #FB2576; + transition: linear 0.3s; +} + +.btn-know{ + text-decoration: none; + background-color: #fff; + padding: 10px; + position: relative; + top: 30px; + background-color: transparent; + border: 1px solid #98A8F8; + color: #98A8F8; + text-transform: uppercase; + border-radius:10px; +} + +.btn-know:hover{ + color: white; + background-color: #98A8F8; + transition: linear 0.3s; +} + +.subscribe{ + display: flex; +} + +input[type=mail]{ + border: none; + padding-bottom: 5px; + border-bottom: 1px solid #fff; + background-color: transparent; + font-size: 0.8rem; +} + +.sub-icon{ + margin: 7px; + margin-right: 15px; + margin-left: 0; + font-size: 1.5rem; +} + +.ri-arrow-right-line{ + margin-left: 0; + +} + +.icons a{ + text-decoration: none; + color: #fff; + border: 1px solid #fff; + justify-content: center; + padding: 10px; + border-radius: 50%; + align-items: center; + font-size: 1.1rem; + margin: 2%; +} + +.social-icon{ + position: relative; + top:2px; +} + +.icons a:hover{ + color: #fff; + background-color: #FB2576; + border-color: #FB2576; +} + +.newsletter-des{ + display: flex; + flex-direction: column; + gap: 40px; +} + +.copyright{ + text-align: center; +} + +hr{ + width: 90%; + margin: 2px auto; + opacity: 40%; + border: 0.01px solid white; +} + +.copyright p{ + padding: 20px; +} + diff --git a/footer2.css b/footer2.css new file mode 100644 index 0000000..4422a55 --- /dev/null +++ b/footer2.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +.main-section { + width: 100%; + text-align: center; + padding: 5rem 0; +} + +.footer { + display: flex; + color: #fffefe; + padding: 2rem 0; + height: auto; + justify-content: space-around; + flex-wrap: wrap; + background-color: #93B1C6; +} + +.box { + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; +} + +.footer h2 { + font-size: 1.3rem; + margin-bottom: 1rem; + font-weight: bold; +} + +.links li { + list-style: none; + line-height: 30px; + text-align: center; + font-weight: 100; +} + +.links li a { + text-decoration: none; + color: #fff; +} + +.registration { + display: flex; + flex-direction: column; +} + +.registration input { + padding: 10px; + font-weight: 100; + border: none; + outline: none; + border-radius: 5px; + text-align: center; + font-size: 12px; + margin: 1rem 0; +} + +button { + border: none; + padding: 12px 0; + border-radius: 30px; + cursor: pointer; +} + +.address { + text-align: center; + margin-bottom: 10px; +} + +.social { + display: flex; + list-style: none; +} + +.social li { + margin: 0 8px; + cursor: pointer; + font-size: 18px; +} \ No newline at end of file diff --git a/header.css b/header.css new file mode 100644 index 0000000..60efd9e --- /dev/null +++ b/header.css @@ -0,0 +1,8 @@ +header { + background-image: url(./img/space.jpg); + background-repeat:no-repeat; + background-size: 100%; + background-position:top left; + position: relative; +} + diff --git a/img/me.jpg b/img/me.jpg new file mode 100644 index 0000000..0e5cb0d Binary files /dev/null and b/img/me.jpg differ diff --git a/img/safari.jpg b/img/safari.jpg new file mode 100644 index 0000000..978dcb7 Binary files /dev/null and b/img/safari.jpg differ diff --git a/img/safari.jpg:Zone.Identifier b/img/safari.jpg:Zone.Identifier new file mode 100644 index 0000000..e69de29 diff --git a/img/sky.jpg b/img/sky.jpg new file mode 100644 index 0000000..d0be19c Binary files /dev/null and b/img/sky.jpg differ diff --git a/img/sky.jpg:Zone.Identifier b/img/sky.jpg:Zone.Identifier new file mode 100644 index 0000000..e69de29 diff --git a/img/space.jpg b/img/space.jpg new file mode 100644 index 0000000..a3b0c40 Binary files /dev/null and b/img/space.jpg differ diff --git a/img/space.jpg:Zone.Identifier b/img/space.jpg:Zone.Identifier new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..4cd3021 --- /dev/null +++ b/index.html @@ -0,0 +1,211 @@ + + + + + + + Footer + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+

mdsfmesfsaemkl

+ + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..bc96e86 --- /dev/null +++ b/main.js @@ -0,0 +1,16 @@ +const hamburger = document.querySelector(".hamburger"); +const navMenu = document.querySelector(".nav-menu"); +const navLink = document.querySelectorAll(".nav-link"); + +hamburger.addEventListener("click", mobileMenu); +navLink.forEach(n => n.addEventListener("click", closeMenu)); + +function mobileMenu() { + hamburger.classList.toggle("active"); + navMenu.classList.toggle("active"); +} + +function closeMenu() { + hamburger.classList.remove("active"); + navMenu.classList.remove("active"); +} \ No newline at end of file diff --git a/modal.css b/modal.css new file mode 100644 index 0000000..37ec626 --- /dev/null +++ b/modal.css @@ -0,0 +1,37 @@ +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..2412881 --- /dev/null +++ b/modal.js @@ -0,0 +1,25 @@ +// Get the modal +var modal = document.getElementById("myModal"); + +// Get the button that opens the modal +var btn = document.getElementById("myBtn"); + +// Get the element that closes the modal +var span = document.getElementsByClassName("close")[0]; + +// When the user clicks on the button, open the modal +btn.onclick = function() { + modal.style.display = "block"; +} + +// When the user clicks on (x), close the modal +span.onclick = function() { + modal.style.display = "none"; +} + +// When the user clicks anywhere outside of the modal, close it +window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } +} \ No newline at end of file diff --git a/navbar.css b/navbar.css new file mode 100644 index 0000000..7d4251e --- /dev/null +++ b/navbar.css @@ -0,0 +1,155 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +html { + font-size: 62.5%; + font-family: 'Roboto', sans-serif; +} + +li { + list-style: none; +} + +a { + text-decoration: none; +} + +.header{ + border-bottom: 1px solid #E2E8F0; + z-index:2 ; + width:100%; + height:50vh; + padding-left: -0; +} + + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem 1.5rem; +} + +.hamburger { + display: none; +} + +.bar { + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #101010; +} + +.nav-menu { + display: flex; + justify-content: space-between; + align-items: center; + /* to make nav-conctact full visible */ + padding-right: 2%; +} + +.nav-item { + margin-left: 5rem; +} + +.nav-link{ + font-size: 1.6rem; + font-weight: 400; + color: #475569; +} + +.nav-link:hover{ + color: #482ff7; +} + +.nav-logo { + font-size: 2.1rem; + font-weight: 500; + color: #482ff7; +} + +@media only screen and (max-width: 768px) { + .nav-menu { + position: fixed; + left: -120%; + top: 5rem; + flex-direction: column; + background-color: #fff; + width: 100%; + border-radius: 10px; + text-align: center; + transition: 0.3s; + box-shadow: + 0 10px 27px rgba(0, 0, 0, 0.05); + /* make navbar be above all elements */ + } + + .nav-menu.active { + left: 0; + } + + .nav-item { + margin: 2.5rem 0; + } + + .hamburger { + display: block; + cursor: pointer; + padding-right: 5%; + } + + .hamburger.active .bar:nth-child(2) { + opacity: 0; + } + + .hamburger.active .bar:nth-child(1) { + -webkit-transform: translateY(8px) rotate(45deg); + transform: translateY(8px) rotate(45deg); + } + + .hamburger.active .bar:nth-child(3) { + -webkit-transform: translateY(-8px) rotate(-45deg); + transform: translateY(-8px) rotate(-45deg); + } +} + + +/* make .navbar fixed so that any content in the main-tag can flow under the nab-bar */ +.navbar{ + overflow: hidden; + /* background-color: #333; */ + background-color: #93B1C6; + + } + +/* ------------------ START: Put content under fixed navbar------------- */ + .navbar{ + position:fixed; + top:0; + left:0; + right:0; + width:100%; + /* navbar height */ + height:10vh; + background: #93B1C6 + } +/* --------- space between main-content to navbar */ + main { + padding-top: 10vh;; + padding-left:50px; + padding-right:50px; + + } + main { + font-size:44px + }