-
Notifications
You must be signed in to change notification settings - Fork 471
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Project-business-site av Emelie Nyberg Kedert #365
Open
EmelieNyberg
wants to merge
6
commits into
Technigo:master
Choose a base branch
from
EmelieNyberg:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
820cc46
första utkast på hemsidan
EmelieNyberg 88da2e2
now with form
EmelieNyberg 00d9f43
some more styling
EmelieNyberg cb25baa
webpage done
EmelieNyberg e90f6ca
with read me file
EmelieNyberg 938dbbc
updated read me file
EmelieNyberg File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,35 @@ | ||
# 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. | ||
In this assignment, I was asked to create a business site with a hero picture/video and a sign up form. I chose to make a fictitious music streaming service (like Spotify) called Stellar Sound. | ||
|
||
## 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? | ||
How I Approached the Problem: | ||
|
||
To solve the problem, I started by carefully analyzing the requirements and breaking them down into smaller tasks. I created a plan on paper that outlined each step I needed to take, from setting up the basic structure to integrating key features. I also inspected other websites (such as Confetti and Spotify) to see where and when they had used different HTML tags. | ||
|
||
Tools and Techniques I Used: | ||
|
||
I used HTML and CSS to develop the website. My approach involved using both Grid and Flexbox in CSS to ensure that the site was both user-friendly and responsive. I also used Media Queries to make it look good on diffrent devices. This time, I only used Media Queries to make the website look good on mobile phones, as I felt the website worked just as well on desktop screens as on tablets. | ||
|
||
Planning Process: | ||
|
||
I began by sketching the layout and features of the site on paper. Once the structure was clear, I moved on to designing the look and planning how to structure the code, with a focus on core functionality first. By continuously testing in VS Code and checking the results in the browser, I was able to improve functionality and refine the design. | ||
|
||
What I Would Do Next If I Had More Time: | ||
|
||
With more time, I would focus on enhancing the user experience by adding more interactive elements and further refining the design. I would also explore the possibility of adding a validation to my password element saying "min 8 characters". One thing I couldn't achieve was using flexbox in mobile size to ensure that the list items in the <footer> were arranged with two items per row. In other words, I wanted it to look like this: | ||
|
||
Product Contact us | ||
Legal Language | ||
|
||
and not: | ||
|
||
Product Contact us Legal | ||
Language | ||
|
||
Maybe you have a suggestion how to solve this? :-D | ||
|
||
## 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://stellarsound.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.
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,199 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Business Site</title> | ||
<!-- dont forget to add a css file and link it here! --> | ||
</head> | ||
<body> | ||
<h1>Business name 🌻</h1> | ||
|
||
<!-- video or image as a header is cool :) --> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Stellar Sound</title> | ||
<link rel="stylesheet" href="./style.css" /> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | ||
<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=Quicksand:[email protected]&family=Silkscreen&display=swap" | ||
rel="stylesheet"> | ||
|
||
<!-- Signup form --> | ||
</head> | ||
|
||
</body> | ||
</html> | ||
<body> | ||
<div class="hero"> | ||
<video autoplay muted loop class="hero-video"> | ||
<source src="assets/video.mp4" type="video/mp4"> | ||
Your browser does not support the video tag. | ||
</video> | ||
|
||
<header class="navbar"> | ||
<div class="navbar-logo"> | ||
<img src="assets/Stellarsound.png" alt="Stellar Sound Logo"> | ||
</div> | ||
|
||
<div class="navbar-menu"> | ||
<ul> | ||
<a class="navbar-link" href="https://www.google.se/"> | ||
MUSIC | ||
</a> | ||
|
||
<a class="navbar-link" href="https://www.google.se/"> | ||
PRICING | ||
</a> | ||
|
||
<a class="navbar-link" href="https://www.google.se/"> | ||
ABOUT US | ||
</a> | ||
</ul> | ||
</div> | ||
|
||
<div class="navbar-login"> | ||
<button class="login-button">LOG IN</button> | ||
</div> | ||
|
||
<div class="hamburger-menu"> | ||
<i class="fa-solid fa-bars"></i> | ||
</div> | ||
</header> | ||
</div> | ||
|
||
<div class="signup signup-info"> | ||
<h2>SIGN UP AND START LISTENING</h2> | ||
|
||
<img src="assets/Untitled_Artwork 5.png" alt="astronaut"> | ||
</div> | ||
|
||
<div class="signup signup-form"> | ||
<form action="https://httpbin.org/anything" method="post"> | ||
<h2>CREATE AN ACCOUNT</h2> | ||
|
||
<label class="signup-form-label"> | ||
<span>Name</span> | ||
<input type="text" name="name" required> | ||
</label> | ||
|
||
<label class="signup-form-label"> | ||
<span>Email</span> | ||
<input type="email" name="email" required> | ||
</label> | ||
|
||
<label class="signup-form-label"> | ||
<span>Country</span> | ||
<select name="country" required> | ||
<option value="" disabled selected></option> | ||
<option value="SE">Sweden</option> | ||
<option value="NO">Norway</option> | ||
<option value="DK">Denmark</option> | ||
<option value="FI">Finland</option> | ||
</select> | ||
</label> | ||
|
||
<label class="signup-form-label"> | ||
<span>Password</span> | ||
<input type="password" name="password" required> | ||
</label> | ||
|
||
<label class="signup-form-label"> | ||
<input type="checkbox" name="terms-and-conditions" required> | ||
I accept the terms and conditions | ||
</label> | ||
|
||
<button type="submit" class="submit-button">Save</button> | ||
</form> | ||
</div> | ||
|
||
<footer> | ||
<div class="business-info"> | ||
<ul class="footer-column"> | ||
<label class="footer-column-label"> | ||
Product | ||
</label> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Features | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Pricing | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Business | ||
</a> | ||
</li> | ||
</ul> | ||
|
||
<ul class="footer-column"> | ||
<label class="footer-column-label"> | ||
Contact us | ||
</label> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Help center | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Blog | ||
</a> | ||
</li> | ||
</ul> | ||
|
||
<ul class="footer-column"> | ||
<label class="footer-column-label"> | ||
Legal | ||
</label> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Terms of Use | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Privacy Policy | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
GDPR | ||
</a> | ||
</li> | ||
</ul> | ||
|
||
<ul class="footer-column"> | ||
<label class="footer-column-label"> | ||
Language | ||
</label> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
Svenska | ||
</a> | ||
</li> | ||
|
||
<li class="footer-column-item"> | ||
<a class="footer-column-item-link" href="https://www.google.com/"> | ||
English | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
|
||
<div class="personal-info"> | ||
<img src="assets/Stellarsound.png" alt="stellar-music-logo"> | ||
|
||
<div class="personal-info-items"> | ||
<h4><i class="fa-brands fa-github"></i> EmelieNyberg</h4> | ||
<h4><i class="fa-brands fa-linkedin"></i> Emelie Nyberg Kedert</h4> | ||
<h4>© Emelie Nyberg Kedert 2024</h4> | ||
</div> | ||
</div> | ||
</footer> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.
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.
Hmm, maybe you could play around with the `column-gap? property? 👀