From efddc326048ae2fb790d28a94f5a6fcb5d32e1f4 Mon Sep 17 00:00:00 2001 From: tipra2614 Date: Sat, 13 Jan 2018 18:14:25 +0530 Subject: [PATCH 1/4] Added trailer option --- css/style.css | 31 +++++++++++++++++++++++++++++++ index.html | 18 +++++++++++++++++- js/popup.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 js/popup.js diff --git a/css/style.css b/css/style.css index 2799f61..c2ff7b8 100644 --- a/css/style.css +++ b/css/style.css @@ -288,6 +288,37 @@ header .card-underline{ animation: snow 20s linear infinite; opacity:0.5; } + +.videoHidden { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 100; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: none; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + + +.videoPopup { + background-color: #212121; + margin: 5% 10% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + @keyframes snow { from {background-position: 0px 0px, 0px 0px, 0px 0px;} to {background-position: 500px 1000px, 200px 400px, -100px 300px;} diff --git a/index.html b/index.html index 72aeb46..48a6878 100644 --- a/index.html +++ b/index.html @@ -101,6 +101,9 @@
  • Projects
    • +
  • + Trailer +
  • Stars @@ -113,6 +116,7 @@
    • + @@ -150,6 +154,18 @@

     OPENCODE

    +
    +
    +
    + + + + +
    +
    +
    + +
    @@ -507,5 +523,5 @@

    Mubaris NK

    - + diff --git a/js/popup.js b/js/popup.js new file mode 100644 index 0000000..27c5289 --- /dev/null +++ b/js/popup.js @@ -0,0 +1,43 @@ + +// Get the popupBody +var popupBody = document.getElementById('popupBody'); + +// Get the button that opens the popupBody +var trailer = document.getElementById("trailer"); + +// Get the element that closes the popupBody +var close = document.querySelector(".close"); + + +var iframe = document.querySelector("iframe"); + +// When the user clicks on the 'trailer', open the popupBody +trailer.onclick = function() { + iframe.setAttribute("src","https://www.youtube.com/embed/qjVYRDQAl2Q"); + popupBody.style.display = "block"; + +} + +// When the user clicks on any area other than the video, close the popupBody +close.addEventListener("click",function() + { + popupBody.style.display = "none"; + } + +); + + +// When the user clicks anywhere outside of the popupBody, close it +window.onclick = function(event) { + if (event.target == popupBody) { + iframe.setAttribute("src","#"); + popupBody.style.display = "none"; + } +} + +close.onclick = function(event) { + if (event.target == popupBody) { + iframe.setAttribute("src","#"); + popupBody.style.display = "none"; + } +} From 7c7b6b41e0758da8a7b14a334445d22ced9bc660 Mon Sep 17 00:00:00 2001 From: tipra2614 Date: Sun, 14 Jan 2018 14:41:52 +0530 Subject: [PATCH 2/4] Fixed moblie view issue --- css/style.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index eb8f3ee..53474c3 100644 --- a/css/style.css +++ b/css/style.css @@ -318,7 +318,8 @@ header .card-underline{ } #star,#fork { - + position: relative; + right: 5px; padding: 7px; outline: none; user-select: none; @@ -326,13 +327,10 @@ header .card-underline{ background-color: #D3AD7D; color: #14100C; } + .st,.fo { - position: relative; - top: 50%; - transform: translate(0%,-50%); - margin-left: 10px; - left: 60%; + padding-top: 5%; } #snow{ From e5e93bc54dbd3b386f9a1197248ec5c65a8b1ed8 Mon Sep 17 00:00:00 2001 From: tipra2614 Date: Sun, 14 Jan 2018 15:13:10 +0530 Subject: [PATCH 3/4] Added space between star and trailer --- css/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css/style.css b/css/style.css index 53474c3..3518e56 100644 --- a/css/style.css +++ b/css/style.css @@ -333,6 +333,12 @@ header .card-underline{ padding-top: 5%; } +.space +{ + padding-left: 10px; + padding-right: 10px; +} + #snow{ background-image: url(https://image.ibb.co/k0aqx6/snow.png), From a909861fd81010bd21f2ab056f86824e8c67b23e Mon Sep 17 00:00:00 2001 From: tipra2614 Date: Sun, 14 Jan 2018 15:13:41 +0530 Subject: [PATCH 4/4] Added space between star and trailer --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index a848c69..47ccbb6 100644 --- a/index.html +++ b/index.html @@ -104,6 +104,9 @@
  • Trailer
    • +
  • + +
  • Stars