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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

37
public/index.html
View File

@ -24,28 +24,30 @@
</head> </head>
<body> <body>
<div class="grid-container"> <div class="grid-container">
<div class="grid-item header"> <header class="grid-item header">
<h1>Webb1 - Presentation</h1> <h1>Webb1 - Presentation</h1>
</div> </header>
<div class="grid-item content"> <section grid-item content>
<h2>Presentation</h2> <h2>Presentation</h2>
<span class="presentation-text"> <div class="presentation-box">
<p>Hej,<br /> <div class="presentation-text">
jag heter Fredrick Amnehagen och är småbarnspappa. <br /> <p>Hej,<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> jag heter Fredrick Amnehagen och är småbarnspappa. <br />
<p>Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.</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>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>Förr när jag hade fritid så arbetade jag på digitala projekt, spelutveckling eller konstruktion av möbler.</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å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>
</span> <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>
</section>
<div class="grid-item image"> <section class="grid-item image">
<img src="fredrick.jpg" class="portrait-image"/> <img src="fredrick.jpg" class="portrait-image"/>
</div> </section>
<div class="grid-item footer"> <section class="grid-item content2">
<h2>Arbetsprocessen</h2> <h2>Arbetsprocessen</h2>
<ul> <ul>
@ -59,8 +61,11 @@
<li>Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid.</li> <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> <li>Stajlade texterna med fonter, färger och effekter.</li>
</ul> </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> </div>
</body> </body>
</html> </html>

84
public/styles.css
View File

@ -6,7 +6,6 @@
src: url('journal-webfont.woff') format('woff'); src: url('journal-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* Ändra basegenskaperna av sidan. */ /* Ändra basegenskaperna av sidan. */
@ -29,6 +28,11 @@ p {
} }
li:not(:last-child) {
margin-bottom: 3px;
}
/* Min stil på länkar. */ /* Min stil på länkar. */
a { a {
color: #000044; color: #000044;
@ -41,14 +45,27 @@ a:hover {
/* Min stil för bilden. */ /* Min stil för bilden. */
.portrait-image { .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. */ /* Min stil för presentationstexten. */
.presentation-text { .presentation-text {
font-family: "Journal", sans-serif; font-family: "Source Sans Pro", sans-serif;
font-size: 32px; }
color: #212151;
/* Footer stilen */
.footer-text {
font-style: italic;
text-align: right;
} }
/* Definition av mitt rutnät för sidans layout. */ /* Definition av mitt rutnät för sidans layout. */
@ -60,6 +77,8 @@ a:hover {
max-width: 900px; /* max-width of the layout */ max-width: 900px; /* max-width of the layout */
margin: 0 auto; /* center in the viewport */ margin: 0 auto; /* center in the viewport */
background-color: #dadada;
} }
/* Gemensant för cellerna i tabellen. */ /* Gemensant för cellerna i tabellen. */
@ -74,6 +93,9 @@ a:hover {
.content { .content {
grid-area: content; grid-area: content;
} }
.content2 {
grid-area: content2;
}
.image { .image {
grid-area: image; grid-area: image;
} }
@ -87,21 +109,61 @@ a:hover {
"header" "header"
"image" "image"
"content" "content"
"footer" "content2"
"footer";
padding: 0px;
box-shadow: none;
} }
/* Layout som väljs automatisk när det finns plats. */ /* 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-container {
grid-template-areas: grid-template-areas:
"header header header" "header header header"
"content content image" "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; position: relative;
top: 40px; 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;
}
} }