alex-mp4 / bildterapihuset_redesign

Welcome to my profile! I go by Alex... but you can call me anytime. Wait, no... please don't leave!

About Me

⁉️

• I am a student from a moderately sized city in northern Sweden.
• Currently affiliated with NTI and their fourth-year programme.

‼️

• UI & UX design is my bread and butter. That is, if the bread is moldy and the butter out-of-date.
• Figma and VSCode is also my bread and butter, but they are comparatively fine.

🆎

• You can contact me directly on LinkedIn.
• Or, check out my portfolio.

Spotify

bildterapihuset_redesign's Issues

Knappar

bildterapihuset_redesign/docs/index.html

Lines 54 to 57 in 2e542fd

	<div class="button">
	<a href="omoss.html"><button>Information</button></a>
	<a href="boka.html"><button>Boka nu</button></a>
	</div>

De här knapparna syns inte på desktop, men dyker upp i mobil.
De ställer till det lite med valideringen av sidan och anledningen är att du har knappar i länkar.

Välj antingen eller, i det här fallet är det länkar till andra sidor, då använder du a elementet.
Sedan kan du styla a elementet som en knapp om det är effekt du önskar, https://jensnti.github.io/wu-exempel/knappar.html

label

bildterapihuset_redesign/docs/boka.html

Lines 42 to 44 in eecb896

	<label title="date" for="date">
	<input id="date" title="date" type="date" name="date" value="">
	</label>

<label for="name">Skriv ditt namn</label><input type="text" name="name">

Var vaksam med dina selektorer

bildterapihuset_redesign/docs/css/style.css

Lines 396 to 417 in eecb896

	.container2 ul {
	list-style: none;
	}
	.container2 ul li::before {
	content: "• ";
	color: #FFBA3B;
	}
	.container2 {
	background-color: #403B30;
	border-radius: 6px;
	width: 50%;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	margin-left: 2rem;
	box-shadow: 3px 3px 2px grey;
	line-height: 2.5rem;
	}
	.container2 li {

Du har inte nödvändigtvis gjort fel, men selektorerna kan påverka mer än du önskar.
Kolla detta dokument om du vill lära dig mer https://www.w3schools.com/cssref/css_selectors.asp

Rörigt

bildterapihuset_redesign/docs/kontaktadress.html

Lines 14 to 32 in eecb896

	<header>
	<nav>
	<ul>
	<div class="space">
	<div>
	<a href="index.html"><div class="homeicon">
	<img src="assets/icons/foundation_black_24dp.svg" alt="Logo">
	</div></a>
	</div>
	<ul class="flex">
	<li><a href="boka.html"><img src="assets/icons/bookmark.svg" alt="">Boka</a></li>
	<li><a href="aktuellt.html"><img src="assets/icons/clock-outline.svg" alt="">Aktuellt</a></li>
	<li><a href="omoss.html"><img src="assets/icons/account-multiple.svg" alt="">Om oss</a></li>
	<li><a href="kontaktadress.html"><img src="assets/icons/earth.svg" alt="">Kontakt och adress</a></li>
	</ul>
	</div>
	</ul>
	</nav>
	</header>

Rörigt med taggarna. Se till att du indenterar koden så blir det lättare att se vars det börjar och slutar.
Du har även tillgång till automatisk formatering i VSCode, högerklicka och formatera eller tryck shift+alt+F

UL children

bildterapihuset_redesign/docs/index.html

Lines 16 to 30 in 2e542fd

	<ul>
	<div class="space">
	<div>
	<a href="index.html"><div class="homeicon">
	<img src="assets/icons/foundation_black_24dp.svg" alt="Logo">
	</div></a>
	</div>
	<div class="flex">
	<li><a href="boka.html"><img src="assets/icons/bookmark.svg" alt="">Boka</a></li>
	<li><a href="aktuellt.html"><img src="assets/icons/clock-outline.svg" alt="">Aktuellt</a></li>
	<li><a href="omoss.html"><img src="assets/icons/account-multiple.svg" alt="">Om oss</a></li>
	<li><a href="kontaktadress.html"><img src="assets/icons/earth.svg" alt="">Kontakt och adress</a></li>
	</div>
	</div>
	</ul>

Som barn till ul taggen får du enbart ha li taggar.
Du måste därför strukturera om menyn.

Om det är flex du önskar på listan, så gör ul elementet till display: flex

Se exemplet här https://jensnti.github.io/wu-exempel/navigation.html