FirstChange

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\C:\\Users\\91970\\Source\\Repos\\Assignment_LookAndFeel",
+  "PreviewInSolutionExplorer": false
+}

css/main.css

@@ -2,46 +2,160 @@
 Sample css code
 */
 /* Set height to 100% for body and html to enable the background image to cover the whole page: */
-body,
-html {
-  height: 100%;
+body {
+    font-family: Arial;
+    margin: 0;
 }
 
-/*Set background image*/
-.container {
-  background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
-  height: 100%;
-  background-position: center;
-  background-size: cover;
+.slideshow-container {
+    max-width: 100%;
+    height: auto;
+    position: relative;
+    margin: auto;
 }
 
-/* Position text in the middle */
-.middle {
-  position: absolute;
-  color: beige;
-  top: 70%;
-  left: 39%;
-  text-align: center;
-  font-size: 25px;
+/* Hide the images by default */
+.mySlides {
+    display: none;
 }
 
-/*Set circle in unordered list*/
-.middle ul {
-  list-style-type: circle;
+/* Next & previous buttons */
+.prev, .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: black;
+    font-weight: bold;
+    font-size: 18px;
+    transition: 0.6s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
 }
 
-/*Set text inside li tag to left*/
-.middle ul li {
-  text-align: left !important;
+/* Position the "next button" to the right */
+.next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
 }
 
-/*Set text color for a tag inside middle class and ul>li element*/
-.middle ul li a {
-  color: beige;
+    /* On hover, add a black background color with a little bit see-through */
+    .prev:hover, .next:hover {
+        background-color: rgba(0,0,0,0.8);
+    }
+
+/* Caption text */
+.text {
+    color: #f2f2f2;
+    font-size: 60px;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+    cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    transition: background-color 0.6s ease;
+}
+
+    .active, .dot:hover {
+        background-color: #717171;
+    }
+
+/* Fading animation */
+.fade {
+    -webkit-animation-name: fade;
+    -webkit-animation-duration: 1.5s;
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@-webkit-keyframes fade {
+    from {
+        opacity: .4
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes fade {
+    from {
+        opacity: .4
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+.content {
+    padding: 20px;
 }
 
-/*Change text color and decoration for a tags inside middle class and ul>li element*/
-.middle ul li a:hover {
-  color: red;
-  text-decoration: none;
+
+
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #008080;
+    overflow: hidden;
 }
+
+    /* Style the links inside the navigation bar */
+    .topnav a {
+        float: left;
+        color: #FFFFFF;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+    }
+
+        /* Change the color of links on hover */
+        .topnav a:hover {
+            background-color: #00FFFF;
+            color: black;
+        }
+
+        /* Add a color to the active/current link */
+        .topnav a.active {
+            background-color: #4CAF50;
+            color: white;
+        }
+
+ /*additional styles */
+        h1, p {
+            color: white;  set text color 
+            margin-left: 10px;
+
+        }
+
+        h1 {
+           color: #4caf50;  custom heading color 
+        }
+
+        p {
+            text-align: justify;
+            padding: 10px;
+        }

index.html

@@ -1 +1,95 @@
-<!--Your HTML code here-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./css/main.css">
+    <title>Look and Feel</title>
+    <style>
+        body {
+            background-color: black;
+            font-family: Arial;
+        }
+
+        p {
+            color: white;
+            text-align: justify;
+            padding: 10px;
+            margin-left: 10px;
+        }
+
+        h1 {
+            color: #4CAF50;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="topnav">
+        <a class="active" href="index.html">Project</a>
+        <a href="table1.html">TABLE1</a>
+        <a href="table2.html">TABLE2</a>
+        <a href="table3.html">TABLE3</a>
+        <a href="team.html">ABOUT US</a>
+    </div>
+    <!-- Slideshow container -->
+    <!--<div class="slideshow-container">-->
+
+        <!-- Full-width images with number and caption text -->
+        <!--<div class="mySlides fade">
+            <div class="numbertext">1 / 3</div>
+            <img src="img_3.jpg" style="width:100%">
+            <div class="text">Cars Cars Cars!</div>
+        </div>
+
+        <div class="mySlides fade">
+            <div class="numbertext">2 / 3</div>
+            <img src="banner_pic_3.jpg" style="width:100%">
+        </div>
+
+        <div class="mySlides fade">
+            <div class="numbertext">3 / 3</div>
+            <img src="banner_pic.jpg" style="width:100%">
+        </div>-->
+
+        <!-- Next and previous buttons -->
+        <!--<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+        <a class="next" onclick="plusSlides(1)">&#10095;</a>
+    </div>
+    <br>-->
+
+    <!-- The dots/circles -->
+    <!--<div style="text-align:center">
+        <span class="dot" onclick="currentSlide(1)"></span>
+        <span class="dot" onclick="currentSlide(2)"></span>
+        <span class="dot" onclick="currentSlide(3)"></span>
+    </div>-->
+
+    <h1>Sample</h1>
+    <p>
+        XYZ
+    </p>
+    <p>
+        ABC
+    </p>
+
+
+    <h1>QWER</h1>
+    <p>
+        ZXCVB
+
+    </p>
+
+
+
+
+
+    <!--JS link-->
+    <!--<script src="./js/main.js"></script>-->
+</body>
+
+</html>

js/main.js

@@ -5,10 +5,37 @@
 /**
  * Sample code
  */
-document.addEventListener('DOMContentLoaded', function() {
-  var ulElement = document.getElementById('links');
-  var liElement = document.createElement('li');
-  liElement.appendChild(document.createTextNode('created by main.js'));
+document.addEventListener('DOMContentLoaded', function () {
+    var ulElement = document.getElementById('links');
+    var liElement = document.createElement('li');
+    liElement.appendChild(document.createTextNode('created by main.js'));
 
-  ulElement.appendChild(liElement);
+    ulElement.appendChild(liElement);
 });
+
+var slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+    showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+    showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+    var i;
+    var slides = document.getElementsByClassName("mySlides");
+    var dots = document.getElementsByClassName("dot");
+    if (n > slides.length) { slideIndex = 1 }
+    if (n < 1) { slideIndex = slides.length }
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+    }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+    }
+    slides[slideIndex - 1].style.display = "block";
+    dots[slideIndex - 1].className += " active";
+}