Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Projects
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Simon Dahl
Projects
Commits
839c4748
Commit
839c4748
authored
6 months ago
by
Simon Dahl
Browse files
Options
Downloads
Patches
Plain Diff
Koden för min hemsida
parent
52d81230
No related branches found
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
Hemsida/hem3.html
+54
-0
54 additions, 0 deletions
Hemsida/hem3.html
Hemsida/script.js
+43
-0
43 additions, 0 deletions
Hemsida/script.js
Hemsida/style2.css
+251
-0
251 additions, 0 deletions
Hemsida/style2.css
with
348 additions
and
0 deletions
Hemsida/hem3.html
0 → 100644
+
54
−
0
View file @
839c4748
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
Simon Dahl
</title>
<link
rel=
"stylesheet"
href=
"style2.css"
>
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
>
</head>
<body>
<header>
<nav
class=
"social-nav"
>
<a
href=
"https://github.com"
target=
"_blank"
class=
"social-icon github"
><i
class=
"fab fa-github"
></i></a>
<a
href=
"https://www.linkedin.com/in/simon-dahl-1993572a1"
target=
"_blank"
class=
"social-icon linkedin"
><i
class=
"fab fa-linkedin"
></i></a>
</nav>
</header>
<div
class=
"spacer2"
></div>
<main>
<section
class=
"intro"
>
<p
class=
"greeting"
>
Hej, jag heter
</p>
<h1
class=
"name"
>
Simon Dahl.
</h1>
<h2
class=
"tagline"
>
Student i Linköping
</h2>
<p
class=
"description"
>
Awkdjawjidankdawd bla bla bla biografi kanske?
</p>
<a
href=
"mailto:simda545@student.liu.se"
class=
"contact-btn"
>
Ta kontakt
</a>
<div
class=
"scroll-down-indicator"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</section>
<!-- Ny sektion för bilder -->
<div
class=
"spacer"
></div>
<section
class=
"gallery"
>
<h2>
Mina Projekt
</h2>
<div
class=
"images"
>
<img
src=
"wip.png"
alt=
"Image 1"
>
<img
src=
"wip.png"
alt=
"Image 2"
>
<img
src=
"wip.png"
alt=
"Image 3"
>
<!-- Lägg till fler bilder här -->
</div>
<div
class=
"spacer2"
></div>
</section>
</main>
<footer>
<div
class=
"email"
>
simda545@student.liu.se
</div>
</footer>
<script
src=
"script.js"
></script>
</body>
</html>
This diff is collapsed.
Click to expand it.
Hemsida/script.js
0 → 100644
+
43
−
0
View file @
839c4748
const
button
=
document
.
querySelector
(
"
.contact-btn
"
);
let
mouseX
=
0
,
mouseY
=
0
;
let
buttonX
=
window
.
innerWidth
/
2
,
buttonY
=
window
.
innerHeight
/
2
;
const
speed
=
0.007
;
document
.
addEventListener
(
"
mousemove
"
,
(
e
)
=>
{
mouseX
=
e
.
pageX
;
mouseY
=
e
.
pageY
;
});
function
animateButton
()
{
buttonX
+=
(
mouseX
-
buttonX
)
*
speed
;
buttonY
+=
(
mouseY
-
buttonY
)
*
speed
;
button
.
style
.
left
=
`
${
buttonX
}
px`
;
button
.
style
.
top
=
`
${
buttonY
}
px`
;
requestAnimationFrame
(
animateButton
);
}
animateButton
();
/* Stjärnor-funktion */
const
dropletContainer
=
document
.
querySelector
(
'
.droplet-container
'
);
function
createStar
()
{
const
star
=
document
.
createElement
(
'
div
'
);
star
.
classList
.
add
(
'
droplet
'
);
// Slumpmässig horisontell position
star
.
style
.
left
=
`
${
Math
.
random
()
*
100
}
vw`
;
// Slumpmässig fallhastighet och fördröjning för variation
star
.
style
.
animationDuration
=
`
${
Math
.
random
()
*
3
+
2
}
s`
;
// 2-5 sekunder
star
.
style
.
animationDelay
=
`
${
Math
.
random
()
*
2
}
s`
;
// 0-2 sekunders fördröjning
dropletContainer
.
appendChild
(
star
);
// Ta bort stjärnan efter animationen är klar
star
.
addEventListener
(
'
animationend
'
,
()
=>
{
star
.
remove
();
});
}
// Skapa nya stjärnor med intervall
setInterval
(
createStar
,
300
);
// En ny stjärna var 300 ms
This diff is collapsed.
Click to expand it.
Hemsida/style2.css
0 → 100644
+
251
−
0
View file @
839c4748
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
}
/* Social Media Links */
.social-nav
{
position
:
fixed
;
width
:
100%
;
/* Se till att ikonerna täcker hela bredden */
height
:
100%
;
/* Se till att ikonerna täcker hela höjden */
top
:
0
;
left
:
0
;
pointer-events
:
none
;
/* Låt bara ikonerna vara klickbara */
}
/* Gemensam stil för båda ikonerna */
.social-icon
{
width
:
80px
;
/* Storlek på ikonerna */
height
:
80px
;
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
color
:
#EEE2DC
;
/* Ikonfärg */
font-size
:
2rem
;
text-decoration
:
none
;
background-color
:
#AC3B61
;
/* Mörkrosa bakgrund */
pointer-events
:
auto
;
/* Gör ikonerna klickbara */
transition
:
background-color
0.3s
ease
,
transform
0.3s
ease
;
}
/* GitHub-ikonen i övre vänstra hörnet */
.github
{
position
:
absolute
;
top
:
0
;
left
:
0
;
clip-path
:
polygon
(
0
0
,
100%
0
,
100%
80%
,
20%
100%
,
0
100%
);
/* "Notched corner" i övre vänstra hörnet */
}
/* LinkedIn-ikonen i övre högra hörnet med speglad form */
.linkedin
{
position
:
absolute
;
top
:
0
;
right
:
0
;
clip-path
:
polygon
(
100%
0
,
100%
100%
,
80%
100%
,
0
80%
,
0
0
);
/* Speglad "notched corner" i övre högra hörnet */
}
/* Hover-effekt */
.social-icon
:hover
{
background-color
:
#123C69
;
/* Mörkblå vid hovring */
transform
:
scale
(
1.1
);
/* Lätt förstoring vid hovring */
}
.greeting
{
color
:
#AC3B61
;
/* Mörkrosa för hälsningstext */
font-size
:
1rem
;
}
.name
{
font-size
:
3rem
;
color
:
#123C69
;
/* Mörkblå för namn */
}
.tagline
{
font-size
:
1.8rem
;
color
:
#AC3B61
;
/* Mörkrosa för tagline */
}
.description
{
margin
:
20px
0
;
font-size
:
1rem
;
color
:
#123C69
;
/* Mörkblå för beskrivningstext */
}
/* Pratbubbla-knapp */
/* Ta Kontakt-knapp som en cirkel */
.contact-btn
{
display
:
inline-block
;
padding
:
15px
;
/* Öka padding för att göra knappen mer cirkulär */
color
:
#EEE2DC
;
/* Textfärg (mycket ljus beige) */
background-color
:
#123C69
;
/* Bakgrundsfärg (grålila) */
border
:
1px
solid
#EDC7B7
;
/* Ljusbeige ram */
border-radius
:
50%
;
/* Gör knappen cirkulär */
position
:
fixed
;
z-index
:
1
;
opacity
:
0.95
;
/* Mindre genomskinlighet */
text-align
:
center
;
transition
:
opacity
0.3s
ease
;
box-shadow
:
0px
0px
10px
rgba
(
172
,
59
,
97
,
0.3
);
/* Rosa skugga */
font-size
:
0.9rem
;
/* Minska textstorleken för att passa cirkeln */
}
/* Undertext för Ta Kontakt-knappen (dölj undertexten i cirkeln för att undvika platsbrist) */
.contact-btn
.subtext
{
display
:
none
;
/* Dölj undertexten */
}
/* Hover-effekt */
.contact-btn
:hover
{
opacity
:
1
;
/* Full opacitet vid hovring */
}
/* Stjärncontainer */
.droplet-container
{
position
:
fixed
;
top
:
0
;
left
:
0
;
width
:
100vw
;
height
:
100vh
;
overflow
:
hidden
;
pointer-events
:
none
;
z-index
:
10000
;
/* Högre z-index för att säkerställa att stjärnorna syns */
}
/* Stjärnor som faller */
.droplet
{
position
:
absolute
;
top
:
-5px
;
width
:
4px
;
height
:
4px
;
background-color
:
#ff0062
;
/* Använd en färg som syns mot bakgrunden */
border-radius
:
50%
;
opacity
:
1
;
/* Sätt opacity till 1 för att säkerställa synlighet */
animation
:
fall
linear
infinite
;
}
@keyframes
fall
{
0
%
{
transform
:
translateY
(
0
)
translateX
(
0
);
opacity
:
1
;
}
100
%
{
transform
:
translateY
(
100vh
)
translateX
(
10vw
);
/* Diagonal rörelse */
opacity
:
0
;
/* Gradvis försvinnande */
}
}
/* Footer Email */
footer
{
position
:
fixed
;
bottom
:
20px
;
right
:
20px
;
}
.email
{
writing-mode
:
vertical-rl
;
color
:
#123C69
;
/* Mörkblå för e-postadress */
}
/* Tillåt scrollning */
body
{
font-family
:
Arial
,
sans-serif
;
background-color
:
#EEE2DC
;
color
:
#123C69
;
display
:
flex
;
flex-direction
:
column
;
min-height
:
100vh
;
padding
:
20px
;
overflow-y
:
auto
;
/* Tillåt vertikal scrollning */
scroll-behavior
:
smooth
;
}
/* Main Content */
main
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
min-height
:
100vh
;
/* Gör så att main tar upp hela skärmhöjden */
justify-content
:
center
;
/* Vertikal centrering för .intro */
}
/* Intro-sektion */
.intro
{
max-width
:
600px
;
text-align
:
left
;
margin-bottom
:
0
;
/* Ta bort extra marginaler som kan skjuta upp texten */
width
:
100%
;
}
/* Galleri-sektion */
.gallery
{
width
:
100%
;
text-align
:
center
;
margin-top
:
0
;
/* Ingen extra margin behövs, avståndet skapas av .spacer */
}
.gallery
h2
{
font-size
:
2rem
;
color
:
#AC3B61
;
margin-bottom
:
20px
;
}
/* Bilder i galleriet */
.images
{
display
:
flex
;
flex-wrap
:
wrap
;
gap
:
15px
;
justify-content
:
center
;
}
.images
img
{
width
:
300px
;
height
:
200px
;
object-fit
:
cover
;
border-radius
:
10px
;
box-shadow
:
0px
4px
8px
rgba
(
0
,
0
,
0
,
0.2
);
transition
:
transform
0.3s
all
ease-in-out
;
}
/* Hover-effekt på bilder */
.images
img
:hover
{
transform
:
scale
(
1.5
);
/* Lätt förstoring vid hovring */
}
/* Dummy-element för att skapa avstånd */
.spacer
{
height
:
400px
;
/* Skapar avståndet mellan intro och galleri */
width
:
100%
;
}
.spacer2
{
height
:
36vh
;
/* Skapar avståndet mellan intro och galleri */
width
:
100%
;
}
/* Skrolla-ner-pil */
.scroll-down-indicator
{
text-align
:
center
;
font-size
:
2.5rem
;
color
:
#AC3B61
;
/* Mörkrosa färg för pilen */
position
:
absolute
;
bottom
:
10vh
;
left
:
50%
;
transform
:
translateX
(
-50%
);
animation
:
bounce
2s
infinite
;
}
/* Enkel studs-animation för pilen */
@keyframes
bounce
{
0
%,
100
%
{
transform
:
translateX
(
-50%
)
translateY
(
0
);
}
50
%
{
transform
:
translateX
(
-50%
)
translateY
(
10px
);
}
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment