Elina Eriksson Hult - business-site #368
There are no files selected for viewing
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,13 @@ | ||
| # Business Site | ||
| The assignment was to create a buisness site with a responsive header of an image/video and a signup form including three different input types. | ||
| I choose to do a music synch website that I named FemScore Media. | ||
|
|
||
| I created a music synch website where you can request to buy licensed music created by women. Once the client fills in the sign up form by making a request on the site, they can use the chosen song in other medias such as TV/Film, SoMe and advertisment. | ||
|
|
||
| ## The problem | ||
| For this project I planned the whole business idea first including the buisness content and name etc. Then I used a pen and paper to sketch out the website layout and structure. In terms of the coding I approchead problems all the time and solved them along the way, using a combination of watching videos on disco, google, stack overflow and chatgpt. | ||
|
|
||
| If I had more time I would focus a bit more on styling the page in CSS. I initially focused on the requirments and then I moved on to adding more code in the HTML- and the CSS-document mainly for a more aesthetic look. Considering I'm a beginner in coding I'm happy with the result but I would add/change some styling elements if I had more experience, knowledege and time. Another thing I tried was to follow the clean code guide but my code kept jumping back to the "none-clean code" as soon as I saved it. I solved it by turning the format save off in vs code preferences. I'm not sure that's the right way to do it. | ||
|
|
||
| ## View it live | ||
| https://femscoremedia.netlify.app/ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,17 +1,110 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Business Site</title> | ||
|
|
||
| <link rel="stylesheet" href="./style.css" /> | ||
|
|
||
| <!-- googlefonts --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Readex+Pro:[email protected]&family=Roboto:wght@700;900&display=swap" | ||
| rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Logo --> | ||
| <div | ||
| class="header-logo"> | ||
| <img | ||
| class="header-logo" | ||
| src="assets/logo.jpg" | ||
| alt="FemScore Media logo of a vinylplayer"> | ||
| </div> | ||
|
|
||
| <!-- business name --> | ||
| <h1>FemScore Media</h1> | ||
|
|
||
| <h2>Bring your stories to life - just add music created by women ♀</h2> | ||
|
|
||
| <!-- video content --> | ||
| <video | ||
| id="video" | ||
| controls autoplay loop muted> | ||
| <source src="assets/vinyl.mp4" | ||
| alt="video of a vinyl player"> | ||
| </video> | ||
|
|
||
| <!-- Signup form --> | ||
| <form | ||
| action="http://httpbin.org/anything" method="post"> | ||
|
|
||
| <h3>Make a Song Request</h3> | ||
|
|
||
| <fieldset> | ||
| <!-- Name field --> | ||
| <label> | ||
| <span>Name</span> | ||
| <input type="text" name="name" placeholder="Lisa Nilsson" /> | ||
| </label> | ||
|
|
||
| <!-- Email field --> | ||
| <label> | ||
| <span>Email</span> | ||
| <input type="email" name="email" placeholder="[email protected]" /> | ||
| </label> | ||
|
|
||
| <!-- Company field --> | ||
| <label> | ||
| <span>Company Name</span> | ||
| <input type="Company Name" name="Company Name" placeholder="IKEA" /> | ||
| </label> | ||
|
|
||
| <!-- Song field --> | ||
| <label> | ||
| <span>Song</span> | ||
| <select name="Song"> | ||
| <option value="Shura - 2Shy">Shura - 2Shy</option> | ||
| <option value="Griff - Miss Me Too">Griff - Miss Me Too</option> | ||
| <option value="SKAAR - 24">SKAAR - 24</option> | ||
| <option value="Nao - Another Lifetime">Nao - Another Lifetime</option> | ||
| <option value="IDER - Girl">IDER - Girl</option> | ||
| </select> | ||
| </label> | ||
|
Comment on lines
+68
to
+77
There was a problem hiding this comment. Något som jag lyckades hitta i sådär sista sekund innan jag själv lämnade in var att man kan lägga in en till |
||
|
|
||
| <!-- Media format field --> | ||
| <label> | ||
| <span>Media Format</span> | ||
| <select name="Media Format"> | ||
| <option value="TV/Film">TV/Film</option> | ||
| <option value="SoMe">SoMe</option> | ||
| <option value="SoMe">Advertisment</option> | ||
| </select> | ||
| </label> | ||
|
|
||
| <!-- Checkbox --> | ||
| <label id="checkbox-container"> | ||
| <input type="checkbox" name="terms" required /> | ||
| I agree to the | ||
| <a href="https://www.spotify.com/se/legal/end-user-agreement/">Terms & | ||
| Conditions</a> | ||
| </div> | ||
| </label> | ||
|
|
||
| <!-- Submit button --> | ||
| <div class="button-container"> | ||
| <button id="button" type="Submit">Submit Song Request</button> | ||
| </div> | ||
|
|
||
| </fieldset> | ||
| </form> | ||
|
|
||
| <footer>Copyright © 2024 FemScore Media</footer> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
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,189 @@ | ||
| html { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| body { | ||
| background: black; | ||
| font-family: "Roboto", sans-serif; | ||
| font-weight: 700; | ||
| font-style: normal; | ||
| padding-top: 40px; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .header-logo { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .header-logo img { | ||
| width: 8%; | ||
| height: 8%; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| font-size: 2.8rem; | ||
| color: #e3c1fe; | ||
| letter-spacing: 10px; | ||
| padding-bottom: 15px; | ||
| } | ||
|
|
||
| h2 { | ||
| text-align: center; | ||
| font-size: 1.4rem; | ||
| color: white; | ||
| letter-spacing: 8px; | ||
| padding-bottom: 50px; | ||
|
|
||
| } | ||
|
|
||
| #video { | ||
| width: 100%; | ||
| height: 50%; | ||
| object-fit: cover; | ||
| padding-left: 10px; | ||
| padding-right: 10px; | ||
| border-radius: 2%; | ||
| padding-bottom: 50px; | ||
| } | ||
|
|
||
| /* sign up form */ | ||
| h3 { | ||
| text-align: center; | ||
| color: #FAD585; | ||
| padding-bottom: 16px; | ||
| } | ||
|
|
||
| form { | ||
| max-width: 500px; | ||
| border: groove; | ||
| border-width: thin; | ||
| border-color: #FAD585; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| background-color: black; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| fieldset { | ||
| border: none; | ||
| color: white; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| label { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-bottom: 15px; | ||
| padding-bottom: 5px; | ||
| border-bottom: 1px solid #555; | ||
| } | ||
|
|
||
| span { | ||
| width: 30%; | ||
| text-align: right; | ||
| margin-right: 15px; | ||
| font-weight: bold; | ||
| color: #FAD585; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| /* field to fill in information */ | ||
| input { | ||
| width: 100%; | ||
| padding-top: 5px; | ||
| padding-bottom: 5px; | ||
| border: none; | ||
| } | ||
|
|
||
| /* drop down meny boxes */ | ||
| select { | ||
| width: 100%; | ||
| padding: 5px; | ||
| box-sizing: border-box; | ||
| appearance: none; | ||
| border: none; | ||
| } | ||
|
|
||
| ::-webkit-input-placeholder { | ||
| color: #989898; | ||
| } | ||
|
|
||
| ::-moz-placeholder { | ||
| /* Firefox 19+ */ | ||
| color: #c2c2c2; | ||
| } | ||
|
|
||
| :-ms-input-placeholder { | ||
| /* IE 10+ */ | ||
| color: #c2c2c2; | ||
| } | ||
|
|
||
| :-moz-placeholder { | ||
| /* Firefox 18- */ | ||
| color: #c2c2c2; | ||
| } | ||
|
Comment on lines
+114
to
+131
There was a problem hiding this comment. coolt, inte sett det här ännu! Ska googla sen och se vad de gör i din styling så jag kanske lär mig något nytt! :-D |
||
|
|
||
| #checkbox-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| font-weight: bold; | ||
| color: #FAD585 | ||
| } | ||
|
|
||
| #checkbox-container input [type="checkbox"] { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .button-container { | ||
| text-align: center; | ||
| } | ||
|
|
||
| #button { | ||
| background-color: #FAD585; | ||
| color: black; | ||
| font-family: Helvetica, sans-serif; | ||
| padding: 10px, 20px; | ||
| font-size: 0.9rem; | ||
| cursor: pointer; | ||
| border-radius: 8px; | ||
| height: 40px; | ||
| width: 160px; | ||
| } | ||
|
|
||
| footer { | ||
| color: white; | ||
| text-align: center; | ||
| font-size: 1rem; | ||
| padding-top: 50px; | ||
| } | ||
|
|
||
| /* mobile */ | ||
| @media only screen and (min-width: 320px) and (max-width: 767px) { | ||
| html { | ||
| font-size: 8px; | ||
| } | ||
| } | ||
|
|
||
| /*tablet */ | ||
| @media only screen and (min-width: 768px) and (max-width: 1023px) { | ||
| html { | ||
| font-size: 12px; | ||
| } | ||
| } | ||
|
|
||
| /* desktop */ | ||
| @media only screen and (min-width: 1024px) and (max-width: 1600px) { | ||
| html { | ||
| font-size: 16px; | ||
| } | ||
| } | ||
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.
Riktigt snygg video som passade temat perfekt! :-)
Jag tror att om du tar bort "controls" från din videokod så kommer förmodligen "play" och "stop" knapparna att försvinna på videon.