From 45ac47cf406c08a65815a1795e3f1c431a1978a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kawczy=C5=84ski?= Date: Wed, 6 Dec 2017 11:57:37 +0100 Subject: [PATCH] Add new files to first Sprint --- css/style.css | 295 +++++++++++++++++++++++++++++++++++++++++++++++ fonts/ARCADE.TTF | Bin 0 -> 27700 bytes index.html | 61 ++++++++++ js/script.js | 0 4 files changed, 356 insertions(+) create mode 100644 css/style.css create mode 100644 fonts/ARCADE.TTF create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4406a13 --- /dev/null +++ b/css/style.css @@ -0,0 +1,295 @@ +@font-face { + font-family: headersFont; + src: url(fonts/ARCADE.TTF); +} + +h1 { + font-family: headersFont; + font-size: 100px; + color: yellow; + display: flex; + align-items: center; + justify-content: center; +} + +html { + background-color: cornflowerblue; +} + +#char-container { + position: absolute; + top: 300px; + left: 400px; +} + +#char-head { + width: 400px; + height: 300px; + background-color: #ffc993; + border-radius: 50px 50px; + z-index: 1; +} + +#char-ear-left { + position: absolute; + top: 124px; + left: -22px; + width: 42px; + height: 66px; + border-color: #ffc993; + border-radius: 33px / 42px; + background-color: #ffc993; + z-index: 0; +} + +#char-ear-right { + position: absolute; + top: 124px; + left: 380px; + width: 42px; + height: 66px; + border-color: #ffc993; + border-radius: 33px / 42px; + background-color: #ffc993; + z-index: 0; +} + +#char-hair { + width: 400px; + height: 90px; + background-color: #000000; + border-radius: 45px 45px; +} + +#char-eyebrown-left { + position: absolute; + top: 150px; + left: 90px; + border-style: solid; + border-width: 20px 0 0 50px; + border-color: transparent transparent transparent #ca815e; +} + +#char-eyebrown-right { + position: absolute; + top: 150px; + left: 270px; + border-style: solid; + border-width: 0 0 20px 50px; + border-color: transparent transparent #ca815e transparent; +} + +#char-eye-left { + position: absolute; + top: 176px; + left: 108px; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: #000000; +} + +#char-pupil-left { + position: absolute; + top: 8px; + left: 8px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #ffffff; +} + +#char-eye-right { + position: absolute; + top: 176px; + left: 264px; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: #000000; +} + +#char-pupil-right { + position: absolute; + top: 8px; + left: 8px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #ffffff; +} + +#char-mouth { + position: absolute; + top: 228px; + left: 164px; + width: 80px; + height: 30px; + border-radius: 0 0 80px 80px; + background-color: #000000; +} + +#char-tooth-left { + position: absolute; + top: 0px; + left: 24px; + width: 12px; + height: 14px; + background-color: #ffffff; +} + +#char-tooth-right { + position: absolute; + top: 0px; + left: 44px; + width: 12px; + height: 14px; + background-color: #ffffff; +} + +#char-main-body { + position: absolute; + width: 400px; + height: 400px; +} + +#char-body { + position: absolute; + top: 0px; + left: 110px; + width: 180px; + height: 200px; + border-radius: 20px; + background-color: #632e90; +} + +#char-arm-left { + position: absolute; + top: 40px; + left: 70px; + width: 50px; + height: 124px; + border-radius: 53px 53px; + background-color: #632e90; + transform: rotate(310deg); + z-index: 1; +} + +#char-arm-right { + position: absolute; + top: 40px; + left: 280px; + width: 50px; + height: 124px; + border-radius: 53px 53px; + background-color: #632e90; + transform: rotate(50deg); +} + +#char-forearm-left { + position: absolute; + top: -40px; + width: 50px; + height: 90px; + border-radius: 53px 53px; + background-color: #ffc993; +} + +#char-forearm-right { + position: absolute; + top: -40px; + width: 50px; + height: 90px; + border-radius: 53px 53px; + background-color: #ffc993; +} + +#char-lower { + position: absolute; +} + +#char-pants-middle { + position: absolute; + width: 170px; + height: 48px; + top: 200px; + left: 115px; + border-radius: 10px 10px; + background-color: #e31e5e; +} + +#char-pants-left { + position: absolute; + top: 200px; + left: 114px; + width: 70px; + height: 100px; + border-radius: 10px 10px; + background-color: #e31e5e; +} + +#char-pants-right { + position: absolute; + top: 200px; + left: 220px; + width: 70px; + height: 100px; + border-radius: 10px 10px; + background-color: #e31e5e; +} + +#char-leg-left { + position: absolute; + top: 100px; + left: 13px; + width: 44px; + height: 40px; + background-color: #ffc993; +} + +#char-leg-right { + position: absolute; + top: 100px; + left: 13px; + width: 44px; + height: 40px; + background-color: #ffc993; +} + +#char-sock-left { + position: absolute; + top: 140px; + left: 13px; + width: 44px; + height: 20px; + background-color: #0072bb; +} + +#char-sock-right { + position: absolute; + top: 140px; + left: 13px; + width: 44px; + height: 20px; + background-color: #0072bb; +} + +#char-shoe-left { + position: absolute; + top: 160px; + left: -27px; + width: 84px; + height: 34px; + border-radius: 25px 0 0 0; + background-color: #8e8e8e; +} + +#char-shoe-right { + position: absolute; + top: 160px; + left: 13px; + width: 84px; + height: 34px; + border-radius: 0 25px 0 0; + background-color: #8e8e8e; +} diff --git a/fonts/ARCADE.TTF b/fonts/ARCADE.TTF new file mode 100644 index 0000000000000000000000000000000000000000..7c169d4eae90b38aa51acf52d584f95f9ef145c5 GIT binary patch literal 27700 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..f558ab1 --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + + The HTML5 Herald + + + + + + + + +

PLAY && LEARN

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e69de29