diff --git a/README.md b/README.md index 7ed589e..f5acf68 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,15 @@ # AD - SBA - HTML/CSS/JavaScript +### Delivearble +* I added 3 pages, each using their own HTMl, CSS, and Javascript. + +* The website has a "game" for the user to play and an area to enter their email as well as enter their own scores as a guest. + +* It also explains upon creating games in javascript, as well as my experience creating this website. + +* Website link: https://davidkburchett.github.io/sba.javascript_3-page-website/ + ### Description * In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c741881 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-slate \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..22e9d1c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,77 @@ -body { - background-color: navy; +.page-header { + background-color: black; + text-align: center; } +h1{ + font-family: cursive; +} + +p{ + font-family: monospace; + line-height: 1.7; +} + +table, th, td { + border: 2px solid black; +} + +#dropDown{} +#instructionsP{} +#gif{} +#scoreTable{} + + +/* animations */ +#ball{ + height: 25px; + width: 25px; + background-color: red; + border-radius: 50%; + display: inline-block; + animation-name: ball; + animation-iteration-count: infinite; + animation-duration: 5s; + animation-direction: alternate; +} + +@keyframes ball { + 0%{ + -webkit-transform: translate(0%, 0%); + } + + 50%{ + -webkit-transform: translate(1800%, 1650%); + } + + 100%{ + -webkit-transform: translate(3700%, 10%); + } +} -object { - height: 100vh; - width: 100vh; +#bar{ + height: 25px; + width: 100px; + background-color: white; + display: inline-block; + position: relative; + top: 45vh; + animation-name: bar; + animation-iteration-count: infinite; + animation-duration: 5s; + animation-direction: alternate; } + +@keyframes bar { + 0%{ + -webkit-transform: translate(0, 0); + } + + 50%{ + -webkit-transform: translate(370%, 0); + } + + 100%{ + -webkit-transform: translate(800%, 0); + } +} \ No newline at end of file diff --git a/game.html b/game.html new file mode 100644 index 0000000..edc6498 --- /dev/null +++ b/game.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + The Game! + + + + + + + + + + + + + + + + +
+ + +
+ + + + +
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
+ + + + + + + + + + + + + +
NameScore
Kyle100
Leon1000000
+ + + Add Score! (will prompt twice) +
+ + + +
+ +
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/20 by 20 orthogonal maze.png b/img/20 by 20 orthogonal maze.png new file mode 100644 index 0000000..970aa82 Binary files /dev/null and b/img/20 by 20 orthogonal maze.png differ diff --git a/img/Atari-Breakout.gif b/img/Atari-Breakout.gif new file mode 100644 index 0000000..749f2fa Binary files /dev/null and b/img/Atari-Breakout.gif differ diff --git a/img/Pong.gif b/img/Pong.gif new file mode 100644 index 0000000..52d7066 Binary files /dev/null and b/img/Pong.gif differ diff --git a/img/platonic-icosahedron.gif b/img/platonic-icosahedron.gif deleted file mode 100644 index 10e55a9..0000000 Binary files a/img/platonic-icosahedron.gif and /dev/null differ diff --git a/img/platonic-octahedron.gif b/img/platonic-octahedron.gif deleted file mode 100644 index fa934ec..0000000 Binary files a/img/platonic-octahedron.gif and /dev/null differ diff --git a/img/platonic-pyramid.gif b/img/platonic-pyramid.gif deleted file mode 100644 index ca1d412..0000000 Binary files a/img/platonic-pyramid.gif and /dev/null differ diff --git a/index.html b/index.html index 4dc0c72..8c3a37a 100644 --- a/index.html +++ b/index.html @@ -4,42 +4,79 @@ + - - - - - - - - - - - - - - + + + + + + Website Overview + - - - - The quickest of brown foxes. - - + + + + + + +
+
+
+

+ Hello! thank you for looking at my simple site, that I have assembled. I originally inttended to have a fully functional game similar to Atari breakout or Pong present, + but after considerable trial and error, I found that out of my skill range. I believe I would be cabale if I had more time and did some more research into Javascript. + Instead I will present the website as if the game was present, but it will be simply be replaced with an animation I created in CSS. This was fun to assemble, + and a learning experience for sure. So have fun looking around! +

+ +

+ In my time looking at classic games commonly ported into the Javascript language, I found a few Maze games, this is my reasoning for the image on the right. + I feel that I could make this site as a tribute to creating games for practice, and how it may not be the main function of this language but thing is possible if you work hard at it. + I want that mindset to define my career, so leaving this here as a symbol to hardwork is significant to me, even though I struggled to implement, I won't abandon my idea simply + because it was too hard. +

+ +

+ Please go to Game Overview first! +

+
+
+ +
+
+ + + + +
+
+
+ +
+
+
+
+ +
+
+