diff --git a/about-us.html b/about-us.html index 0b0c972..3bf1f10 100644 --- a/about-us.html +++ b/about-us.html @@ -35,41 +35,46 @@
-
- +
+ @@ -137,6 +142,7 @@

Contact Us

class="link-primary" >GitHub Repository. +

@@ -160,7 +166,7 @@

Contact Us

  • - +
  • diff --git a/contact-us.html b/contact-us.html index 33161d2..a92b852 100644 --- a/contact-us.html +++ b/contact-us.html @@ -95,7 +95,7 @@
  • - +
  • diff --git a/gratisography-cyber-kitty-800x525.jpg b/gratisography-cyber-kitty-800x525.jpg new file mode 100644 index 0000000..7c6b852 Binary files /dev/null and b/gratisography-cyber-kitty-800x525.jpg differ diff --git a/index.html b/index.html index ab50bda..505e091 100644 --- a/index.html +++ b/index.html @@ -21,15 +21,21 @@
    -
    + +
    +
    -
    +
    + @@ -62,31 +69,11 @@
    -
    -
    -
    User Image
    -

    Gyan Pratap Singh

    -
    - Javascript - ReactJs - C++ - Nodejs - -
    -     -
    -
    User Image
    +
    User Image

    Susmita Santi

    ReactJS @@ -108,6 +95,28 @@

    Susmita Santi

    +
    +
    +
    User Image
    +

    Gyan Pratap Singh

    +
    + Javascript + ReactJs + C++ + Nodejs + +
    + + +
    +
    User Image
    @@ -165,6 +174,51 @@

    Karunakar S

    + + + + +
    +
    + +
    User Image
    +

    Aditya Singh

    +
    + HTML + CSS + JAVASCRIPT + PYTHON + C++ +
    + +
    + + + +
    +
    + +
    User Image
    +

    Lakshyaraj

    + +
    + HTML + CSS + JavaScript + Node.js +
    + + +
    @@ -173,7 +227,7 @@

    Hemang Yadav

    JS/TS Vue.js - Astro + + Astro ReactJS NextJS
    @@ -343,6 +397,29 @@

    Ratna Jaiswal

    + +
    +
    +
    User image
    +

    Kavita Yadav

    +
    + + C + C++ + Java + HTML + CSS + Javascript +
    + +
    +
    @@ -1133,6 +1210,8 @@

    Hemant Krishna

    + + diff --git a/project.html b/project.html index c2d558e..3b3e0f6 100644 --- a/project.html +++ b/project.html @@ -19,32 +19,42 @@
    -
    - -
    + +
    +
    + +
    +

    @@ -79,6 +89,73 @@

    Tanvi

    + + +
    +
    +
    User Image
    +

    Gyan Pratap Singh

    +
    + + + +
    +
    + Text_UTILS Editor + Repo Url + Deploy Link +
    +
    + Javascript + ReactJs + C++ + Nodejs + +
    + +
    + + +
    +
    +
    User Image
    +

    Anurag Srivastav

    +
    + + + +
    +
    + Quicker Sign + Repo URL + Deploy Link +
    +
    + React js + Express + Mongo DB + JWT + +
    + +
    + +
    User Image @@ -172,38 +249,7 @@

    Hemang Yadav

    -
    -
    -
    User Image
    -

    Gyan Pratap Singh

    -
    - - - -
    -
    - Text_UTILS Editor - Repo Url - Deploy Link -
    -
    - Javascript - ReactJs - C++ - Nodejs - -
    - -
    +
    @@ -265,35 +311,7 @@

    Prateek Sethi

    -
    -
    -
    User Image
    -

    Anurag Srivastav

    -
    - - - -
    -
    - Quicker Sign - Repo URL - Deploy Link -
    -
    - React js - Express - Mongo DB - JWT - -
    - -
    +
    @@ -568,6 +586,7 @@

    Ashish

    + @@ -625,7 +644,7 @@

    Suramya Ranjan

  • - +
  • @@ -651,4 +670,4 @@

    Suramya Ranjan

    - \ No newline at end of file + diff --git a/script.js b/script.js index 1c6ab46..738924b 100644 --- a/script.js +++ b/script.js @@ -3,6 +3,7 @@ const searchInput = document.getElementById('searchInput'); const profiles = document.querySelectorAll('.profile'); const date = document.getElementById('dates') + let currentDate = new Date() let currentYear = currentDate.getFullYear() date.innerHTML = currentYear @@ -41,9 +42,11 @@ darkMode.addEventListener("click", () => { if(document.body.classList.contains("light-background")){ icon.style.filter='invert(0%)'; icon.src="light.png"; + }else{ icon.style.filter='invert(100%)'; icon.src="dark.png"; + } darkMode.classList.toggle("icon-position") darkMode.classList.toggle("light-background"); @@ -51,7 +54,7 @@ darkMode.addEventListener("click", () => { document.querySelector(".title").classList.toggle("text-color"); document.querySelector("footer").classList.toggle("text-color"); const buttons = document.querySelectorAll('.add'); - + buttons.forEach(button => { button.classList.toggle('bg-color'); }); diff --git a/style.css b/style.css index 5e3148a..6ff3192 100644 --- a/style.css +++ b/style.css @@ -65,7 +65,7 @@ body { /* Navbar */ -nav{ +/* nav{ display: flex; width: 100%; justify-content: space-between; @@ -76,7 +76,127 @@ nav{ .nav-links{ display: flex; align-items: center; +} */ + + + + + + + + + + +/* General Styles for Navbar */ +nav { + /* background: yellow; */ + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + padding: 10px 20px; +} + +.title a { + font-size: 1.5rem; + text-decoration: none; + color: black; } + +.nav-links { + display: flex; + align-items: center; + gap: 15px; +} + +.add { + background-color: #007BFF; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + display: flex; + align-items: center; +} + +.add i { + margin-left: 5px; +} + +.dark-btn { + background: none; + border: none; + cursor: pointer; +} + +img#icon { + width: 30px; +} + +@media (max-width: 768px) { + nav { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* margin-bottom: 5px; */ + } + + .nav-links { + margin-top: 10px; + flex-direction: column; + /* align-items: flex-end; */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + width: 100%; + } + + .add { + width: 100%; + text-align: center; + } +} + +@media (max-width: 480px) { + .title a { + font-size: 1.2rem; + } + + .add { + padding: 8px 10px; + font-size: 0.9rem; + } + + img#icon { + width: 25px; + } +} + + + + + + + + + + + + + + + + + + + + + + body, .title, @@ -93,6 +213,7 @@ body .title { .title a { text-decoration: none; color: red; + } .container { display: flex; @@ -157,10 +278,14 @@ body .title { .profile:hover { transform: translateY(-2%) scale(1.02); - text-decoration: underline; color: #FEE5FE; } +.profile:hover .name { + + text-decoration: underline; +} + .profile .lines { position: absolute; inset: 0; @@ -255,7 +380,7 @@ body .title { } .project a:hover { - color: #333; + color: #c83a3a; font-size: 28px; } @@ -326,7 +451,22 @@ button:hover { color: var(--color-body-bg); font-weight: 600; margin: 5px; + border-radius: 23px; + transition:0.3s; } +.add:hover{ + background-color: #f9c1ed; + +} +.title{ + background: #ffffff; + display: flex; + justify-content: center; + align-items: center; + +} + + .search { max-width: 1200px; @@ -375,7 +515,14 @@ header { font-size: 36px; font-family: "PT Serif", serif; color: var(--color-profile-border); - margin-top: 15px; + margin-top: 1px; + border-radius: 13px; + height: 60px; + font-weight: 500; + padding: 5px 10px; +} +.title:hover{ + background: #b0d5ee; } /* Dark Mode - Light mode Button */