diff --git a/3633003-hd_1906_1080_30fps.mp4 b/3633003-hd_1906_1080_30fps.mp4 new file mode 100644 index 00000000..5098e99f Binary files /dev/null and b/3633003-hd_1906_1080_30fps.mp4 differ diff --git a/README.md b/README.md index d59a798a..13600441 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. +A project consisting of building a business site with a form and a hero section with a video or image. ## 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? +I started from forms that I like and tried to imitate them as much as possible. + +I ran into problems like different types of inputs had different styles by default which made me have to work more with my css and classify to be able to get different inputs as similar as possible. + +If I had more time I would have added a footer and worked more on the responsive design for smaller screens ## 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. +https://lustrous-crisp-6b8347.netlify.app + diff --git a/index.html b/index.html new file mode 100644 index 00000000..42b964d2 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + + + Gleaming Gemstones + + + + + +
+ + + +
+

Gleaming
Gemstones

+
+ + +
+ +
+ + +
+

Welcome to the World of Gleaming Gemstones

+

Discover a universe of brilliance and elegance. Subscribe to our newsletter and be the first to explore our + dazzling new collections, enjoy exclusive offers, and get expert tips on how to make your gems shine even + brighter. Plus, as a thank you, we’ll gift you a 10% discount on your first purchase when you sign up! +

+ + +
+

Sign me up!

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

+ + +

+ + + + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..64edde65 --- /dev/null +++ b/style.css @@ -0,0 +1,290 @@ +body { + background-color: whitesmoke; + box-sizing: border-box; +} + +/*hero section */ +h1 { + font-family: Lato, Arial, sans-serif; + text-transform: uppercase; + font-size: 1.5rem; + margin-left: 20px; +} + +.hero-video { + position: relative; + height: 100vh; + width: 100%; + overflow: hidden; + margin-bottom: 30px; +} + +.hero-video video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + z-index: -1; + transform: translate(-50%, -50%); + object-fit: cover; +} + +/*navigation menu */ + +.navbar { + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; + font-family: Lato, Arial, sans-serif; + word-spacing: 10px; + padding: 10px 0; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: auto; +} + +/*links */ + +a { + color: black; + text-decoration: none; +} + + +/*text section */ + +h2 { + font-family: Lato, Arial, sans-serif; + text-transform: uppercase; + text-align: center; + font-size: 1.25rem; + margin: 10px 0; +} + +p { + font-family: Baskerville, Times, serif; + font-size: 1.1 rem; + text-align: center; + margin: 80px; + margin-top: 20px; + margin-bottom: 40px; +} + +/*heading inside form */ + +h3 { + font-family: Lato, Arial, sans-serif; + text-transform: uppercase; + font-size: 1rem; + margin: 10px 0; +} + +/*form */ + +form { + font-family: Baskerville, Times, serif; + border: 1px solid grey; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + padding: 10px; + margin: 10px auto; + margin-bottom: 0px; + max-width: 90%; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +/* placeholders in inputs */ + +::placeholder { + text-align: left; + font-family: Baskerville, Times, serif; + color: black; +} + +/*input fields in form */ + +input { + width: 100%; + max-width: 280px; + font-size: 0.875rem; + padding: 8px; + border: none; + border-bottom: 1px solid black; + background-color: whitesmoke; + margin: 5px 0; +} + +/*date of birth input */ + +.date-label { + width: 100%; + max-width: 200px; + font-family: Baskerville, Times, serif; + margin: 5px 0; +} + +.date-label input[type="date"] { + width: 100%; + font-size: 0.875rem; + border: none; + border-bottom: 1px solid black; + background-color: whitesmoke; + margin-top: 5px; +} + +/*terms and conditions */ + +.checkbox { + display: inline-flex; + align-items: center; + font-family: Baskerville, Times, serif; + white-space: nowrap; + margin: 5px 0; +} + +/*sibmit button */ + +button { + background-color: black; + color: white; + border: 1px solid white; + width: 100%; + max-width: 150px; + font-size: 0.875rem; + font-weight: bold; + padding: 8px; + margin: 10px 0; + cursor: pointer; +} + +button:hover { + background-color: white; + color: black; + border: 1px solid black; +} + + + +/* Responsive design */ + +@media (max-width: 1024px) { + h1 { + font-size: 1.75rem; + } + + .navbar { + padding: 10px 15px; + word-spacing: 5px; + } + + input, + .date-label input[type="date"], + button { + width: 80%; + } +} + +/* Responsive design for tablets */ + + +@media (max-width: 768px) { + h1 { + font-size: 1.5rem; + } + + .navbar { + padding: 10px 10px; + word-spacing: 2px; + } + + input, + .date-label input[type="date"], + button { + width: 70%; + } + + form { + padding: 15px; + margin: 15px auto; + } +} + +/* Responsive design for smartphones 667px */ + + +@media (max-width: 667px) { + h1 { + font-size: 1rem; + margin: 5px 0; + text-align: center; + } + + .navbar { + display: flex; + flex-direction: column; + position: relative; + text-align: center; + } + + p { + display: flex; + text-align: center; + margin-top: 20px; + margin-bottom: 20px; + } + + input, + .date-label input[type="date"], + button { + width: 90%; + } + + form { + padding: 10px; + margin: 10px auto; + } +} + +/* Responsive design for smartphones 320px */ + +@media (max-width: 320px) { + h1 { + font-size: 1rem; + margin: 5px 0; + text-align: center; + } + + .navbar { + display: flex; + flex-direction: column; + position: relative; + text-align: center; + } + + + p { + display: flex; + text-align: center; + margin-top: 20px; + margin-bottom: 20px; + } + + input, + .date-label input[type="date"], + button { + width: 95%; + } + + form { + padding: 8px; + margin: 5px auto; + } +} \ No newline at end of file