Big Change, complete project section

Sadique982 · Feb 18, 2024 · 837fd0e · 837fd0e
1 parent 414e65b
commit 837fd0e
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 24 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -4,6 +4,11 @@
     padding: 0;
 }
 
+html {
+    padding: 0;
+    margin: 0;
+}
+
 body {
     --clr: white;
     background-color: black;
@@ -37,6 +42,18 @@ nav ol {
 li a {
     text-decoration: none;
     color: var(--clr);
+    margin: 0;
+    background-image: linear-gradient(180deg, transparent 95%, var(--clr), var(--clr));
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    padding-bottom: 3px;
+    transition: background-size .3s;
+
+}
+
+a:hover {
+    background-position-x: left;
+    background-size: 100% 100%;
 }
 
 .nameLogo {
@@ -142,7 +159,7 @@ main>img {
 .button {
     padding: 5px;
     margin-left: 2px;
-    border-image: linear-gradient(#9358F7, #F4426C, #4e86a5) 1;
+    border-image: linear-gradient( #F4426C, #9358F7, #4e86a5) 1;
     border-width: 2px;
     border-style: solid;
     text-decoration: none;
@@ -151,10 +168,47 @@ main>img {
 }
 
 .button img {
-    margin: 1px;
+    margin: 5px 2px 5px 5px;
 }
 
-section h6{
+section>h5 {
     text-transform: uppercase;
-    text-decoration: underline;
+    font-family: "Holtwood One SC", serif;
+    font-weight: lighter;
+}
+
+section {
+    margin-top: 2em;
+    border-bottom: 1px solid #a5a5b0;
+}
+
+section div {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    padding: 10px;
+    margin: 0;
+}
+#Project_name {
+    padding: 0;
+    margin-bottom: 5%;
+    font-weight: 900;
+}
+
+#project_detail {
+    margin: 15px;
+    font-family: 'Poppins';
+    font-weight: 300;
+}
+#tech {
+    font-weight: 100;
+    color: #6CACE4;
+}
+section div img {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+}
+section a{
+    color: var(--clr);
+    margin: 0;
+    padding: 0;
 }
diff --git a/index.html b/index.html
@@ -7,28 +7,29 @@
     <title>Mohammed Sadique | Portfolio</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@1,200&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@1,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@1,500&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,600;1,600&display=swap"
+        rel="stylesheet">
     <link rel="icon" href="pictures/MSlogo.png">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="css/styles.css">
     <script src="js/script.js"></script>
 </head>
 
 <body>
     <nav>
-        <a href="index.html" class="nameLogo">Mohammed&nbsp;Sadique</a>
+        <a href="../sadique982.github.io" class="nameLogo">Mohammed&nbsp;Sadique</a>
         <div class="list">
             <ol>
-                <li><a href="index.html">Home</a></li>
-                <li>About</li>
-                <li>Projects</li>
-                <li>Contact</li>
+                <li><a href="../sadique982.github.io">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#contact">Contact</a></li>
                 <label class="container">
                     <input checked="checked" type="checkbox" onclick="BWmode()">
                     <svg viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="moon">
@@ -45,11 +46,11 @@
             </ol>
         </div>
     </nav>
-    
+
     <main>
         <img src="pictures/Picture-GIF.gif">
         <p>Hey, I'm </p>
-        <h1 class="name">Mohammed Sadique</h1><br>
+        <h1 class="name" id="about">Mohammed Sadique</h1><br>
         <p>
             Currently pursuing Bachelor's program in Computer Science and Engineering at the Guru Gobind Singh
             Indraprastha
@@ -62,26 +63,94 @@ <h1 class="name">Mohammed Sadique</h1><br>
                 ideas,or exploring potential collaborative projects, feel free to reach out.
             </marquee>
         </p><br><br>
-        <div class="buttons-container">
+        <div class="buttons-container" id="contact">
             <a href="mailto:[email protected]" class="button" target="_blank">
-                <img src="pictures/Email.png" width="20" height="15" alt="Email">
+                <img src="pictures/Email.png" width="15" height="13" alt="Email">
                 Send an email
             </a>
             <a href="https://www.linkedin.com/in/Mohammed-Sadique20" class="button" target="_blank">
-                <img src="pictures/LinkedIn.png" width="20" height="15" alt="LinkedIn">
+                <img src="pictures/LinkedIn.png" width="15" height="13" alt="LinkedIn">
                 LinkedIn
             </a>
             <a href="https://github.com/Sadique982" class="button" target="_blank">
-                <img src="pictures/Github.png" width="20" height="15" alt="Github">
+                <img src="pictures/Github.png" width="15" height="13" alt="Github">
                 Github
             </a>
         </div>
+
     </main>
     <br>
     <section>
-        <h6>Feautured-Project</h6>
+        <h5 id="projects">Feautured-Project</h5>
+        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+            <div>
+                <img src="pictures/Projects/Chinese Restaurant.webp" class="card-img-top">
+                <div class="card-text" id="project_detail">
+                    <div id="Project_name">David Chu's China Bistro</div>
+                    Chinese Restaurant website, A visually appealing  responsive website.
+                    <br><br>
+                    <span id="tech">
+                        HTML/CSS - JS - Bootstrap
+                    </span>
+                    <br><br>
+                    <a href="https://sadique982.github.io/Chinese-restaurant/" class="button" target="_blank">
+                        <img src="pictures/Vector.png"width="15" height="15"> Live demo
+                    </a>
+                    <a href="https://github.com/Sadique982/Chinese-restaurant" target="_blank" id="code">
+                        <img src="pictures/icons8-code-35.png">
+                    </a>
+                </div>
+            </div>
+            <div>
+                <img src="pictures/Projects/Chinese Restaurant.webp" class="card-img-top">
+                <div class="card-text" id="project_detail">
+                    <div id="Project_name">David Chu's China Bistro</div>
+                    Chinese Restaurant website, A visually appealing  responsive website.
+                    <br><br>
+                    <span id="tech">
+                        HTML/CSS - JS - Bootstrap
+                    </span>
+                    <br><br>
+                    <a href="https://sadique982.github.io/Chinese-restaurant/" class="button" target="_blank">
+                        <img src="pictures/Vector.png"width="15" height="15"> Live demo
+                    </a>
+                </div>
+            </div>
+            <div>
+                <img src="pictures/Projects/Chinese Restaurant.webp" class="card-img-top">
+                <div class="card-text" id="project_detail">
+                    <div id="Project_name">David Chu's China Bistro</div>
+                    Chinese Restaurant website, A visually appealing  responsive website.
+                    <br><br>
+                    <span id="tech">
+                        HTML/CSS - JS - Bootstrap
+                    </span>
+                    <br><br>
+                    <a href="https://sadique982.github.io/Chinese-restaurant/" class="button" target="_blank">
+                        <img src="pictures/Vector.png"width="15" height="15"> Live demo
+                    </a>
+                </div>
+            </div>
+            <div>
+                <img src="pictures/Projects/Chinese Restaurant.webp" class="card-img-top">
+                <div class="card-text" id="project_detail">
+                    <div id="Project_name">David Chu's China Bistro</div>
+                    Chinese Restaurant website, A visually appealing  responsive website.
+                    <br><br>
+                    <span id="tech">
+                        HTML/CSS - JS - Bootstrap
+                    </span>
+                    <br><br>
+                    <a href="https://sadique982.github.io/Chinese-restaurant/" class="button" target="_blank">
+                        <img src="pictures/Vector.png"width="15" height="15"> Live demo
+                    </a>
+                </div>
+            </div>
+        </div>
     </section>
-
+    <footer>
+        <div class="text-center">&copy; Copyright Mohammed-Sadique 2024</div>
+    </footer>
 </body>
 
-</html>
+</html>
diff --git a/pictures/Projects/Chinese Restaurant.webp b/pictures/Projects/Chinese Restaurant.webp
diff --git a/pictures/Projects/portfolio (2).webp b/pictures/Projects/portfolio (2).webp
diff --git a/pictures/Projects/portfolio.webp b/pictures/Projects/portfolio.webp
diff --git a/pictures/Vector.png b/pictures/Vector.png
diff --git a/pictures/icons8-code-20.png b/pictures/icons8-code-20.png
diff --git a/pictures/icons8-code-35.png b/pictures/icons8-code-35.png
diff --git a/pictures/icons8-code-48.png b/pictures/icons8-code-48.png