Merge pull request #6 from JeelDobariya38/dev

Improved the design of home page
JeelDobariya38 · Sep 23, 2023 · abab8af · abab8af
2 parents e203084 + fbf48f3
commit abab8af
Show file tree

Hide file tree

Showing 12 changed files with 234 additions and 9 deletions.
diff --git a/Pages/clang/clang.html b/Pages/clang/clang.html
@@ -23,6 +23,11 @@
             <a href="../clang/clang.html">C-Lang</a>
         </div>
     </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For C-language is Coming Soon!!!!</h1>
+        </div>
+    </main>
 </body>
 <script src="../../Scripts/script.js"></script>
 <script src="../../Scripts/language.js"></script>

diff --git a/Pages/cpp/cpp.html b/Pages/cpp/cpp.html
@@ -23,6 +23,11 @@
             <a href="../clang/clang.html">C-Lang</a>
         </div>
     </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For C++ is Coming Soon!!!!</h1>
+        </div>
+    </main>
 </body>
 <script src="../../Scripts/script.js"></script>
 <script src="../../Scripts/language.js"></script>

diff --git a/Pages/css/css.html b/Pages/css/css.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Css | Coding Notes</title>
+    <link rel="stylesheet" href="../../Prism/prism.css">
+    <script src="../../Prism/prism.js"></script>
+    <link rel="stylesheet" href="../../Stylesheets/utils.css">
+    <link rel="stylesheet" href="../../Stylesheets/style.css">
+    <link rel="stylesheet" href="../../Stylesheets/language.css">
+    <link rel="stylesheet" href="../../Stylesheets/css.css">
+</head>
+<body>
+    <header class="header">
+        <div class="heading">
+            <a href="../../index.html"><h1>Coding Notes</h1></a>
+        </div>
+        <div class="navigation-bar">
+            <a href="../python/python.html">Python</a>
+            <a href="../java/java.html">Java</a>
+            <a href="../cpp/cpp.html">C++</a>
+            <a href="../clang/clang.html">C-Lang</a>
+        </div>
+    </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For Css is Coming Soon!!!!</h1>
+        </div>
+    </main>
+</body>
+<script src="../../Scripts/script.js"></script>
+<script src="../../Scripts/language.js"></script>
+</html>
diff --git a/Pages/html/html.html b/Pages/html/html.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Html | Coding Notes</title>
+    <link rel="stylesheet" href="../../Prism/prism.css">
+    <script src="../../Prism/prism.js"></script>
+    <link rel="stylesheet" href="../../Stylesheets/utils.css">
+    <link rel="stylesheet" href="../../Stylesheets/style.css">
+    <link rel="stylesheet" href="../../Stylesheets/language.css">
+    <link rel="stylesheet" href="../../Stylesheets/html.css">
+</head>
+<body>
+    <header class="header">
+        <div class="heading">
+            <a href="../../index.html"><h1>Coding Notes</h1></a>
+        </div>
+        <div class="navigation-bar">
+            <a href="../python/python.html">Python</a>
+            <a href="../java/java.html">Java</a>
+            <a href="../cpp/cpp.html">C++</a>
+            <a href="../clang/clang.html">C-Lang</a>
+        </div>
+    </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For Html is Coming Soon!!!!</h1>
+        </div>
+    </main>
+</body>
+<script src="../../Scripts/script.js"></script>
+<script src="../../Scripts/language.js"></script>
+</html>
diff --git a/Pages/java/java.html b/Pages/java/java.html
@@ -23,6 +23,11 @@
             <a href="../clang/clang.html">C-Lang</a>
         </div>
     </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For Java is Coming Soon!!!!</h1>
+        </div>
+    </main>
 </body>
 <script src="../../Scripts/script.js"></script>
 <script src="../../Scripts/language.js"></script>

diff --git a/Pages/python/python.html b/Pages/python/python.html
@@ -23,6 +23,11 @@
             <a href="../clang/clang.html">C-Lang</a>
         </div>
     </header>
+    <main>
+        <div class="coming-soon">
+            <h1>Support For Python is Coming Soon!!!!</h1>
+        </div>
+    </main>
 </body>
 <script src="../../Scripts/script.js"></script>
 <script src="../../Scripts/language.js"></script>

diff --git a/Stylesheets/css.css b/Stylesheets/css.css
diff --git a/Stylesheets/html.css b/Stylesheets/html.css
diff --git a/Stylesheets/index.css b/Stylesheets/index.css
@@ -0,0 +1,62 @@
+.hero-section {
+    margin: auto;
+    width: 90vw;
+    height: min(300px,90vh);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.hero-section  h1{
+    font-size: max(30px,5vw);
+    letter-spacing: -0.3vw;
+    word-spacing: -0.5vw;
+    text-shadow: 3px 3px var(--text-shadow-color);
+}
+
+.hero-section  p{
+    font-size: max(1vw,6px);
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.item {
+    width: max(400px,40vw);
+    height: 60vh;
+    margin: 10px;
+    border-radius: 30px;
+    padding: 10px;
+    background-color: var(--primary-color);
+    overflow: hidden;
+    transition-property: transform box-shadow background-color;
+    transition-duration: 0.4s;
+}
+
+.item:hover {
+    transform: translate(-10px,-5px);
+    box-shadow: 5px 10px var(--box-shadow-color);
+    background-color: var(--secondary-color);
+}
+
+.item h2{
+    text-align: center;
+    font-size: min(40px,max(4vw,28px));
+    color: var(--primary-text-color);
+}
+
+.item p{
+    text-align: left;
+    font-size: max(15px,2vw,20px);
+    color: var(--primary-text-color);
+}
+
+@media (max-width: 460px) {
+    .item {
+        width: max(200px,40vw);
+    }
+}
diff --git a/Stylesheets/style.css b/Stylesheets/style.css
@@ -12,6 +12,11 @@
 .heading h1 {
     font-size: 5vw;
     letter-spacing: -0.5vw;
+    transition: 0.2s color;
+}
+
+.heading h1:hover {
+    color: var(--primary-action-color);
 }
 
 .navigation-bar {
@@ -27,8 +32,9 @@
     letter-spacing: max(-100px,-0.2vw);
     width: 20%;
     text-align: center;
+    transition: 0.2s color;
 }
 
 .navigation-bar a:hover{
-    color: var(--secondary-text-color);
-}
+    color: var(--primary-action-color);
+}
diff --git a/Stylesheets/utils.css b/Stylesheets/utils.css
@@ -3,15 +3,36 @@
     margin: 0px;
 }
 
+body {
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
 :root {
     --primary-color: #81C3D7;
     --primary-text-color: #26547C;
-    --secondary-color: #EF476F;
+    --primary-action-color: #000000;
+    --secondary-color: #EF476F9F;
     --secondary-text-color: #B3FFB3;
     --side-color: #FFD166;
+    --text-shadow-color: #1111111F;
+    --box-shadow-color: #1111111F;
 }
 
 a {
     text-decoration: none;
     color: inherit;
-}
+}
+
+.coming-soon {
+    width: 80vw;
+    height: 80vh;
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+}
+
+.coming-soon h1 {
+    font-size: max(14px,min(60px,4vw));
+}
diff --git a/index.html b/index.html
@@ -20,14 +20,62 @@
             <a href="Pages/clang/clang.html">C-Lang</a>
         </div>
     </header>
-    <!-- <main>
+    <main>
         <div class="hero-section">
             <h1>Coding Notes</h1>
+            <p>What to prepare for placements, why not from coding notes?</p>
         </div>
         <div class="container">
-            
-        </div>
-    </main> -->
+            <a href="Pages/python/python.html">
+                <div class="item">
+                    <h2>Python</h2>
+                    <p>
+                        Python, created in the late 1980s, is a versatile and beginner-friendly language. It has a rich history and is used in a wide range of applications, from web development to scientific computing and machine learning. Python's readability and extensive libraries make it a popular choice for developers. Its drawbacks include slower performance for certain tasks and global interpreter lock (GIL) limitations. Python is often specialized for data analysis, artificial intelligence, and automation.
+                    </p>
+                </div>
+            </a>
+            <a href="Pages/cpp/cpp.html">
+                <div class="item">
+                    <h2>C++</h2>
+                    <p>
+                        C++, developed in the early 1980s, is a powerful language that combines C's low-level capabilities with object-oriented features. It is used extensively in game development, system programming, and applications where high performance and control over hardware are crucial. C++ offers strong type checking and templates for generic programming but can be complex for beginners. It is often specialized for game engines and performance-critical software.
+                    </p>
+                </div>
+            </a>
+            <a href="Pages/java/java.html">
+                <div class="item">
+                    <h2>Java</h2>
+                    <p>
+                        Java, introduced in the mid-1990s, is known for its "write once, run anywhere" mantra. It's widely used in building cross-platform applications, particularly in Android app development. Java's strengths include portability, automatic memory management, and a vast ecosystem. However, it can be verbose, and startup times can be slower compared to other languages. Java is specialized for Android development, enterprise applications, and large-scale systems.
+                    </p>
+                </div>
+            </a>
+            <a href="Pages/clang/clang.html">
+                <div class="item">
+                    <h2>C language</h2>
+                    <p>
+                        C, created in the early 1970s, is a fundamental and efficient language. It is widely used in systems programming, embedded systems, and applications where low-level control is necessary. C's advantages include portability and performance, but its simplicity can lead to errors. C is specialized for operating systems, firmware development, and software that requires direct hardware access.
+                    </p>
+                </div>
+            </a>
+            <a href="Pages/html/html.html">
+            <div class="item">
+                <h2>Html</h2>
+                <p>
+                    HTML, since its inception in the early 1990s, has been the backbone of the web. It defines the structure and content of web pages, allowing browsers to render them as intended. HTML's simplicity and compatibility make it essential for web development. Its limitations include a lack of interactivity without additional scripting languages like JavaScript. HTML is specialized for creating web pages and is foundational for front-end development.
+                </p>
+            </div>
+            </a>
+            <a href="Pages/css/css.html">
+                <div class="item">
+                    <h2>Css</h2>
+                    <p>
+                        CSS emerged in the late 1990s to complement HTML by controlling the visual layout and design of web pages. It enables developers to style web content, making it attractive and responsive across different devices. CSS's strengths include flexibility and separation of design from content. However, it can be challenging to master, and browser compatibility issues can arise. CSS is specialized for web design and user interface development.
+                    </p>
+                </div>
+            </a>
+           </div>
+    </main>
 </body>
 <script src="../../Scripts/script.js"></script>
-</html>
+</html>