https://github.com/ozzies-code/frontpage

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.
https://github.com/ozzies-code/frontpage

Last synced: 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/ozzies-code/frontpage
• Owner: ozzies-code
• Created: 2023-07-22T19:56:09.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-22T20:04:40.000Z (almost 2 years ago)
• Last Synced: 2025-01-21T12:13:08.711Z (4 months ago)
• Language: CSS
• Size: 244 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontpage

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.

HTML

  

   

   

     

     

   Mi Portada  

     

     

     

   

   

   

     

 
  

   

 
  

   

 
My Brand is Ozzies_Code
  

 
  

   

 
  

   

   

   

   

   

   

   

   

   

   

   

 
  

   

 
  

   

   

   

   

   


 CSS:

 @import url(//fonts.googleapis.com/css?family=Lato:300:400);  

 body {  

  margin:0;  

 }  

 

 h1 {  

  font-family: 'Noto-Serif', serif;  

  font-weight:300;  

  letter-spacing: 2px;  

  font-size:48px;  

 } 

 

  p {  

  font-family: 'Noto-Serif', serif;  

  letter-spacing: 1px;  

  font-size:14px;  

  color: #333333;  

 }  

 

 .header {  

  position:relative;  

  text-align:center;  

  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);  

  color:white;  

 }  

 

 .logo {  

  width:50px;  

  fill:white;  

  padding-right:15px;  

  display:inline-block;  

  vertical-align: middle;  

 }  

 

 .inner-header {  

  height:65vh;  

  width:100%;  

  margin: 0;  

  padding: 0;  

 }

.waves {  

  position:relative;  

  width: 100%;  

  height:15vh;  

  margin-bottom:-7px; /*Fix for safari gap*/  

  min-height:100px;  

  max-height:150px;  

 }  

.content {  

  position:relative;  

  height:20vh;  

  text-align:center;  

  background-color: white;  

 }  

/* Animation */  

 .parallax > use {  

  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)   infinite;  

 }  

 .parallax > use:nth-child(1) {  

  animation-delay: -2s;  

  animation-duration: 7s;  

 }  

 .parallax > use:nth-child(2) {  

  animation-delay: -3s;  

  animation-duration: 10s;  

 }  

 .parallax > use:nth-child(3) {  

  animation-delay: -4s;  

  animation-duration: 13s;  

 }  

 .parallax > use:nth-child(4) {  

  animation-delay: -5s;  

  animation-duration: 20s;  

 }  

 @keyframes move-forever {  

  0% {  

   transform: translate3d(-90px,0,0);  

  }  

  100% {   

   transform: translate3d(85px,0,0);  

  }  

 }  

 /*Shrinking for mobile*/  

 @media (max-width: 768px) {  

  .waves {  

   height:40px;  

   min-height:40px;  

  }  

  .content {  

   height:30vh;  

  }  

  h1 {  

   font-size:24px;  

  }  

 }   

 

 .flex { /*Flexbox for containers*/  

  display: flex;  

  justify-content: center;  

  align-items: center;  

  text-align: center;  

 }