diff --git a/assets/Group219.svg b/assets/Group219.svg new file mode 100644 index 0000000..73fbb7a --- /dev/null +++ b/assets/Group219.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/image_bg.jpeg b/assets/image_bg.jpeg new file mode 100644 index 0000000..2db2355 Binary files /dev/null and b/assets/image_bg.jpeg differ diff --git a/css/footer.css b/css/footer.css index 512dc05..c60a015 100644 --- a/css/footer.css +++ b/css/footer.css @@ -3,132 +3,126 @@ footer{ bottom: 0; left: 0px; width: 100%; - background: hsl(214, 90%, 69%); - } + background: rgb(0, 0, 0, 0.9) url(/neos-20.github.io/assets/Group219.svg) top left no-repeat; + background-size: cover; + + } + /* .bgimg{ + background: rgb(0, 0, 0, 0.9) url(/assets/Group219.svg) top left no-repeat; + background-size: cover; + } */ .img img{ - display: block; - margin-left: auto; - margin-right: auto; - filter: contrast(300%); - - - width: 70%; - } - .img .name h2{ - text-align: center; - font-size:30px; - } - .main-content{ - display: flex; - color: black; - } - .main-content .box{ - flex-basis: 50%; - padding: 10px 20px; - } - .box h2{ - font-size: 1.5rem; - font-weight: 600; - text-transform: uppercase; - text-decoration: none; - } - .box a{ - font-size: 1.3rem; - font-weight: 600; - - text-decoration: none; - color: black; - - } - .box .content{ - margin: 20px 0 0 0; - position: relative; - - } - .box .content:before{ - position: absolute; - content: ''; - top: -10px; - height: 2px; - width: 100%; - background: #1a1a1a; - } - .box .content:after{ - position: absolute; - content: ''; - height: 2px; - width: 15%; - background: #1a1a1a; - top: -10px; - } - .left .content p{ - text-align: justify; - } - .left .content .social{ - margin: 20px 0 0 0; - } - .left .content .social a{ - padding: 0 2px; - } - .left .content .social a span{ - height: 40px; - width: 40px; - background: #1a1a1a; - line-height: 40px; + display: block; + margin-left: auto; + margin-right: auto; + filter: contrast(300%); + width: 60%; +} +.img .name h2{ text-align: center; - font-size: 18px; - border-radius: 5px; - transition: 0.3s; - } - .left .content .social a span:hover{ - background: #1a1a1a; - } + font-size:30px; + color:white; +} +.main-content{ + display: flex; + color: black; +} +.main-content .box{ + flex-basis: 90%; + padding: 10px 20px; +} +.box h2{ + font-size: 1.5rem; + font-weight: 600; + text-transform: uppercase; + text-decoration: none; +} +.box a{ + font-size: 1.3rem; + font-weight: 600; + + text-decoration: none; + color: black; + +} +.box .content{ + margin: 20px 0 0 0; + position: relative; + +} +.box .content:before{ + position: absolute; + content: ''; + top: -10px; + height: 2px; + width: 100%; + background: #1a1a1a; +} +.box .content:after{ + position: absolute; + content: ''; + height: 2px; + width: 15%; + background: #1a1a1a; + top: -10px; +} + + .right form .text{ - font-size: 1.0625rem; + font-size: 1.5rem; margin-bottom: 2px; - color: black; + color: rgb(255, 255, 255); + background-color:#363437; + border-radius: 12px; + padding-left: 5px; + width: 80%; + } .right form .msg{ margin-top: 10px; } .right form input, .right form textarea{ - width: 100%; + width: 80%; font-size: 1.0625rem; - background: hsl(214, 100%, 81%); + background: white; padding-left: 10px; border: none; - border-radius:10px; + border-radius:12px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } - .right form input:focus, + + .right form textarea:focus{ - outline-color: #3498db; + outline: none; } .right form input{ - height: 35px; + height: 32px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; - width: 100%; + width: 30%; border: none; + float: left; outline: none; background: white; font-size: 1.0625rem; font-weight: 500; cursor: pointer; - border-radius:10px; - transition: .3s; + border-radius:12px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);; + transition: 0.3s; } .right form .btn button:hover{ background: white; - } + } */ .bottom center{ padding: 5px; font-size: 0.9375rem; - background: #151515; + background: black; } .bottom center span{ color: white; @@ -139,4 +133,6 @@ footer{ } .bottom center a:hover{ text-decoration: underline; - } \ No newline at end of file + } + + \ No newline at end of file diff --git a/css/main.css b/css/main.css index 7e75af8..665493e 100644 --- a/css/main.css +++ b/css/main.css @@ -19,13 +19,23 @@ body { .navbar { justify-content: space-around; display: flex; + background-color: #3d3939; + transition: 0.4s; } +.sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 1; +} + + #logo { opacity: 0; } .options { text-align: right; - margin: 2rem 0rem; + margin: 0.3rem; } .options > div { @@ -105,7 +115,7 @@ body { } .part1 .ourcom .webdt h2 { - font-size: 1.875rem; + font-size: 2.5rem; border-left: 0.313rem solid var(--primary); padding-left: 1.25rem; margin-bottom: 1.875rem; @@ -113,16 +123,41 @@ body { .part1 .ourcom .appdt h2 { text-align: right; - font-size: 1.875rem; + font-size: 2.5rem; border-right: 0.313rem solid var(--primary); padding-right: 1.25rem; } .part1 .ourcom .designt h2 { - font-size: 1.875rem; + font-size: 2.5rem; border-left: 0.313rem solid var(--primary); padding-left: 1.25rem; } +.imgtxt1 img{ + width: 30%; + float: right; + border-radius: 30px; + margin-left: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); +} +.imgtxt2 img{ + width:30%; + border-radius: 30px; + float: left; + margin-right: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); +} +.imgtxt3 img{ + width: 30%; + float: right; + border-radius: 30px; + margin-left: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); + +} .image1 { position: absolute; height: 9rem; @@ -170,4 +205,4 @@ body { right: 17rem; clip-path: circle(40%); overflow: hidden; -} +} \ No newline at end of file diff --git a/index.html b/index.html index 941072f..b6a808c 100644 --- a/index.html +++ b/index.html @@ -1,203 +1,300 @@ - - - - - - - - NEOS - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-
Home
-
About
-
Projects
-
Portfolio
-
Blog
-
Contact
-
GitHub
-
- -
- - - -
- -
-

- - NEOS-20 -
INITIATIVE - -
- - Bunch of Students
- Collaborating to
Explore And Innovate Together - -
-

- - -
- -
-
- -
-
- -
-
- -
-
- -
-
- - -
-
-

Our Community

-
-

Web Development Team

-
- -

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

-
- - -
-
-

App Development Team

-
- -

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

-
-
-
-

Design Team

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

-
- -
-
- - - - - - - - - - - - + + + + + + + + NEOS + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

+ + NEOS-20 +
INITIATIVE + +
+ + Bunch of Students
+ Collaborating to
Explore And Innovate Together + +
+

+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ +
+

Our Community

+
+

Web Development Team

+
+ + + +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

+
+ + +
+
+

App Development Team

+
+ + +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

+
+
+
+

Design Team

+
+ +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium labore officia laboriosam aliquam dolor minus magni iste est tenetur maiores nihil, ipsa, hic consectetur explicabo? Eum qui expedita vitae dignissimos? Earum minus ad atque vel? Iure magni rerum omnis fuga aliquam accusantium, enim, repellendus delectus aperiam, nam cupiditate esse iste!

+ +
+ +
+ +
+
+ + + + + + + + + + + + + + + + diff --git a/js/sticnav.js b/js/sticnav.js new file mode 100644 index 0000000..a57623c --- /dev/null +++ b/js/sticnav.js @@ -0,0 +1,27 @@ +window.onscroll = function () { + scrollfunc() + stickynavfunc() +}; +var navbar = document.getElementById("navbar"); +var sticky = navbar.offsetTop; +function stickynavfunc() { + if (window.pageYOffset >= sticky) { + navbar.classList.add("sticky"); + + } else { + navbar.classList.remove("sticky"); + } +} + + + +function scrollfunc() { + if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { + + document.getElementById("navbar").style.padding = "0px 0px"; + + } else { + document.getElementById("navbar").style.padding = "20px 0px"; + + } +} \ No newline at end of file