final commit

README.md

@@ -0,0 +1,44 @@
+<div align="center">
+
+# AS੯ames Collection
+
+<div>
+
+---
+
+<div align="center">
+
+<div align="left">
+
+## Purpose
+
+> This game lets you know how logical works in the game.
+
+---
+
+### How to play
+
+1. Click on green **Clone or download** button and choose Download ZIP.
+2. Find the downloaded zipped file on your pc and extract it.
+3. Go to **Web-Info** folder. Inside you will find a file named **index.html**.
+4. Double click on **index.html** file and your browser will open (or maybe just a new tab) and the game will start.
+5. If for whatever reason your browser does not open, right click on **index.html** file go down to **Open with**
+ and choose your web browser. This will open the browser and launch the game.
+
+Once you are done playing you can close the tab in your browser to quit the game.
+
+---
+
+</div>
+
+### Flappy Brid
+
+![Flappy Brid perview](assets/images/perview.gif "AS੯ames Collection")
+
+</div>
+
+> If you have any issues with the game feel free to let me know!
+
+> If you are more interested, check out the collection of [ **AS੯ames**](https://github.com/DSDmark/ASGames "AS੯ames Collection").
+
+---

assets/css/style.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/* ============ GOOGEL FONTS ================= */
+/*
+ * ─── BODY TEXT */
+@import url("https://fonts.googleapis.com/css2?family=Concert+One&display=swap");
+/* ========= BASE ============== */
+html {
+ font-size: 62.5%;
+}
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
+
+body {
+ font-family: "Concert One", cursive;
+ font-size: 1.5rem;
+ display: grid;
+ place-items: center;
+ min-height: 100vh;
+ text-transform: capitalize;
+ color: red;
+ background: linear-gradient(270deg, #000, #468944);
+}
+
+b {
+ background: #0f5809;
+}
+
+.gameDetail {
+ display: grid;
+ text-align: center;
+ padding: 1rem 2rem;
+ line-height: 2.5rem;
+ background: linear-gradient(168deg, #000, #70c86e);
+ box-shadow: 0 0 8rem 2rem rgba(126, 255, 90, 0.5);
+ border-radius: 0 0 20rem 20rem;
+ color: #b2ffba;
+ z-index: 100;
+}
+
+#canvas {
+ margin-top: 5rem;
+ width: 360px;
+ height: 660px;
+ box-shadow: 0 0 8rem 2rem rgba(126, 255, 90, 0.5);
+ border: 2px double #1c291c;
+}/*# sourceMappingURL=style.css.map */