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

Styling 

- Added lots of effects and styling.
This commit is contained in:
Fredrick Amnehagen 2024-03-19 14:46:05 +01:00
parent 26a1e1fca2
commit 89d5cc37f0
5 changed files with 94 additions and 27 deletions

BIN
public/bg-notebook.jpg Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 23 KiB

BIN
public/bg-paper-yellowed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 124 KiB

BIN
public/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 120 KiB

23
public/index.html
View File

@ -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">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-03-19</p>
</footer>
</div>
</body>
</html>

78
public/styles.css
View File

@ -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;
}
}