diff --git a/public/bg-notebook.jpg b/public/bg-notebook.jpg new file mode 100644 index 0000000..4faac2b Binary files /dev/null and b/public/bg-notebook.jpg differ diff --git a/public/bg-paper-yellowed.jpg b/public/bg-paper-yellowed.jpg new file mode 100644 index 0000000..818a8f8 Binary files /dev/null and b/public/bg-paper-yellowed.jpg differ diff --git a/public/bg.jpg b/public/bg.jpg new file mode 100644 index 0000000..09bcdae Binary files /dev/null and b/public/bg.jpg differ diff --git a/public/index.html b/public/index.html index c578de6..8d5fb0c 100644 --- a/public/index.html +++ b/public/index.html @@ -24,28 +24,30 @@
-
+

Webb1 - Presentation

-
+ -
+

Presentation

- -

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.

- -
+
+
+

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

    @@ -59,8 +61,11 @@
  • Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid.
  • Stajlade texterna med fonter, färger och effekter.
-
+ +
\ No newline at end of file diff --git a/public/styles.css b/public/styles.css index ea7e564..d14a7e8 100644 --- a/public/styles.css +++ b/public/styles.css @@ -6,7 +6,6 @@ src: url('journal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; - } /* Ändra basegenskaperna av sidan. */ @@ -29,6 +28,11 @@ p { } + +li:not(:last-child) { + margin-bottom: 3px; +} + /* Min stil på länkar. */ a { color: #000044; @@ -41,14 +45,27 @@ a:hover { /* 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); + box-shadow: none; + border-radius: 3px; + transform: none; +} + +/* Min stil för att rama in texten. */ +.presentation-box { + background-color: #dadada; + border-radius: 3px; + box-shadow: none; } /* Min stil för presentationstexten. */ .presentation-text { - font-family: "Journal", sans-serif; - font-size: 32px; - color: #212151; + font-family: "Source Sans Pro", sans-serif; +} + +/* Footer stilen */ +.footer-text { + font-style: italic; + text-align: right; } /* Definition av mitt rutnät för sidans layout. */ @@ -60,6 +77,8 @@ a:hover { max-width: 900px; /* max-width of the layout */ margin: 0 auto; /* center in the viewport */ + + background-color: #dadada; } /* Gemensant för cellerna i tabellen. */ @@ -74,6 +93,9 @@ a:hover { .content { grid-area: content; } +.content2 { + grid-area: content2; +} .image { grid-area: image; } @@ -87,21 +109,61 @@ a:hover { "header" "image" "content" - "footer" + "content2" + "footer"; + padding: 0px; + box-shadow: none; } /* Layout som väljs automatisk när det finns plats. */ -@media only screen and (min-width: 700px) { +@media only screen and (min-width: 850px) { + body { + /* Gratis bild från pexels, https://www.pexels.com/photo/brown-wooden-panel-347139/ */ + background-image: url("bg.jpg"); + background-attachment: fixed; + background-position-y: bottom; + background-repeat: repeat-x; + } + .grid-container { grid-template-areas: "header header header" "content content image" - "footer footer footer" - } + "content2 content2 content2" + "footer footer footer"; + box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + padding: 15px; + background-image: url("bg-paper-yellowed.jpg"); + background-repeat: none; + background-size: cover; + } - .image { + .image { position: relative; top: 40px; - } + left: -40px; + } + + /* Min coolare 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); + border-radius: 3px; + transform: rotate(-5deg); + } + + /* Min coolare stil för att rama in texten. */ + .presentation-box { + background-color: #f3ee9e; + 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); + } + + /* Min coolare stil för presentationstexten. */ + .presentation-text { + font-family: "Journal", sans-serif; + font-size: 32px; + color: #212151; + margin: 15px; + } }