diff --git a/index.html b/index.html new file mode 100644 index 0000000..023c71d --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + + Document + + + +
+
+ Singtel + 10:00 + battery + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..3c8dfe0 --- /dev/null +++ b/style.css @@ -0,0 +1,104 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap'); + +*{ + font-family: "Quicksand"; + color: white; + box-sizing: border-box; +} + +body { + background-image: url("Wallpaper/Default.jpg") ; + background-size: stretch; + background-repeat: no-repeat; + +} +.container{ + margin: 0 auto; +} + +.icon { + width: 48px; + margin: 12px; + border-radius: 20%; +} + +.icons { + width: 100% + padding: 10px; + text-align: center; + +} + +.header{ + margin-bottom: 40px; + display: flex; + justify-content: space-between; +} +.scroll{ + + display:flex; + justify-content: center; + +} +.dot { + height: 5px; + width: 5px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + margin: 3px; + } + +.dockicon{ + width: 48px; + border-radius: 20%; +} + +.dock { + + display: flex; + justify-content: space-around; + padding: 15px; + margin-left: 0; + background: rgba(187, 187, 187, 0.3); + position: fixed; + bottom: 0px; + width: 100%; + +} + +footer{ + margin-top: 40px; +} + +@media only screen and ( min-width: 320px) and (max-width: 413px){ +.icon { + width: 48px; +} +.dockicon { + width: 48px; +} +} + +@media only screen and ( min-width: 414px) and (max-width: 767px){ + .icon { + width: 60px; + margin: 15px + } + .dockicon { + width: 60px; + } + } + + @media only screen and ( min-width: 768px){ + .icon { + width: 100px; + margin: 30px; + } + .dockicon { + width: 100px; + + } + + + } \ No newline at end of file