parent
26a1e1fca2
commit
89d5cc37f0
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
|
|
@ -24,28 +24,30 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<div class="grid-item header">
|
||||
<header class="grid-item header">
|
||||
<h1>Webb1 - Presentation</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid-item content">
|
||||
<section grid-item content>
|
||||
<h2>Presentation</h2>
|
||||
|
||||
<span class="presentation-text">
|
||||
<div class="presentation-box">
|
||||
<div class="presentation-text">
|
||||
<p>Hej,<br />
|
||||
jag heter Fredrick Amnehagen och är småbarnspappa. <br />
|
||||
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>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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid-item image">
|
||||
<section class="grid-item image">
|
||||
<img src="fredrick.jpg" class="portrait-image"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid-item footer">
|
||||
<section class="grid-item content2">
|
||||
<h2>Arbetsprocessen</h2>
|
||||
|
||||
<ul>
|
||||
|
|
@ -59,8 +61,11 @@
|
|||
<li>Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid.</li>
|
||||
<li>Stajlade texterna med fonter, färger och effekter.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="grid-item footer">
|
||||
<p class="footer-text">© <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-03-19</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue