diff --git a/public/Journal font - Freeware License.txt b/public/Journal font - Freeware License.txt new file mode 100644 index 0000000..3d2d88e --- /dev/null +++ b/public/Journal font - Freeware License.txt @@ -0,0 +1,5 @@ +This font was found on the internet and did not come with a license. While we try to make sure that all the fonts on fontsquirrel.com are properly licensed for commercial use, there are many fonts that have either been abandoned by their authors or the authors distribute their fonts without an explicit license. + +It is our opinion that if the unlicensed font is freely available for download from either the original source or from multiple free-font sites then we assume it to be safe to use the font commercially. This is no guarantee of such freedom, but there are so many unlicensed free fonts distributed by primary sources that the intentions must be read that the font is free to use how you like. + +We are not lawyers and don't pretend to be them on TV. Please report any errors/violations you know of. http://www.fontsquirrel.com/contact \ No newline at end of file diff --git a/public/index.html b/public/index.html index b97d5e4..c578de6 100644 --- a/public/index.html +++ b/public/index.html @@ -14,41 +14,50 @@ - + + + + + +
-
+

Webb1 - Presentation

-

Presentation

+
+

Presentation

-
-

Hej,
- jag heter Fredrick Amnehagen och är småbarnspappa. Min fru jobbar nästa heltid och jag jobbar deltid och studerar för att ha tid med barnen och hemmet.

-

Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.

-

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.

-

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.

+ +

Hej,
+ jag heter Fredrick Amnehagen och är småbarnspappa.
+ 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.

+

Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.

+

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.

+

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.

+
-
- +
+
-
+

Arbetsprocessen

-
- -
+
    -
  • Arbetade i Linux, Debian 12.
    • -
  • Började skriva i emacs.
    • +
  • Arbetade i GNU/Linux, Debian 12 - Bookworm.
    • +
  • Började skriva i emacs.
  • Utgick från exempel i på w3schools.com.
    • -
  • Installerade eclipse med webbtillägg för att skriva koden med syntax highlighting.
    • +
  • Installerade eclipse med webbtillägg för att skriva koden med syntax highlighting.
  • Skapade favikoner i gimp och inkscape.
    • -
  • Skapade porträtt i gimp, plockade bakgrundfärgen med den digitala pupletten.
    • +
  • Skapade porträtt i gimp, plockade bakgrundfärgen med den digitala pupletten.
    • +
  • Öppnade min Forgejo server och skapade git projektet, sedan skickade jag upp projektet här.
    • +
  • Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid.
    • +
  • Stajlade texterna med fonter, färger och effekter.
diff --git a/public/journal-webfont.woff b/public/journal-webfont.woff new file mode 100644 index 0000000..c31c09d Binary files /dev/null and b/public/journal-webfont.woff differ diff --git a/public/styles.css b/public/styles.css index d3eaee1..ea7e564 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,19 +1,107 @@ @charset "UTF-8"; +/* Webbfonter */ +@font-face { + font-family: 'Journal'; + src: url('journal-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} + +/* Ändra basegenskaperna av sidan. */ body { - font-family: "Helvetica", Sans-Serif; + font-family: 'Source Sans Pro', Sans-Serif; background-color: #dadada; + color: #101010; +} +h1 { + font-family: 'Montserrat', Sans-Serif; + color: #ffffff; + text-shadow: 2px 2px 4px #000000; +} +h2 { + font-family: 'Montserrat', Sans-Serif; + color: #ffffff; + text-shadow: 2px 2px 4px #000000; +} +p { + +} + +/* Min stil på länkar. */ +a { + color: #000044; + text-decoration: none; + font-weight: bold; +} +a:hover { + color: #0000cc; +} + +/* Min stil för bilden. */ +.portrait-image { + box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +/* Min stil för presentationstexten. */ +.presentation-text { + font-family: "Journal", sans-serif; + font-size: 32px; + color: #212151; } /* Definition av mitt rutnät för sidans layout. */ /* Behållaren för cellerna, tabellen. */ .grid-container { display: grid; - column-gap: 0px; + column-gap: 25px; row-gap: 0px; + + max-width: 900px; /* max-width of the layout */ + margin: 0 auto; /* center in the viewport */ } /* Gemensant för cellerna i tabellen. */ .grid-item { display: grid; -} \ No newline at end of file +} + +/* Layout, tilldelning av områdesnamn. */ +.header { + grid-area: header; +} +.content { + grid-area: content; +} +.image { + grid-area: image; +} +.footer { + grid-area: footer; +} + +/* Standard layout, för små fönster/skärmar. */ +.grid-container { + grid-template-areas: + "header" + "image" + "content" + "footer" +} + +/* Layout som väljs automatisk när det finns plats. */ +@media only screen and (min-width: 700px) { + .grid-container { + grid-template-areas: + "header header header" + "content content image" + "footer footer footer" + } + + .image { + position: relative; + top: 40px; + } +} +