Webb1/html-site
Webb1
/
html-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More styling, started another text note 

- Added more effects. Tried some and then removed.
- Added another postit note.
This commit is contained in:
Fredrick Amnehagen 2024-03-19 15:17:19 +01:00
parent 5f4a14b52f
commit 1ab6d00176
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -20,7 +20,7 @@
<link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet">
<!-- dev voodoo magic line to refresh the page every 5 seconds. Probably very old. --> <!-- dev voodoo magic line to refresh the page every 5 seconds. Probably very old. -->
<meta http-equiv="refresh" content="5"> <meta http-equiv="refresh" content="10">
</head> </head>
<body> <body>
<div class="grid-container"> <div class="grid-container">
@ -38,13 +38,19 @@
Min fru jobbar nästan heltid som tandsköterska och jag jobbar deltid med serverunderhåll samt studerar för att ha tid med barnen och hemmet.</p> Min fru jobbar nästan heltid som tandsköterska och jag jobbar deltid med serverunderhåll samt studerar för att ha tid med barnen och hemmet.</p>
<p>Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.</p> <p>Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.</p>
<p>Målet med mina studier är att hålla mig up-to-date inom IT-världen så att jag kan gå upp i tid när barnen är äldre och fortfarande vara attraktiv på arbetsmarknaden.</p> <p>Målet med mina studier är att hålla mig up-to-date inom IT-världen så att jag kan gå upp i tid när barnen är äldre och fortfarande vara attraktiv på arbetsmarknaden.</p>
<p>Mål, bli bättre på CSS och kanske JS (om det kommer i första kursen), jag kan ju alltid arbeta lite på egen hand. Siktet är fäst på högt betyg, A.</p> <p>Mål, bli bättre på CSS och kanske JS (om det kommer i första kursen), jag kan ju alltid arbeta lite på egen hand. Siktet är fäst på högt betyg, A .</p>
</div> </div>
</div> </div>
</section> </section>
<section class="grid-item image"> <section class="grid-item image">
<img src="fredrick.jpg" class="portrait-image"/> <img src="fredrick.jpg" class="portrait-image"/>
<div class="presentation-box extra-note">
<div class="presentation-text">
<p>Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.</p>
</div>
</div>
</section> </section>
<section class="grid-item content2"> <section class="grid-item content2">

15
public/styles.css
View File

@ -24,11 +24,8 @@ h2 {
color: #ffffff; color: #ffffff;
text-shadow: 2px 2px 4px #000000; text-shadow: 2px 2px 4px #000000;
} }
p {
}
/* Spacing i listan, mycket jobb för att lösa denna snyggt. */
li:not(:last-child) { li:not(:last-child) {
margin-bottom: 3px; margin-bottom: 3px;
} }
@ -107,8 +104,8 @@ a:hover {
.grid-container { .grid-container {
grid-template-areas: grid-template-areas:
"header" "header"
"image"
"content" "content"
"image"
"content2" "content2"
"footer"; "footer";
padding: 0px; padding: 0px;
@ -156,6 +153,8 @@ a:hover {
background-color: #f3ee9e; background-color: #f3ee9e;
border-radius: 3px; border-radius: 3px;
box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotate(-1deg);
} }
/* Min coolare stil för presentationstexten. */ /* Min coolare stil för presentationstexten. */
@ -165,5 +164,11 @@ a:hover {
color: #212151; color: #212151;
margin: 15px; margin: 15px;
} }
/* Begränsande stil för extra postit lapp. */
.extra-note {
max-width: 320px;
transform: rotate(3deg);
}
} }