diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..cc5da47a Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d59a798a..fce6a4f6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ # Business Site -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +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 -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? + +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 -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +Link to my business website + +https://stirring-salamander-00e5a8.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..67797810 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/images/.DS_Store b/code/images/.DS_Store new file mode 100644 index 00000000..396b9b29 Binary files /dev/null and b/code/images/.DS_Store differ diff --git a/code/images/cincin.gif b/code/images/cincin.gif new file mode 100644 index 00000000..a958f270 Binary files /dev/null and b/code/images/cincin.gif differ diff --git a/code/images/month-wine.png b/code/images/month-wine.png new file mode 100644 index 00000000..d42f3f64 Binary files /dev/null and b/code/images/month-wine.png differ diff --git a/code/images/next-events.png b/code/images/next-events.png new file mode 100644 index 00000000..e49d4251 Binary files /dev/null and b/code/images/next-events.png differ diff --git a/code/images/next-events.webp b/code/images/next-events.webp new file mode 100644 index 00000000..391c6024 Binary files /dev/null and b/code/images/next-events.webp differ diff --git a/code/images/our-wine.png b/code/images/our-wine.png new file mode 100644 index 00000000..8e61f588 Binary files /dev/null and b/code/images/our-wine.png differ diff --git a/code/images/wine-me.png b/code/images/wine-me.png new file mode 100644 index 00000000..ae4e7f83 Binary files /dev/null and b/code/images/wine-me.png differ diff --git a/code/index.html b/code/index.html index 85fe8e53..6fc0a335 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,119 @@ - - - - Business Site - - - -

Business name 🌻

+ + + + Business Site - + + - + + + - + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+

Your private wine collection

+

Directly to your home

+ + + +
+ + + +
+ our-wine + month-wine + events +
+ + +
+
+

Create account

+

Please fill in this form to create an account.

+ + + + + + + + + + + + + +

By creating an account, you agree to our terms and conditions.

+ + +
+
+ + + + + diff --git a/code/style.css b/code/style.css index 529ed755..a11bea7c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,265 @@ /* After you've linked the CSS file in the HTML, this should turn the background blue ;) */ body { - background: blue; + background: rgb(246, 247, 231); +} + +header { + display:block; +} + +nav { + background-color: #f7f7b6; + 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; + width: auto; /* keeps the image proportion*/ +} + +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% */ + overflow: hidden; +} + +#hero-video { + position:absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translate(-50%, -50%); /* Centered video*/ + z-index: -1; /* sends the video to the background*/ +} + +.hero-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); /* centered text */ + text-align: center; + z-index: 1; /* text over the video */ +} + +.hero-text h1 { + font-size: 48px; + margin: 0; + color: #f7f7b6; +} + +.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) ; /* golden color for the buton */ + border: none; + color: #f7f7b6; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.hero-text button:hover { + background-color: #d8d8d4; /* darker color for the mouse */ +} + +/*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 */ +} + +.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 { + opacity: .6; + transition: .3s; +} + +.newsletter-checkbox { + margin-bottom: 15px; +} + +.form-container { + width: 50%; + flex-direction: column; + display:flex; + justify-content: center; + align-items:baseline; + padding: 5%; + background-color: #f7f7b6; + 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:#f7f7b6; + 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; +} + + + + /* 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) */ } \ No newline at end of file diff --git a/code/video/.DS_Store b/code/video/.DS_Store new file mode 100644 index 00000000..7c5623fd Binary files /dev/null and b/code/video/.DS_Store differ diff --git a/code/video/wine-video-sd.mp4 b/code/video/wine-video-sd.mp4 new file mode 100644 index 00000000..819707a8 Binary files /dev/null and b/code/video/wine-video-sd.mp4 differ diff --git a/code/video/wine-video.mp4 b/code/video/wine-video.mp4 new file mode 100644 index 00000000..fc734569 Binary files /dev/null and b/code/video/wine-video.mp4 differ