PR Estefanny Project week 3 business website #372
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,15 @@ | ||
| # Business Site | ||
|
|
||
| we had to create a one page bussines website that contains a header, a Signup form and a submit button, the web site has to be styled and it must to be fully responsive | ||
|
|
||
| ## The problem | ||
|
|
||
|
|
||
| The main problem for me was the form, style it was very tricky, and I had to research a lot using mostly chatgpt, w3school and stackoverflow. Despite I could mostly solve it, I'm still not 100% happy with it, because my main idea was to have an image horizontly in the left side and pairing it with the form to the right side. But when I was trying to add the image the form was losing its properties, at the end I decided to keep only the form, but I couldn't center it so I had to keep the form to the left side, leading an empty space in the right side of the website, if I had more time, I would want to fix this. | ||
|
|
||
| Another problem was upploading the hero video, I needed to increase the buffer size something I learned on stackoverflow. | ||
|
|
||
| ## View it live | ||
| Link to my business website | ||
|
|
||
| https://stirring-salamander-00e5a8.netlify.app/ |
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,279 @@ | ||
| /* After you've linked the CSS file in the HTML, | ||
| this should turn the background blue ;) */ | ||
| body { | ||
| background: rgb(246, 247, 231); | ||
| } | ||
|
|
||
| header { | ||
| display:block; | ||
| } | ||
|
|
||
| nav { | ||
| background-color: #FDFD7E; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 10px; | ||
| border-bottom: 2px solid #ddd; | ||
| } | ||
|
|
||
| .logo-container { | ||
| margin-left: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .logo-container img { | ||
| height: 50px; /* Ajusta la altura de la imagen según sea necesario */ | ||
|
There was a problem hiding this comment. I can see some of your comments are in spanish here. Maybe it's good to do them all in english :) |
||
| width: auto; /* Mantiene la proporción de la imagen */ | ||
| } | ||
|
|
||
| nav ul { | ||
| list-style-type:none; | ||
| margin: 0%; | ||
| padding: 3; | ||
| display:flex; | ||
| color: rgb(246, 248, 248); | ||
| } | ||
|
|
||
| nav ul li { | ||
| float: right; | ||
| } | ||
|
|
||
| nav ul li a { | ||
| display: block; | ||
| color: #5358F6; | ||
| text-align: last; | ||
| padding: 20px 20px; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| nav ul li a:hover { | ||
| background-color: #ddd; | ||
|
|
||
| } | ||
|
|
||
| .hero-container { | ||
| position: relative; | ||
| width: 100%; | ||
| height: 100vh; /* 50% de la altura de la ventana gráfica */ | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| #hero-video { | ||
| position:absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| width: auto; | ||
| height: auto; | ||
| transform: translate(-50%, -50%); /* Centra el video */ | ||
| z-index: -1; /* Envía el video al fondo */ | ||
| } | ||
|
|
||
| .hero-text { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); /* Centra el texto */ | ||
| text-align: center; | ||
| z-index: 1; /* Asegura que el texto esté por encima del video */ | ||
| } | ||
|
|
||
| .hero-text h1 { | ||
| font-size: 48px; | ||
| margin: 0; | ||
| color: #FDFD7E; | ||
| } | ||
|
|
||
| .hero-text p { | ||
| font-size: 24px; | ||
| margin: 10px 0; | ||
| color: #ddd; | ||
| } | ||
|
|
||
| .hero-text button { | ||
| padding: 10px 20px; | ||
| font-size: 18px; | ||
| background-color: rgb(109, 106, 106) ; /* Color dorado para el botón */ | ||
| border: none; | ||
| color: #FDFD7E; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .hero-text button:hover { | ||
| background-color: #d8d8d4; /* Color más oscuro al pasar el ratón */ | ||
| } | ||
|
|
||
| /*images container*/ | ||
|
|
||
| .image-gallery { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| margin-top: 80px; | ||
| margin-bottom: 80px; | ||
| gap: 100px; | ||
| transition: .5s ease; | ||
| backface-visibility: hidden; | ||
| } | ||
|
|
||
| /*Default styles for larger screens*/ | ||
| .image-gallery a:nth-child(3) { | ||
| flex: 1 1 1 100%; /*Default to 3 images per row*/ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| .image-gallery img { | ||
| border: 1px solid #ddd; /* Gray border */ | ||
| border-radius: 4px; /* Rounded border */ | ||
| padding: 5px; /* Some padding */ | ||
| width: 300px; /* Set a small width */ | ||
| } | ||
|
|
||
| /* Add a hover effect (blue shadow) */ | ||
|
|
||
|
|
||
|
|
||
| .illustration-container { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| .illustration-container img { | ||
| width: 100%; | ||
| height: auto; | ||
| max-width: 1920px; | ||
| padding: 0%; | ||
| } | ||
|
|
||
| .form-inline { | ||
| display: flex; | ||
| flex-direction:row wrap; | ||
| align-items: center; | ||
| width: 50%; | ||
| } | ||
|
|
||
|
|
||
| input[type=text] , input[type=email]{ | ||
| width: 90%; | ||
| padding: 10px; | ||
| margin: 5px 0px 22px 0px; | ||
| border: none; | ||
| background: #d8d8d4; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| input[type=text]:focus , input[type=email]:focus { | ||
| background-color: #ddd; | ||
| outline: none; | ||
| } | ||
|
|
||
| button { | ||
| background-color:cornflowerblue; | ||
| color: white; | ||
| padding: 14px 20px; | ||
| margin: 8px 0; | ||
| border: none; | ||
| cursor: pointer; | ||
| width: 150px; | ||
| opacity: 1; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| button:hover { | ||
|
There was a problem hiding this comment. Really nice with the hover effect here! I haven't used the this effect in my CSS yet but will definitely |
||
| opacity: .6; | ||
| transition: .3s; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. There's some styling elements here I haven't tried before which sounds really interesting! Will try it out on my next project. |
||
| .form-container { | ||
| width: 50%; | ||
| flex-direction: column; | ||
| display:flex; | ||
| justify-content: center; | ||
| align-items:baseline; | ||
| padding: 5%; | ||
| background-color: #FDFD7E; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1); | ||
| width: 90%; | ||
| margin: 50px auto; | ||
| margin-left: 50px; | ||
| font-family:Verdana, Geneva, Tahoma, sans-serif; | ||
| } | ||
|
|
||
|
|
||
| /*footer*/ | ||
| footer { | ||
| background-color: #333; | ||
| color:#FDFD7E; | ||
| padding: 20px 0; | ||
| text-align: center; | ||
| font-family: Arial, sans-serif; | ||
| position: relative; | ||
| width: 100%; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| .footer-content p { | ||
| margin: 5px 0; | ||
| font-size: 14px; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| .footer-content { | ||
| max-width: 90%; | ||
| margin: auto; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
There was a problem hiding this comment. I tried your media queries you've written here on your deployed site and it worked really well! Good job :) |
||
| /* Styles for mobile devices */ | ||
|
|
||
| @media (min-width: 320px) and (max-width: 480px) | ||
| { | ||
| .image-gallery a { | ||
| flex: 1 1 1 100%; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @media (min-width: 481px) and (max-width: 768px) | ||
| { | ||
| .image-gallery a { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| flex: 1 1 1 100%; | ||
|
|
||
| } | ||
| .form-inline input { | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .form-inline { | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } | ||
| /* Styles for tablets (iPad) */ | ||
| } | ||
|
|
||
| @media (min-width: 769px) and (max-width: 1024px) | ||
| { | ||
| .image-gallery a { | ||
| flex: 1 1 1 100%; | ||
| } | ||
| } | ||
| /* Styles for regular screens (small laptops/desktops) */ | ||
|
|
||
|
|
||
| @media (min-width: 1025px) { | ||
| /* Styles for large screens (large laptops/desktops) */ | ||
| } | ||
Binary file not shown.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice video that works well on the deployed link and fits the theme perfect!