diff --git a/.vs/Assignment_LookAndFeel/config/applicationhost.config b/.vs/Assignment_LookAndFeel/config/applicationhost.config new file mode 100644 index 000000000..f881ef0f8 --- /dev/null +++ b/.vs/Assignment_LookAndFeel/config/applicationhost.config @@ -0,0 +1,1024 @@ + + + + + + + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.vs/Assignment_LookAndFeel/v17/.wsuo b/.vs/Assignment_LookAndFeel/v17/.wsuo new file mode 100644 index 000000000..8df471f93 Binary files /dev/null and b/.vs/Assignment_LookAndFeel/v17/.wsuo differ diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 000000000..026dd7eb4 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,7 @@ +{ + "ExpandedNodes": [ + "" + ], + "SelectedNode": "\\C:\\Users\\91970\\Source\\Repos\\Assignment_LookAndFeel", + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 000000000..0f292e47c Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/css/main.css b/css/main.css index bcc90344f..b2a4c677d 100644 --- a/css/main.css +++ b/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; + } diff --git a/index.html b/index.html index fbae197cd..4321ca08e 100644 --- a/index.html +++ b/index.html @@ -1 +1,95 @@ - \ No newline at end of file + + + + + + + + + Look and Feel + + + + + + +
+ Project + TABLE1 + TABLE2 + TABLE3 + ABOUT US +
+ + + + + + + + + + + + +

Sample

+

+ XYZ +

+

+ ABC +

+ + +

QWER

+

+ ZXCVB + +

+ + + + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 848a3f230..a76d53645 100644 --- a/js/main.js +++ b/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"; +} \ No newline at end of file diff --git a/table1.html b/table1.html new file mode 100644 index 000000000..e69de29bb diff --git a/table2.html b/table2.html new file mode 100644 index 000000000..e69de29bb diff --git a/table3.html b/table3.html new file mode 100644 index 000000000..e69de29bb diff --git a/team.html b/team.html new file mode 100644 index 000000000..b73d0f578 --- /dev/null +++ b/team.html @@ -0,0 +1,146 @@ + + + + + + + + + + +
+ Project + TABLE1 + TABLE2 + TABLE3 + ABOUT US +
+ + +
+ +

About Project

+

ABC

+
+ +

PORTFOLIO

+ + +
+
+
+ +

Pavan

+

Worked on ....

+ Git +
+
+
+
+ +

Shyam

+

Worked on ......

+ Git +
+
+
+
+ +

Ajith

+

Worked on .....

+ Git +
+
+
+
+ +

Yashwanth

+

Worked on ......

+ Git +
+
+ + + + + + + +
+ + + \ No newline at end of file