diff --git a/index.html b/index.html index e4eb38f..172cbe7 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,36 @@ Developer Students Club|Navarachna University + + - - - - -
- - - -
- +
@@ -76,6 +84,24 @@

Contact Us

- + diff --git a/main.css b/main.css index 8a1a035..db5af82 100644 --- a/main.css +++ b/main.css @@ -1,68 +1,174 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; - scroll-behavior: smooth; +@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Barlow', sans-serif; } - -body { - background: rgb(255, 255, 255); +/* custom scroll bar */ +::-webkit-scrollbar { + width: 10px; } - -header img { - width: auto; - height: 47px; - padding-left: 1rem; - position: absolute; +::-webkit-scrollbar-track { + background: #f1f1f1; } - -header { - position: fixed; - top: 0; - left: 0; - height: 72px; - width: 100vw; - padding: 0; - display: flex; - justify-content: space-around; - align-items: center; - z-index: 10000; - background: rgb(255, 255, 255); - filter: drop-shadow(0px 2px 2px rgba(77, 50, 50, 0.25)); +::-webkit-scrollbar-thumb { + background: #888; } - -header ul { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 50%; - margin-right: 1.2rem; +::selection{ + background: rgb(0,123,255,0.3); } - -header ul li { - list-style: none; +.content{ + max-width: 1250px; + margin: auto; + padding: 0% 0px; } - -header ul li a { - text-decoration: none; - padding: 6px 15px; - color: rgb(0, 0, 0); - border-radius: 20px; +.navbar{ + position: fixed; + width: 100%; + z-index: 2; + padding: 25px 0; + transition: all 0.3s ease; } - -header ul li a:hover, -header ul li a:active { - background: #5185EB; - color: #ffffff; +.navbar.sticky{ + background: #fff; + padding: 10px 0; + box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); } - -.logo { - height: 47px; - width: 50%; +.navbar .content{ + display: flex; + align-items: center; + justify-content: space-between; +} +.navbar .logo img{ + width: 300px; +} +.navbar .menu-list{ + display: inline-flex; +} +.menu-list li{ + list-style: none; +} +.menu-list li a{ + color: #567FC0; + text-transform: uppercase; + font-size: 17px; + font-weight: 400; + margin-left: 25px; + text-decoration: none; + transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);; +} +.icon{ + color: #000; + font-size: 20px; + cursor: pointer; + display: none; +} +.menu-list .cancel-btn{ + color: #fff; + position: absolute; + right: 30px; + top: 20px; +} +@media (max-width: 1230px) { + .content{ + padding: 0 60px; + } + +} +@media (max-width: 1100px) { + .content{ + padding: 0 40px; + } +} +@media (max-width: 900px) { + .content{ + padding: 0 30px; + } +} +@media (max-width: 868px) { + body.disabled{ + overflow: hidden; + } + .icon{ + display: block; + } + .icon.hide{ + display: none; + } + .navbar .menu-list{ + position: fixed; + height: 100vh; + width: 100%; + max-width: 400px; + left: -100%; + top: 0px; + display: block; + padding: 40px 0; + text-align: center; + background: #567FC0; + color:#fff; + transition: all 0.3s ease; + } + .navbar.show .menu-list{ + left: 0%; + } + .navbar .menu-list li{ + margin-top: 45px; + } + .navbar .menu-list li a{ + font-size: 15px; + margin-left: -100%; + transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); + color: #fff; + } + .navbar.show .menu-list li a{ + margin-left: 0px; + } +} +@media (max-width: 380px) { + .navbar .logo img{ + width:230px; + } +} +@media (min-width: 868px) and (max-width : 1600px){ + span { + position: relative; + display: block; + cursor: pointer; + } + + span:before, span:after { + content: ''; + position: absolute; + width: 0%; + height: 1px; + top: 50%; + margin-top: -0.5px; + background: #DF3235; + } + + span:before { + left: 10px; + } + span:after { + right: -10px; + background: #DF3235; + transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); + } + + span:hover:before { + background: #DF3235; + width: 100%; + transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); + } + + span:hover:after { + background: transparent; + width: 100%; + transition: 0s; + } } - section { position: relative; width: 100%;