From 164bc707b5012fdf036514beac79b9a2a6619f29 Mon Sep 17 00:00:00 2001 From: Vijay Chauhan Date: Tue, 20 Oct 2020 18:48:28 +0530 Subject: [PATCH 1/2] add smooth scroll bar mobile for categories and add changes some data and images --- styles.css => assets/css/styles.css | 48 +++- apps.svg => assets/img/apps.svg | 0 bell.svg => assets/img/bell.svg | 0 assets/img/favicon.ico | Bin 0 -> 1150 bytes logo.png => assets/img/logo.png | Bin magnify.svg => assets/img/magnify.svg | 0 video-plus.svg => assets/img/video-plus.svg | 0 index.html | 236 +++++++++++--------- 8 files changed, 172 insertions(+), 112 deletions(-) rename styles.css => assets/css/styles.css (77%) rename apps.svg => assets/img/apps.svg (100%) rename bell.svg => assets/img/bell.svg (100%) create mode 100644 assets/img/favicon.ico rename logo.png => assets/img/logo.png (100%) rename magnify.svg => assets/img/magnify.svg (100%) rename video-plus.svg => assets/img/video-plus.svg (100%) diff --git a/styles.css b/assets/css/styles.css similarity index 77% rename from styles.css rename to assets/css/styles.css index 39b0c37..67ac9aa 100644 --- a/styles.css +++ b/assets/css/styles.css @@ -122,9 +122,15 @@ body { .category-section { display: flex; - overflow: hidden; + /*overflow: hidden;*/ + overflow-x: scroll; /* For Horizontal Scroll Bar*/ + scroll-behavior: smooth; /* For Smooth Scroll Bar*/ } +.category-section::-webkit-scrollbar { + display: none; /*Hide Scroll Bar From Layout for Categories*/ + } + .category { margin-right: 1rem; word-wrap: none; @@ -206,4 +212,44 @@ body { width: 36px; height: 36px; background-color: #AAA; +} + + +.tooltip { + display: inline; + position: relative; +} + +.tooltip:hover { + color: #c00; + text-decoration: none; +} + +.tooltip:hover:after { + background: #111; + background: rgba(0, 0, 0, .8); + border-radius: .5em; + bottom: 1.35em; + color: #fff; + content: attr(title); + display: block; + left: 1em; + padding: .3em 1em; + position: absolute; + text-shadow: 0 1px 0 #000; + white-space: nowrap; + z-index: 98; +} + +.tooltip:hover:before { + border: solid; + border-color: #111 transparent; + border-color: rgba(0, 0, 0, .8) transparent; + border-width: .4em .4em 0 .4em; + bottom: 1em; + content: ""; + display: block; + left: 2em; + position: absolute; + z-index: 99; } \ No newline at end of file diff --git a/apps.svg b/assets/img/apps.svg similarity index 100% rename from apps.svg rename to assets/img/apps.svg diff --git a/bell.svg b/assets/img/bell.svg similarity index 100% rename from bell.svg rename to assets/img/bell.svg diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f4d966476fe7f5e38deea428fb54ea2bb253c99c GIT binary patch literal 1150 zcmd5)u@S;B4E!8)G(HMymz0d)5i){HN=EQV8Ns7u6Y)x-J9B4;1PXBOtwhpGZ#h86 z$2oBKxF3NFfGa^4J+q$%VC;OFF@19rk-q?yP_Bdp5870L#a*eJd6AHvh+2c3+fH8D zN4b5A@2IjBTl}g!wQ|N$r0-X2D7VSy`KFb#i1*bxoA|@<8DI5>Q0;4T(f-Z(wdPXz yBj3NeKMn}2p><5tRvVRTAm0&TL87g};xGTN)%cC2Ql2;;fYjmb(j3jTX*~g$3rXVu literal 0 HcmV?d00001 diff --git a/logo.png b/assets/img/logo.png similarity index 100% rename from logo.png rename to assets/img/logo.png diff --git a/magnify.svg b/assets/img/magnify.svg similarity index 100% rename from magnify.svg rename to assets/img/magnify.svg diff --git a/video-plus.svg b/assets/img/video-plus.svg similarity index 100% rename from video-plus.svg rename to assets/img/video-plus.svg diff --git a/index.html b/index.html index 38121b6..719db4b 100644 --- a/index.html +++ b/index.html @@ -1,66 +1,79 @@ + - + + - Document + Youtube Clone +
- +
- - Upload Video + + Upload Video - - Apps + + Apps - - Notifications + + Notifications - Your Channel + Your Channel
- - - - - - - - - + + + + + + + + + + + + + + + + + + +
- - + +
- + -
- Video Title - Channel Name +
+ New Layouts + Designing Ideas
12K views • @@ -171,16 +184,16 @@

+ \ No newline at end of file From 85c5ef9de6b9b567f549e4eb5d7a8e3f691264fb Mon Sep 17 00:00:00 2001 From: Vijay Chauhan Date: Tue, 20 Oct 2020 19:03:08 +0530 Subject: [PATCH 2/2] final changes done --- assets/css/styles.css | 40 ---------------------------------------- 1 file changed, 40 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 67ac9aa..32bb062 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -213,43 +213,3 @@ body { height: 36px; background-color: #AAA; } - - -.tooltip { - display: inline; - position: relative; -} - -.tooltip:hover { - color: #c00; - text-decoration: none; -} - -.tooltip:hover:after { - background: #111; - background: rgba(0, 0, 0, .8); - border-radius: .5em; - bottom: 1.35em; - color: #fff; - content: attr(title); - display: block; - left: 1em; - padding: .3em 1em; - position: absolute; - text-shadow: 0 1px 0 #000; - white-space: nowrap; - z-index: 98; -} - -.tooltip:hover:before { - border: solid; - border-color: #111 transparent; - border-color: rgba(0, 0, 0, .8) transparent; - border-width: .4em .4em 0 .4em; - bottom: 1em; - content: ""; - display: block; - left: 2em; - position: absolute; - z-index: 99; -} \ No newline at end of file