├── Index.html ├── LICENSE ├── README.md ├── assets ├── Night_3.png ├── Night_4.png ├── Night_5.png ├── Night_6.png └── roadside-motel-with-car-parking-oil-station-coffee-burger-cafe-glowing-night.zip └── public ├── Style.css └── main.js /Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hotels 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 30 | 31 | 32 |
33 | 34 | 35 |
36 | 37 |
38 | shop 39 |
40 | 41 |

42 | 20 43 | 35 44 | 02 45 |

46 | 47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 2-Clause License 2 | 3 | Copyright (c) 2019, Akshay Kashyap 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | 2. Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interactive_Design 2 | In this video, we gonna learn how to create interactive web design using simple html and css 3 | 4 | Just open Index.html file to open the interactive project. 5 | -------------------------------------------------------------------------------- /assets/Night_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/Interactive_Design/3251f409d755b0ec85e1058cea4894e07fb30c51/assets/Night_3.png -------------------------------------------------------------------------------- /assets/Night_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/Interactive_Design/3251f409d755b0ec85e1058cea4894e07fb30c51/assets/Night_4.png -------------------------------------------------------------------------------- /assets/Night_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/Interactive_Design/3251f409d755b0ec85e1058cea4894e07fb30c51/assets/Night_5.png -------------------------------------------------------------------------------- /assets/Night_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/Interactive_Design/3251f409d755b0ec85e1058cea4894e07fb30c51/assets/Night_6.png -------------------------------------------------------------------------------- /assets/roadside-motel-with-car-parking-oil-station-coffee-burger-cafe-glowing-night.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/Interactive_Design/3251f409d755b0ec85e1058cea4894e07fb30c51/assets/roadside-motel-with-car-parking-oil-station-coffee-burger-cafe-glowing-night.zip -------------------------------------------------------------------------------- /public/Style.css: -------------------------------------------------------------------------------- 1 | /* import fonts from googleapis */ 2 | @import url('https://fonts.googleapis.com/css?family=Rubik|Titillium+Web&display=swap'); 3 | 4 | html, body{ 5 | margin: 0; 6 | background: linear-gradient(to right, #0f0c29, #302b63, #24243e); 7 | } 8 | 9 | :root{ 10 | --primary-gradient : linear-gradient(to bottom, #ffffff, #adadaa); 11 | --label-gradient: linear-gradient(to bottom, #536452 0%, #57dd52 40%, #95e669 100%); 12 | } 13 | 14 | .container{ 15 | background: #282c34; 16 | background: url('../assets/Night_3.png'); 17 | background-size: cover; 18 | background-repeat: no-repeat; 19 | width: 92vw; 20 | height: 89vh; 21 | font-size: calc(10px + 2vmin); 22 | color: white; 23 | margin: auto; 24 | margin-top: 4rem; 25 | text-align: center; 26 | } 27 | 28 | /* Navigation */ 29 | .navbar{ 30 | display: grid; 31 | grid-template-columns: 10% 90%; 32 | margin-top: 1.5rem; 33 | margin-left: 1.5rem; 34 | font-family: 'Rubik', sans-serif; 35 | } 36 | 37 | .navbar .nav-items{ 38 | text-align: right; 39 | } 40 | 41 | .navbar .navbar-brand h5{ 42 | padding: .4rem 2rem; 43 | margin: 0; 44 | } 45 | 46 | .nav-items .navbar-nav{ 47 | list-style-type: none; 48 | } 49 | 50 | .navbar-nav .nav-link{ 51 | display: inline-block; 52 | font-size: 1rem; 53 | margin: 0 .9rem; 54 | } 55 | 56 | .navbar-nav .sign-in{ 57 | border: none; 58 | padding: .4rem 2rem; 59 | border-radius: 1rem; 60 | margin-right: 2rem; 61 | background: #ee5; 62 | font-family: 'Rubik', sans-serif; 63 | } 64 | 65 | /* Styling Checkbox */ 66 | 67 | .lightswitch{ 68 | width: 40px; 69 | height: 7px; 70 | background: rgb(192, 188, 188); 71 | margin: 20px auto; 72 | border-radius: 100px; 73 | position: relative; 74 | } 75 | 76 | .lightswitch label{ 77 | display: block; 78 | width: 19px; 79 | height: 19px; 80 | background: #0f0c29; 81 | background: var(--label-gradient); 82 | border-radius: 50px; 83 | position: absolute; 84 | top: -6px; 85 | left: -1px; 86 | box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); 87 | transition: all .5s ease; 88 | } 89 | 90 | .lightswitch input[type="checkbox"]{ 91 | position: absolute; 92 | left: -8px; 93 | top: -6px; 94 | width: 50px; 95 | opacity: 0; 96 | } 97 | 98 | .lightswitch input[type="checkbox"]:checked + label{ 99 | left: 25px; 100 | background: tomato; 101 | } 102 | 103 | /* Shops */ 104 | 105 | .imglayer{ 106 | position: absolute; 107 | top: 50%; 108 | left: 22%; 109 | } 110 | 111 | .imglayer img{ 112 | width: 59vw; 113 | } 114 | 115 | .container h4{ 116 | font-size: 11rem; 117 | margin: 0 .4rem; 118 | padding: 0 1rem; 119 | margin-top: 2rem; 120 | font-family: 'Titillium Web', sans-serif; 121 | background: var(--primary-gradient); 122 | background-clip: text; 123 | -webkit-background-clip: text; 124 | -webkit-text-fill-color: transparent; 125 | } -------------------------------------------------------------------------------- /public/main.js: -------------------------------------------------------------------------------- 1 | 2 | (() => { 3 | 4 | const hours = Selector(".hours"); 5 | const minutes = Selector('.minutes'); 6 | const seconds = Selector('.seconds'); 7 | 8 | const checkbox = document.getElementById('switch'); 9 | const img = document.getElementById("shops"); 10 | 11 | // setInterval method 12 | setInterval(() => { 13 | const time = new Date(); 14 | hours.textContent = time.getHours() < 10 ? `0${time.getHours()}` : time.getHours(); 15 | minutes.textContent = time.getMinutes() < 10 ? `0${time.getMinutes()}` : time.getMinutes(); 16 | seconds.textContent = time.getSeconds() < 10 ? `0${time.getSeconds()}` : time.getSeconds(); 17 | }, 1000); 18 | 19 | // checkbox lights 20 | checkbox.onchange = (event) => { 21 | if (event.target.checked) { 22 | img.src = "../assets/Night_5.png"; 23 | } else { 24 | img.src = "../assets/Night_4.png"; 25 | } 26 | } 27 | 28 | })(); 29 | 30 | function Selector(element) { 31 | return document.querySelector(element); 32 | } --------------------------------------------------------------------------------