{"id":27257256,"url":"https://github.com/wiazeph/html-css-js-studies","last_synced_at":"2025-04-11T03:16:41.617Z","repository":{"id":124716889,"uuid":"523526551","full_name":"Wiazeph/HTML-CSS-JS-Studies","owner":"Wiazeph","description":"Here you can find my works where I applied what I learned about HTML, CSS, SCSS, Tailwind CSS and JavaScript.","archived":false,"fork":false,"pushed_at":"2023-10-14T19:02:42.000Z","size":2831,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T03:16:36.869Z","etag":null,"topics":["css","css3","flex","flexbox","flexbox-css","html","html5","javascript","js","resource","sass","scss","tailwind","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"https://codepen.io/Wiazeph","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wiazeph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-08-10T23:34:26.000Z","updated_at":"2024-01-28T21:55:30.000Z","dependencies_parsed_at":"2023-10-15T17:26:25.179Z","dependency_job_id":null,"html_url":"https://github.com/Wiazeph/HTML-CSS-JS-Studies","commit_stats":null,"previous_names":["emr3rden/html-css-studies","wiazeph/html-css-studies","wiazeph/html-css-js-studies"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wiazeph%2FHTML-CSS-JS-Studies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wiazeph%2FHTML-CSS-JS-Studies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wiazeph%2FHTML-CSS-JS-Studies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wiazeph%2FHTML-CSS-JS-Studies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wiazeph","download_url":"https://codeload.github.com/Wiazeph/HTML-CSS-JS-Studies/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248333550,"owners_count":21086200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","flex","flexbox","flexbox-css","html","html5","javascript","js","resource","sass","scss","tailwind","tailwind-css","tailwindcss"],"created_at":"2025-04-11T03:16:40.910Z","updated_at":"2025-04-11T03:16:41.609Z","avatar_url":"https://github.com/Wiazeph.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://skillicons.dev\"\u003e\n    \u003cimg src=\"https://skillicons.dev/icons?i=html,css,sass,tailwind,js\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eHere you can find my works where I applied what I learned about HTML, CSS, SCSS, Tailwind CSS and JavaScript.\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\nIf you like this repository, you can follow my accounts and support it by giving a star ⭐\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://www.linkedin.com/in/Wiazeph/\"\u003eLinkedIn\u003c/a\u003e - \u003ca href=\"https://twitter.com/Wiazeph\"\u003eTwitter\u003c/a\u003e - \u003ca href=\"https://www.instagram.com/Wiazeph/\"\u003eInstagram\u003c/a\u003e - \u003ca href=\"https://codepen.io/Wiazeph\"\u003eCodepen\u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n|     | Title                                                                                                                       |                                                    | Technologies    |\n| :-- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1` | **[display-flex](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/display-flex)**                   | [Codepen](https://codepen.io/Wiazeph/pen/mdXbYMB) | `HTML-CSS-SCSS` |\n| `2` | **[flex flex-wrap](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-wrap)**             | [Codepen](https://codepen.io/Wiazeph/pen/YzYjqbB) | `HTML-CSS-SCSS` |\n| `3` | **[flex align-items](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20align-items)**         | [Codepen](https://codepen.io/Wiazeph/pen/PoEBgBO) | `HTML-CSS-SCSS` |\n| `4` | **[flex justify-content](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20justify-content)** | [Codepen](https://codepen.io/Wiazeph/pen/VwyBrEZ) | `HTML-CSS-SCSS` |\n| `5` | **[flex flex-direction](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-direction)**   | [Codepen](https://codepen.io/Wiazeph/pen/XWVBeaN) | `HTML-CSS-SCSS` |\n| `6` | **[flex flex-grow](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-grow)**             | [Codepen](https://codepen.io/Wiazeph/pen/oNpPvry) | `HTML-CSS-SCSS` |\n| `7` | **[flex row-column-gap](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20row-column-gap)**   | [Codepen](https://codepen.io/Wiazeph/pen/KKZBjRq) | `HTML-CSS-SCSS` |\n\n|      | Title                                                                                                                                  |                                                    | Technologies    |\n| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1`  | **[typewriter-effect-pure-css](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/typewriter-effect-pure-css)**       | [Codepen](https://codepen.io/Wiazeph/pen/yLprzrp) | `HTML-CSS`      |\n| `2`  | **[shaking-input](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/shaking-input)**                                 | [Codepen](https://codepen.io/Wiazeph/pen/wvywgvb) | `HTML-CSS-SCSS` |\n| `3`  | **[css-cursor-property](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-cursor-property)**                     | [Codepen](https://codepen.io/Wiazeph/pen/ExQJOzX) | `HTML-CSS-SCSS` |\n| `4`  | **[css-selector-child](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-selector-child)**                       | [Codepen](https://codepen.io/Wiazeph/pen/JjpbPpW) | `HTML-CSS-SCSS` |\n| `5`  | **[css-shapes-border-radius](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-shapes-border-radius)**           | [Codepen](https://codepen.io/Wiazeph/pen/BaYBNzx) | `HTML-CSS-SCSS` |\n| `6`  | **[css-hover-scale-rotate](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-hover-scale-rotate)**               | [Codepen](https://codepen.io/Wiazeph/pen/MWQwqvb) | `HTML-CSS`      |\n| `7`  | **[scroll-snapping](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/scroll-snapping)**                             | [Codepen](https://codepen.io/Wiazeph/pen/yLvqeJY) | `HTML-CSS`      |\n| `8`  | **[banner-text](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/banner-text)**                                     | [Codepen](https://codepen.io/Wiazeph/pen/bGvNVBp) | `HTML-CSS`      |\n| `9`  | **[gradient-text](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-text)**                                 | [Codepen](https://codepen.io/Wiazeph/pen/wvyjXqr) | `HTML-CSS-SCSS` |\n| `10` | **[gradient-background-animation](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-background-animation)** | [Codepen](https://codepen.io/Wiazeph/pen/eYVOBRY) | `HTML-CSS`      |\n| `11` | **[gradient-shadow](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-shadow)**                             | [Codepen](https://codepen.io/Wiazeph/pen/vYdLvMa) | `HTML-CSS`      |\n| `12` | **[multiple-shadows](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/multiple-shadows)**                           | [Codepen](https://codepen.io/Wiazeph/pen/jOZNoEp) | `HTML-CSS-SCSS` |\n| `13` | **[sticky-header](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/sticky-header)**                                 | [Codepen](https://codepen.io/Wiazeph/pen/zYRQOaV) | `HTML-CSS-SCSS` |\n| `14` | **[resizeable-container](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/resizeable-container)**                   | [Codepen](https://codepen.io/Wiazeph/pen/abYzvya) | `HTML-CSS-SCSS` |\n| `15` | **[text-rotating](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/text-rotating)**                                 | [Codepen](https://codepen.io/Wiazeph/pen/oNEbJzZ) | `HTML-CSS`      |\n| `16` | **[easy-way-to-saparator](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/easy-way-to-separator)**                 | [Codepen](https://codepen.io/Wiazeph/pen/eYVoymW) | `HTML-CSS`      |\n\n|      | Title                                                                                                                                  |                                                    | Technologies    |\n| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1`  | **[scroll-to-top](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/scroll-to-top)**             | [Codepen](https://codepen.io/Wiazeph/pen/MWQeeRq) | `HTML-CSS-JavaScript`      |\n| `2`  | **[remove-to-add-class](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/remove-to-add-class)** | [Codepen](https://codepen.io/Wiazeph/pen/gOjgqjV) | `HTML-CSS-JavaScript`      |\n\n\u003chr/\u003e\n\n|     | Title                                                                                                                    |                                                    | Technologies    |\n| :-- | :----------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1` | **[glassmorphism-calendar](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/glassmorphism-calendar)** | [Codepen](https://codepen.io/Wiazeph/pen/zYRVWOX) | `HTML-CSS-SCSS` |\n| `2` | **[skill-cards](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/skill-cards)**                       | [Codepen](https://codepen.io/Wiazeph/pen/bGajrQx) | `HTML-CSS-SCSS` |\n| `3` | **[login-signup-cards](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/login-signup-cards)**         | [Codepen](https://codepen.io/Wiazeph/pen/xxpzQYB) | `HTML-CSS-SCSS` |\n| `4` | **[profile-card-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/profile-card-1)**                 | [Codepen](https://codepen.io/Wiazeph/pen/YzeGeEe) | `HTML-CSS-SCSS` |\n| `5` | **[profile-card-2](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/profile-card-2)**                 | [Codepen](https://codepen.io/Wiazeph/pen/poabBKG) | `HTML-CSS-SCSS` |\n| `6` | **[social-media-icons](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/social-media-icons)**         | [Codepen](https://codepen.io/Wiazeph/pen/bGLJxZg) | `HTML-CSS-SCSS` |\n| `7` | **[expanding-gallery](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/expanding-gallery)**           | [Codepen](https://codepen.io/Wiazeph/pen/vYdVaYo) | `HTML-CSS-SCSS` |\n| `8` | **[card-hover-effect-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/card-hover-effect-1)**       | [Codepen](https://codepen.io/Wiazeph/pen/abKZLqq) | `HTML-CSS-SCSS` |\n\n|     | Title                                                                                                                        |                                                    | Technologies    |\n| :-- | :--------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1` | **[Firefox-New-Tab-Page (Clone)](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/Firefox-New-Tab-Page)** | [Codepen](https://codepen.io/Wiazeph/pen/XWoBoZN) | `HTML-CSS-SCSS` |\n| `2` | **[Spotify-Website (Clone)](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/Spotify-Website)**           | [Codepen](https://codepen.io/Wiazeph/pen/NWeBeyZ?editors=1100)      | `HTML-CSS-SCSS` |\n\n|     | Title                                                                                                                |                                                    | Technologies        |\n| :-- | :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :------------------ |\n| `1` | **[landing-page-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/landing-page-1)**             | [Vercel](https://landing-page-1-eight.vercel.app/) | `HTML-Tailwind CSS` |\n| `2` | **[footer-template-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/footer-template-1)**       | [Codepen](https://codepen.io/Wiazeph/pen/rNdZXzY) | `HTML-Tailwind CSS` |\n| `3` | **[pricing-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/pricing-section-1)**       | [Codepen](https://codepen.io/Wiazeph/pen/WNzawrE) | `HTML-Tailwind CSS` |\n| `4` | **[newsletter-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/newsletter-section-1)** | [Codepen](https://codepen.io/Wiazeph/pen/JjLxmyv) | `HTML-Tailwind CSS` |\n| `5` | **[newsletter-section-2](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/newsletter-section-2)** | [Codepen](https://codepen.io/Wiazeph/pen/gOeqBxN) | `HTML-Tailwind CSS` |\n| `6` | **[team-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/team-section-1)**             | [Codepen](https://codepen.io/Wiazeph/pen/NWMxmOz) | `HTML-Tailwind CSS` |\n| `7` | **[faq-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/faq-section-1)**               | [Codepen](https://codepen.io/Wiazeph/pen/LYrLawj) | `HTML-Tailwind CSS` |\n\n|      | Title                                                                                                                                  |                                                    | Technologies    |\n| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |\n| `1`  | **[neumorphism-calculator](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/neumorphism-calculator)**             | [Codepen](https://codepen.io/Wiazeph/pen/OJrrmXw) | `HTML-Tailwind CSS-JavaScript`      |\n| `2`  | **[password-strength-checker](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/password-strength-checker)** | [Codepen](https://codepen.io/Wiazeph/pen/QWzzvEo) | `HTML-Tailwind CSS-JavaScript`      |\n\n\u003chr/\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiazeph%2Fhtml-css-js-studies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiazeph%2Fhtml-css-js-studies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiazeph%2Fhtml-css-js-studies/lists"}