From 345f67b2ba4cd62fa1f22f69c8dd6dad648585d3 Mon Sep 17 00:00:00 2001 From: 0r0ck3t Date: Tue, 16 Apr 2024 19:19:03 +0300 Subject: [PATCH] davidr --- Art/davidr/index.html | 25 +++++++++++ Art/davidr/style.css | 97 +++++++++++++++++++++++++++++++++++++++++++ include.js | 7 ++++ 3 files changed, 129 insertions(+) create mode 100644 Art/davidr/index.html create mode 100644 Art/davidr/style.css diff --git a/Art/davidr/index.html b/Art/davidr/index.html new file mode 100644 index 000000000..536679ca5 --- /dev/null +++ b/Art/davidr/index.html @@ -0,0 +1,25 @@ + + + + + + Grid Master + + + +
🦊
+
🐰
+
🐸
+
🦁
+
🐯
+
🐭
+
🦄
+
🐲
+
🐷
+
🐺
+
🐼
+
🐻
+ + \ No newline at end of file diff --git a/Art/davidr/style.css b/Art/davidr/style.css new file mode 100644 index 000000000..b056e40d9 --- /dev/null +++ b/Art/davidr/style.css @@ -0,0 +1,97 @@ +.zone { + cursor:pointer; + display:inline-block; + text-align: center; + font-size:10em; + border-radius:4px; + border:1px solid #bbb; + transition: all 0.3s linear; +} + +.zone:hover { + -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; +} + + +/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/ +/*********************************************************************** + * Green Background + **********************************************************************/ +.green{ + background: #56B870; /* Old browsers */ + background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */ + background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */ +} + +/*********************************************************************** + * Red Background + **********************************************************************/ +.red{ + background: #C655BE; /* Old browsers */ + background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */ + background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */ +} + +/*********************************************************************** + * Yellow Background + **********************************************************************/ +.yellow{ + background: #F3AAAA; /* Old browsers */ + background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */ + background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */ +} + +/*********************************************************************** + * Blue Background + **********************************************************************/ +.blue{ + background: #7abcff; /* Old browsers */ + background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ + background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ +} + +/*********************************************************************** + * Purple Background + **********************************************************************/ +.purple { + background: #A88BEB; /* Old browsers */ + background: -moz-linear-gradient(top, #A88BEB 0%, #F1A7F1 44%, #F8CEEC 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A88BEB), color-stop(44%,#F1A7F1), color-stop(100%,#F8CEEC)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* IE10+ */ + background: linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* W3C */ +} + +/*********************************************************************** + * Brown Background + **********************************************************************/ +.brown { + background: #f6e6b4; /* Old browsers */ + background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */ + background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */ +} diff --git a/include.js b/include.js index 5fec8e863..e774c790a 100644 --- a/include.js +++ b/include.js @@ -1,4 +1,11 @@ let cards = [ + { + artName: 'No Animation', + pageLink: './Art/davidr/index.html', + imageLink: './Art/vikasverma67/Animation1/lets play ball.gif', + author: 'davodr', + githubLink: 'https://github.com/0r0ck3t' + }, { artName: 'Balls Animation', pageLink: './Art/vikasverma67/Animation1/index.html',