{"id":24482258,"url":"https://github.com/ozzies-code/frontpage","last_synced_at":"2025-10-26T17:33:44.341Z","repository":{"id":183099091,"uuid":"669598059","full_name":"ozzies-code/Frontpage","owner":"ozzies-code","description":"This project consists of the presentation of a cover with a movement effect at the bottom highlighting the title in white letters on a crystalline blue background with an animation that emulates the movement of waves in the ocean.","archived":false,"fork":false,"pushed_at":"2023-07-22T20:04:40.000Z","size":250,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T12:13:08.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/ozzies-code.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":"2023-07-22T19:56:09.000Z","updated_at":"2023-07-22T20:05:32.000Z","dependencies_parsed_at":"2023-07-22T20:46:37.344Z","dependency_job_id":null,"html_url":"https://github.com/ozzies-code/Frontpage","commit_stats":null,"previous_names":["ozzies-code/frontpage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FFrontpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FFrontpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FFrontpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FFrontpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ozzies-code","download_url":"https://codeload.github.com/ozzies-code/Frontpage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243633027,"owners_count":20322519,"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":[],"created_at":"2025-01-21T12:13:15.881Z","updated_at":"2025-10-26T17:33:39.317Z","avatar_url":"https://github.com/ozzies-code.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontpage\nThis project consists of the presentation of a cover with a movement effect at the bottom highlighting the title in white letters on a crystalline blue background with an animation that emulates the movement of waves in the ocean.\nHTML\n\n\u003c!DOCTYPE html\u003e  \n \u003chtml lang=\"en\"\u003e  \n \u003chead\u003e  \n   \u003cmeta charset=\"UTF-8\"\u003e  \n   \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e  \n   \u003ctitle\u003eMi Portada\u003c/title\u003e  \n   \u003clink href=\"https://fonts.googleapis.com/css2?family=Lobster\u0026display=swap\" rel=\"stylesheet\"\u003e  \n   \u003clink rel=\"stylesheet\" href=\"miportada.css\"\u003e  \n     \n \u003c/head\u003e  \n \u003cbody\u003e  \n   \n   \u003c!--Hey! This is the original version  \n of Simple CSS Waves--\u003e  \n \u003cdiv class=\"header\"\u003e  \n \u003c!--Content before waves--\u003e  \n \u003cdiv class=\"inner-header flex\"\u003e  \n \u003c!--Just the logo.. Don't mind this--\u003e  \n \u003ch1\u003eMy Brand is Ozzies_Code\u003c/h1\u003e  \n \u003c/div\u003e  \n \u003c!--Waves Container--\u003e  \n \u003cdiv\u003e  \n \u003csvg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"  \n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\"\u003e  \n \u003cdefs\u003e  \n \u003cpath id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" /\u003e  \n \u003c/defs\u003e  \n \u003cg class=\"parallax\"\u003e  \n \u003cuse xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7\" /\u003e  \n \u003cuse xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /\u003e  \n \u003cuse xlink:href=\"#gentle-wave\" x=\"48\" y=\"5\" fill=\"rgba(255,255,255,0.3)\" /\u003e  \n \u003cuse xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" /\u003e  \n \u003c/g\u003e  \n \u003c/svg\u003e  \n \u003c/div\u003e  \n \u003c!--Waves end--\u003e  \n \u003c/div\u003e  \n \u003c!--Header ends--\u003e  \n \u003c!--Content starts--\u003e  \n \u003c!--Content ends--\u003e  \n \u003c/body\u003e  \n \u003c/html\u003e  \n\n CSS:\n\n @import url(//fonts.googleapis.com/css?family=Lato:300:400);  \n body {  \n  margin:0;  \n }  \n \n h1 {  \n  font-family: 'Noto-Serif', serif;  \n  font-weight:300;  \n  letter-spacing: 2px;  \n  font-size:48px;  \n } \n \n  p {  \n  font-family: 'Noto-Serif', serif;  \n  letter-spacing: 1px;  \n  font-size:14px;  \n  color: #333333;  \n }  \n \n .header {  \n  position:relative;  \n  text-align:center;  \n  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);  \n  color:white;  \n }  \n \n .logo {  \n  width:50px;  \n  fill:white;  \n  padding-right:15px;  \n  display:inline-block;  \n  vertical-align: middle;  \n }  \n \n .inner-header {  \n  height:65vh;  \n  width:100%;  \n  margin: 0;  \n  padding: 0;  \n }\n\n.waves {  \n  position:relative;  \n  width: 100%;  \n  height:15vh;  \n  margin-bottom:-7px; /*Fix for safari gap*/  \n  min-height:100px;  \n  max-height:150px;  \n }  \n\n.content {  \n  position:relative;  \n  height:20vh;  \n  text-align:center;  \n  background-color: white;  \n }  \n\n/* Animation */  \n .parallax \u003e use {  \n  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)   infinite;  \n }  \n .parallax \u003e use:nth-child(1) {  \n  animation-delay: -2s;  \n  animation-duration: 7s;  \n }  \n .parallax \u003e use:nth-child(2) {  \n  animation-delay: -3s;  \n  animation-duration: 10s;  \n }  \n .parallax \u003e use:nth-child(3) {  \n  animation-delay: -4s;  \n  animation-duration: 13s;  \n }  \n .parallax \u003e use:nth-child(4) {  \n  animation-delay: -5s;  \n  animation-duration: 20s;  \n }  \n @keyframes move-forever {  \n  0% {  \n   transform: translate3d(-90px,0,0);  \n  }  \n  100% {   \n   transform: translate3d(85px,0,0);  \n  }  \n }  \n /*Shrinking for mobile*/  \n @media (max-width: 768px) {  \n  .waves {  \n   height:40px;  \n   min-height:40px;  \n  }  \n  .content {  \n   height:30vh;  \n  }  \n  h1 {  \n   font-size:24px;  \n  }  \n }   \n \n .flex { /*Flexbox for containers*/  \n  display: flex;  \n  justify-content: center;  \n  align-items: center;  \n  text-align: center;  \n } \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozzies-code%2Ffrontpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fozzies-code%2Ffrontpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozzies-code%2Ffrontpage/lists"}