Skip to content

Mikaela Sturk business site (Maliziosos) #66

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.

Sign up for GitHub

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

Open
mikaelasturk wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Mikaela Sturk business site (Maliziosos) #66

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4eab4a1
first commit
mikaelasturk Sep 10, 2025
e1c9d7b
site not ready, push for PR
mikaelasturk Sep 19, 2025
684e447
fixed bug in css
mikaelasturk Sep 19, 2025
970f2a9
Last commit, hand in
mikaelasturk Sep 21, 2025
cda73ca
fixed bug in grid
mikaelasturk Sep 21, 2025
01db83a
fixed bug in ham-menu, added shadow to cards
mikaelasturk Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Malizioso</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

<header>
<a href="index.html"> <img src="img/cropped-logo-200px.jpg"
alt="logga med tre hundar på och kennelnamnet Malizioso"></a>
<div class="topnav">
<a href="index.html">Hem</a>
<a href="kennel.html">Kennel</a>
<a href="puppies.html">Valpar</a>
<a href="contact.html">Kontakt</a>
</div>
</header>
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great organizing of a navigation, very clean!


<main>
<h2>Kontakta oss</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quae distinctio exercitationem quam accusamus. Dolor, consectetur non, tempore dignissimos beatae asperiores suscipit autem optio amet esse voluptatem nobis vel dicta. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, rerum quidem. Tempore reiciendis laudantium at eveniet doloremque omnis quam velit totam, fuga amet, quibusdam dolorum magni debitis placeat ex enim!</p>
</main>

<footer>
<a target="_blank" href="https://instagram.com">Instagram</a>
<a target="_blank" href="https://facebook.com">Facebook</a>
<a target="_blank" href="https://skk.se">SKK</a>
<a target="_blank" href="https://lagottoklubben.se">SLRK</a>
</footer>
Comment on lines +33 to +38
Copy link

@KausarShangareeva KausarShangareeva Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 🌟 The footer is clean and minimalistic — I really like the consistent structure of the links and how you’ve used target="_blank" to open them in new tabs. It’s simple, readable, and functional.

</body>

</html>
Binary file added img/cropped-logo-200px.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/header.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 149 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Malizioso</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<div class="topnav">

<a href="index.html" class="button-nav">Hem</a>
<a href="kennel.html" class="button-nav">Kennel</a>
<a href="puppies.html" class="button-nav">Valpar</a>
<a href="contact.html" class="button-nav">Kontakt</a>

</div>

<a href="index.html">
<img class= "hero-image"
src="img/header.png"
alt="logga med tre hundar på och kennelnamnet Malizioso">
</a>

</header>

<main>
<h1>Välkommen till Maliziosos kennel!</h1>

<h2>På vår hemsida kan läsa om uppkommande kullar, vår uppfödning och andra nyheter!</h2>

<section class="card-grid">
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a very clean use of semantics, good work!


<article class="card">

<h3>Nyheter</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto velit voluptates, facilis labore eligendi dolorum non, illo, suscipit placeat nisi illum soluta alias? Neque dolor accusamus quas, distinctio atque modi!
</p>

</article>

<article class="card">

<h3>Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus perspiciatis expedita corrupti aliquid tempore recusandae porro iste quae accusantium, ea qui, repudiandae minima dolorem tempora non consequatur fugit, sit cum?
</p>

</article>

<article class="card">

<h3>Text</h3>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione libero est at iure voluptatem vel similique
maiores praesentium sequi temporibus! Error mollitia repellendus ipsa ut praesentium cum sapiente, perferendis
dolore.
</p>

</article>

<article class="card">

<h3>Text</h3>

<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, suscipit explicabo. Debitis tenetur corporis
temporibus laborum pariatur facilis, recusandae voluptatum voluptas itaque voluptates fugit praesentium qui, x
explicabo officiis molestiae nam.
</p>

</article>

</section>

</main>

<form action="">
<h2>Intresseanmälan Valp</h2>

<p>Vi väljer ut våra köpare med omsorg. För oss är det viktigt att våra hjärtan hamnar i rätt familj.</p>

<label>

<span>För- och efternamn</span>
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering why you chose to add span inside of label? Maybe I need to consider it too:)

<input
type="text"
placeholder="Namn"
required>

</label>

<label>
<span>Hemort</span>
<input type="text" placeholder="Ekerö" required>
</label>

<label>
<span>Mobilnummer</span>
<input type="tel" pattern="07[0-9]{1}-[0-9]{3} [0-9]{2} [0-9]{2}" required>
</label>

<label>
<span>Mailadress</span>
<input type="email" placeholder="[email protected]" required>
</label>

<label>
<span>Hur har ni planerat för att lösa första tiden hemma?</span>
<input type="text" placeholder="T.ex Jag har semester..." required>
</label>

<label>
<span>Övriga kommentarer</span>
<input type="text" placeholder="...">
</label>

<label>
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty label is a bit confusing since it's unclear what this label is for, would be good to specify it maybe. All other inputs seems very clear, and great that they have placeholders making it easier for users!

<span></span>
<input type="text" placeholder="">
</label>


</form>

<footer>
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, very clean and easy to follow structure, good job, keep it up!


<div class="bottom-nav">
<a target="_blank" href="https://instagram.com">Instagram</a>
<a target="_blank" href="https://facebook.com">Facebook</a>
<a target="_blank" href="https://skk.se">SKK</a>
<a target="_blank" href="https://lagottoklubben.se">SLRK</a>
</div>

<copyright>Copyright &copy; Mikaela Sturk</copyright>
</footer>

</body>

</html>
42 changes: 42 additions & 0 deletions kennel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Malizioso</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

<header>
<a href="index.html"> <img src="img/cropped-logo-200px.jpg"
alt="logga med tre hundar på och kennelnamnet Malizioso"></a>
<div class="topnav">
<a href="index.html">Hem</a>
<a href="kennel.html">Kennel</a>
<a href="puppies.html">Valpar</a>
<a href="contact.html">Kontakt</a>
</div>
</header>

<main>
<h2>Kennel</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quae distinctio exercitationem quam accusamus. Dolor, consectetur non, tempore dignissimos beatae asperiores suscipit autem optio amet esse voluptatem nobis vel dicta.
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ad nobis quia autem praesentium totam, corrupti optio dicta dolor eveniet repellendus harum odio beatae, quis temporibus vero veritatis delectus facere.</p>
</main>

<footer>
<a target="_blank" href="https://instagram.com">Instagram</a>
<a target="_blank" href="https://facebook.com">Facebook</a>
<a target="_blank" href="https://skk.se">SKK</a>
<a target="_blank" href="https://lagottoklubben.se">SLRK</a>
</footer>
</body>

</html>
Empty file added puppies-previouslitters.html
View file
Open in desktop
Empty file.
Empty file added puppies-previouslittersnow.html
View file
Open in desktop
Empty file.
48 changes: 48 additions & 0 deletions puppies.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Malizioso</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

<header>
<a href="index.html"> <img src="img/cropped-logo-200px.jpg"
alt="logga med tre hundar på och kennelnamnet Malizioso"></a>
<div class="topnav">
<a href="index.html">Hem</a>
<a href="kennel.html">Kennel</a>
<a href="puppies.html">Valpar</a>
<a href="contact.html">Kontakt</a>
</div>
</header>

<main>
<h2>Tillgängliga valpar</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quae distinctio exercitationem quam accusamus.
Dolor, consectetur non, tempore dignissimos beatae asperiores suscipit autem optio amet esse voluptatem nobis vel
dicta.

<br>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus saepe vitae inventore beatae facilis corrupti ad
voluptatem et. Delectus necessitatibus voluptates voluptas ad vitae magni quaerat quibusdam dicta, nulla eius!
</p>
</main>

<footer>
<a target="_blank" href="https://instagram.com">Instagram</a>
<a target="_blank" href="https://facebook.com">Facebook</a>
<a target="_blank" href="https://skk.se">SKK</a>
<a target="_blank" href="https://lagottoklubben.se">SLRK</a>
</footer>
</body>

</html>
Empty file added results.html
View file
Open in desktop
Empty file.
Empty file added script.js
View file
Open in desktop
Empty file.
95 changes: 95 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*Mobile <667
Tablet >688 <1024
Desktop >1024*/

body {
height: 100%;
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure you need to give the height to the body, it is usually set on full height of the content by default, so I'd suggest to just save some time and code lines:)

max-width: 100%;
margin: 0;
box-sizing: border-box;
}

body {
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's great that you have thought about a lot of style details for everything on the page! Also, it is not necessary to repeat body twice, it should be fine to write everything under the same selector

font-family: sans-serif;
line-height: 1.5;
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line height 1.5 for the paragraph is great and looks very good on your page, and for headers the common practice is to set a bit less, but you can overwrite it in the headers styling, of course

background-color: #6B8E62;
/*background-color: #FDFBF7;*/
color: #2E2E2E;
text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
/* background-color: ;
color: ; */
display: flex;
flex-direction: column;
}

.topnav {
padding: 30px 10px;
}

.button-nav {
background-color: #6B8E62;
border-radius: 3%;
padding: 20px;
margin: 0 0 0px;
}


.hero-image {
width: 100%;
height: auto;
max-width: 700px;
}

h1 {
font-size: 1.5rem;
margin: 20px 10px 0 10px;
}

h2 {
font-size: 1rem;
margin: 10px;
padding-bottom: 20px;
}

h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #6B8E62;
}

main {
flex: 1;
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great card greed!

background-color: #6B8E62;
gap: 20px;
padding: 20px;

}

.card {
background-color: #FDFBF7;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


Copy link

@Demijuls Demijuls Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just really clean and well-organized file, keep it up!:)

/*Tablet responsive design*/
@media (min-width: 667px) and (max-width: 1024px) {

}

/*Desktop responsive design*/
@media (min-width: 1025px) {

}