30DaysofWebDEV · code08-ind · Dec 25, 2020 · Dec 26, 2020 · Dec 31, 2020 · Jan 2, 2021
diff --git a/Final_Project_6/public/404.html b/Final_Project_6/public/404.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>
diff --git a/Final_Project_6/public/RGBGame.png b/Final_Project_6/public/RGBGame.png
diff --git a/Final_Project_6/public/RollingThunder.png b/Final_Project_6/public/RollingThunder.png
diff --git a/Final_Project_6/public/RosaItalio.png b/Final_Project_6/public/RosaItalio.png
diff --git a/Final_Project_6/public/blog1.css b/Final_Project_6/public/blog1.css
@@ -0,0 +1,113 @@
+body {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background: #dee5ff; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #e2e2e2,
+    #dee5ff
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #e2e2e2,
+    #dee5ff
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  overflow-x: hidden;
+}
+
+nav.navbar {
+  border-bottom: 4px solid rgb(155, 155, 255);
+}
+
+nav.navbar a.navbar-brand {
+  font-weight: 700;
+  font-family: "Times New Roman", Times, serif;
+}
+
+h1 {
+  margin-top: 80px;
+  font-size: 2.6em;
+  font-weight: 800;
+  font-family: "Times New Roman", Times, serifs;
+  animation: 1s ease-out 0s 1 slideInFromLeft;
+}
+
+h3 {
+  margin: 10px 140px;
+  font-size: 1.5em;
+  font-weight: 500;
+  text-align: center;
+  text-transform: capitalize;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  color: rgb(102, 102, 102);
+  animation: 1s ease-out 0s 1 slideInFromRight;
+}
+
+h5 {
+  font-weight: 400;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  text-transform: uppercase;
+  animation: 1s ease-out 0s 1 slideInFromLeft;
+}
+
+div.container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+div.container img#one {
+  animation: 1s ease-out 0s 1 slideInFromBottom;
+}
+
+div.container img {
+  width: 60%;
+  height: 50%;
+  margin: 10px 0;
+}
+
+div.container p {
+  margin: 10px 100px;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-size: 1.2em;
+  text-transform: capitalize;
+}
+
+@media (min-width: 320px) and (max-width: 420px) {
+  h1 {
+    margin-top: 120px;
+  }
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
diff --git a/Final_Project_6/public/blog1.html b/Final_Project_6/public/blog1.html
@@ -0,0 +1,159 @@
+<!Doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+    <title>Blog 1</title>
+    <link rel="stylesheet" type="text/css" href="blog1.css">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <link rel="icon" href="https://www.designinggeeks.com/wp-content/uploads/2018/03/web-design-1024x1024.png"
+        type="image/x-icon">
+
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="blog1.html">Perfect Combination Of CSS And JAVASCRIPT</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" aria-current="page" href="index.html">Portfolio Website</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="blog1.html">Blog 1</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="blog2.html">Blog 2</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="blog3.html">Blog 3</a>
+                    </li>
+            </div>
+        </div>
+    </nav>
+
+    </nav>
+    <div class="container">
+        <h1>Perfect Combination Of CSS And JAVASCRIPT</h1>
+        <h3>Here We Are Going To Cover The Path That Will Make You Ride In The Combination Of CSS And JAVASCRIPT In
+            FRONT
+            END WEB DEVELOPMENT World</h3>
+        <h5>Created By Aryan Garg</h5>
+        <img id="one"
+            src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
+            alt="Web Development">
+        <p data-aos="fade-left">Hi Readers. Today anyone can learn anything whether it is a new technical thing that is
+            trending or any other
+            technical stuff that could be a Programming Language. Basically we are going to see the use of JAVASCRIPT.
+            Here
+            You will see the blog on perfect combination of Cascading Style Sheets(CSS) along with the taste the
+            JAVASCRIPT
+            provides at the Frontend And Backend Both in web development. Here I will focus mainly at the Frontend part
+            consisting of Vanilla JAVASCRIPT along with the use of Cascading Style Sheets(CSS) which designs the website
+            in
+            a very comprehensive way. We will also take look at various animations and transition that are playing big
+            role
+            in the UI/UX (User Interface/User Experience) improvement. At the you all can find the necessary resources
+            required for comprehensive and stylish Front End Web Development.
+        </p>
+        <p data-aos="fade-up-right">Web Development Is one of the rising passions in this technical world. In every
+            passionate web development
+            learner, the ultimate goal is to design a webpage or a webpage with a lot of designs and functionalities.
+            This seems very superior to think inside our mind, but the question arises “How to design a website with
+            full of
+            interaction ?”
+            Every website or a webpage we see on a web browser is consisting of a lot of instructions and steps involved
+            in
+            making of that website and designing of that webpage which has been created by the use of various components
+            which includes the use of libraries and framework code. In order to make a website, thinking the design of
+            the
+            page or how the page looks is really important as it will help us to reference about the how we have to
+            design
+            the webpage. It could be done with the help of Wireframes. They consist of various components hat are to be
+            situated inside a webpage.
+        </p>
+        <img data-aos="flip-left"
+            src="https://images.unsplash.com/photo-1593720213428-28a5b9e94613?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
+            alt="HTML">
+        <p data-aos="zoom-in-up">HTML basically provides the basic structure about the webpage or the website that is
+            visible to a client or
+            the
+            user that is using that website for a particular use.
+            Here you can see the presence of the presence of the basic HTML document which we will focus later on to the
+            application of CSS and further the application of the JAVASCRIPT which will make it one of the great web
+            document with a lot of animations and presence of good interaction with the components of the web document
+            with
+            absolute stunning UI of the webpage.
+        </p>
+        <p data-aos="zoom-out-down">CSS provides the basic structure of the styling to the webpage or the website that
+            has been formed with he
+            use
+            HTML and makes to look the website look very user interactive in design and improves the user interface a
+            lot.
+            Now our task includes to design the webpage that we have included in it and then to add the styles to the
+            UI/UX
+            by using the CSS . We are here going to separately add the external CSS File which will include all of the
+            styles of the CSS. Here in the CSS we will take all of the different components and then take each component
+            for
+            taking down the styles individually for that particular component and then take each of the component and
+            then
+            add styles to that webpage. CSS adds a lot of styling to a common and simple looking webpage and design it
+            to
+            look really impressive in scene and make it look really awesome.
+        </p>
+        <img data-aos="flip-right"
+            src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
+            alt="Web Design">
+        <p data-aos="zoom-out-left">JAVASCRIPT provides the life to the website or the webpage by making interactive in
+            nature by making it user
+            interactive in which the user could do calculations in it, interact with the buttons or the components of
+            the
+            website. After it’s release in back 1995 it has been one of the most powerful component of web development
+            which
+            has created a big revolution in this modern field.
+            Now you all will see the nice interaction with the web documents by use of DOM. DOM refers to Document
+            Object
+            Model. All the elements we are talking about are the parts and various other components that can be referred
+            as
+            the HTML parent elements or he HTML child elements. As JAVASCRIPT is a scripting language and that all helps
+            us
+            to use the logic behind the scene in the client side webpage. UI/UX can also be changed in the Vanilla
+            JAVASCRIPT. JAVASCRIPT changed the whole world as now we can code in JAVASCRIPT to make our Backend vey
+            feasible
+            and that helps a user to learn single programming language and apply that particular knowledge for making
+            the
+            website and resulting in the comprehensive design of the webpage.
+        </p>
+    </div>
+    <!-- Optional JavaScript; choose one of the two! -->
+
+    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+        crossorigin="anonymous"></script>
+
+    <!-- Option 2: Separate Popper and Bootstrap JS -->
+    <!--
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
+    -->
+</body>
+<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+<script>
+    AOS.init();
+</script>
+
+</html>