Layout and fonts
- Worked som more on the layout. - Implemented web fonts. - Some effects.
This commit is contained in:
parent
0fc43827f2
commit
26a1e1fca2
|
|
@ -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
|
||||
|
|
@ -14,41 +14,50 @@
|
|||
|
||||
<link rel="stylesheet" href="styles.css?v=1.0">
|
||||
|
||||
<!-- dev voodoo magic line to refresh the page every 5 seconds. -->
|
||||
<!-- Web fonts -->
|
||||
<link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
|
||||
<link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
|
||||
<link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet">
|
||||
|
||||
<!-- dev voodoo magic line to refresh the page every 5 seconds. Probably very old. -->
|
||||
<meta http-equiv="refresh" content="5">
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">
|
||||
<div class="grid-item header">
|
||||
<h1>Webb1 - Presentation</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid-item"><h2>Presentation</h2></div>
|
||||
<div class="grid-item content">
|
||||
<h2>Presentation</h2>
|
||||
|
||||
<div class="grid-item">
|
||||
<span class="presentation-text">
|
||||
<p>Hej,<br />
|
||||
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.</p>
|
||||
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 class="grid-item">
|
||||
<img src="fredrick.jpg" />
|
||||
<div class="grid-item image">
|
||||
<img src="fredrick.jpg" class="portrait-image"/>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<div class="grid-item footer">
|
||||
<h2>Arbetsprocessen</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<ul>
|
||||
<li>Arbetade i Linux, Debian 12.</li>
|
||||
<li>Började skriva i emacs.</li>
|
||||
<li>Arbetade i <a href="https://www.gnu.org/gnu/linux-and-gnu.en.html">GNU/Linux</a>, <a href="https://www.debian.org/">Debian 12 - Bookworm</a>.</li>
|
||||
<li>Började skriva i <a href="https://www.gnu.org/software/emacs/">emacs</a>.</li>
|
||||
<li>Utgick från exempel i på <a href="https://www.w3schools.com/">w3schools.com</a>.</li>
|
||||
<li>Installerade eclipse med webbtillägg för att skriva koden med syntax highlighting.</li>
|
||||
<li>Installerade <a href="https://www.eclipse.org/">eclipse</a> med <a href="https://eclipse.dev/webtools/ws/">webbtillägg</a> för att skriva koden med syntax highlighting.</li>
|
||||
<li>Skapade favikoner i <a href="https://www.gimp.org/">gimp</a> och <a href="https://inkscape.org/">inkscape</a>.</li>
|
||||
<li>Skapade porträtt i gimp, plockade bakgrundfärgen med den digitala pupletten.</li>
|
||||
<li>Skapade porträtt i <a href="https://www.gimp.org/">gimp</a>, plockade bakgrundfärgen med den digitala pupletten.</li>
|
||||
<li>Öppnade min <a href="https://forgejo.org/">Forgejo</a> server och skapade <a href="https://git-scm.com/">git</a> projektet, sedan skickade jag upp projektet <a href="https://forgejo.loopaware.com/Webb1">här</a>.</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue