Commit d940368
2024-06-16 00:23:58
Changed files (5)
assets/common.css
@@ -0,0 +1,206 @@
+@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding:0;
+ }
+
+body{
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: black;
+ font-family: "PT Mono", monospace;
+ color: white;
+ overflow: hidden;
+ justify-content: center;
+ align-items: center;
+}
+
+input {
+ margin: 10px;
+ padding:5px;
+ border: solid 0.1px grey;
+ background-color: black;
+ border-radius: 3px;
+ width: 100%;
+ color: white;
+ max-width: 250px;
+ text-align: center;
+}
+
+input:focus {
+ outline: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+
+.footer{
+ position: absolute;
+ bottom: 0;
+ margin-bottom: 30px;
+ text-align: center;
+ padding: 10px;
+ font-size: 16px;
+ font-family: "Source Code Pro", monospace;
+ font-optical-sizing: auto;
+ font-weight: 500px;
+ font-style: normal;
+ font-spacing: 10px;
+ color: white;
+ opacity: 70%;
+ left: 50%;
+ transform: translateX(-50%);
+ display:flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 14px;
+}
+
+.footer label{
+ opacity: 50%;
+ cursor: pointer;
+}
+
+.footer label:hover{
+ color: white;
+ opacity: 100%;
+}
+
+.arrow{
+ position:relative;
+ width:30px;
+ height: 30px;
+ cursor:pointer;
+ overflow:hidden;
+ cursor: pointer;
+ opacity: 50%;
+ }
+
+ .arrow:hover{
+ opacity: 100%;
+ }
+
+ .arrow:after{
+ position:absolute;
+ display:block;
+ content:"";
+ color:white;
+ width: 20px;
+ height: 15px;
+ top:-1px;
+ border-bottom:solid 2px;
+ transform:translatex(4px);
+ }
+
+ .arrow:before{
+ position:absolute;
+ display:block;
+ content:"";
+ color:white;
+ width: 8px;
+ height: 8px;
+ border-top:solid 2px;
+ border-left:solid 2px;
+ top:50%;
+ left:2px;
+ transform-origin:0% 0%;
+ transform:rotatez(-45deg);
+ }
+
+ .modal {
+ opacity: 0;
+ visibility: hidden;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ text-align: left;
+ background: rgba(0,0,0);
+ transition: opacity .3s ease;
+ z-index: 100;
+ }
+
+ .modal__bg {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ cursor: pointer;
+ }
+
+ .modal-state {
+ display: none;
+ }
+
+ .modal-state:checked + .modal {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .modal-state:checked + .modal .modal__inner {
+ top: 0;
+ }
+
+ .modal__inner {
+ transition: bottom .3s ease;
+ position: absolute;
+ top: -20%;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: fit-content;
+ width: 20%;
+ margin: auto;
+ overflow: auto;
+ background: black;
+ border: solid 1px grey;
+ border-radius: 5px;
+ padding: 1em 2em;
+ }
+ .modal__p{
+ margin-top: 20px;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .modal__close {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ width: 1.1em;
+ height: 1.1em;
+ cursor: pointer;
+ }
+
+ .modal__close:after,
+ .modal__close:before {
+ content: '';
+ position: absolute;
+ width: 2px;
+ height: 1.5em;
+ background: #ccc;
+ display: block;
+ transform: rotate(45deg);
+ left: 50%;
+ margin: -3px 0 0 -1px;
+ top: 0;
+ }
+
+ .modal__close:hover:after,
+ .modal__close:hover:before {
+ background: #aaa;
+ }
+
+ .modal__close:before {
+ transform: rotate(-45deg);
+ }
\ No newline at end of file
assets/favicon.png
Binary file
index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>101</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link rel="shortcut icon" href="./assets/favicon.png" type="image/png">
+ <link rel="stylesheet" href="./assets/common.css">
+</head>
+<body class="h-screen flex items-center justify-center bg-black flex flex-col font-black">
+ <h1 class="text-white text-[30px]">
+ .101.
+ </h1>
+ <div class="flex flex-col text-white gap-x-[200px] gap-y-2 p-10">
+ </div>
+</body>
+</html>
\ No newline at end of file
LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ansari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
README.md
@@ -0,0 +1,40 @@
+<div align="center">
+<img src="./assets/favicon.png" width="150px"/>
+<p style="font-size: 3em; font-weight: 700;">101</p>
+</div>
+
+Welcome to 101. This is a collection of crazy and cool websites that i built. Each site will focus on a specific concept or technique in JavaScript, CSS, or HTML, and will be built from scratch using only these
+
+1. **index.html** - The HTML file that contains the structure of the webpage.
+2. **style.css** - The CSS file that handles the styling of the webpage.
+3. **script.js** - The JavaScript file that adds interactivity to the webpage.
+
+## Thumb Rule
+
+1. **Minimalism**: Each webpage will follow a minimalist design approach, focusing on simplicity and functionality without unnecessary elements.
+2. **Vanilla JS**: No frameworks or libraries (like React, Vue, or Angular) will be used. However, libraries may be used for higher-level tasks if absolutely necessary.
+3. **From Scratch**: As much as possible, all code will be written from scratch to ensure a deeper understanding of the concepts being taught.
+
+## Contributing
+
+We welcome contributions to this 101! If you have an idea for a new website or want to improve an existing one, follow these steps:
+
+1. **Fork the Repository**: Create a fork of this repository by clicking the "Fork" button at the top of the page.
+2. **Create a New Branch**: Create a new branch for your feature or improvement.
+ ```sh
+ git checkout -b my-new-feature
+ ```
+3. **Make Your Changes**: Make your changes to the HTML, CSS, and JavaScript files.
+4. **Commit Your Changes**: Commit your changes with a clear and concise message.
+ ```sh
+ git commit -am 'Add new feature'
+ ```
+5. **Push to the Branch**: Push your changes to the branch on your forked repository.
+ ```sh
+ git push origin my-new-feature
+ ```
+6. **Create a Pull Request**: Create a pull request to the main repository. Provide a detailed description of your changes and why they should be merged.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.