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

Added a grid. 

- Changed the bg color.
- Added a grid, but no layout yet.
This commit is contained in:
Fredrick Amnehagen 2024-03-19 11:54:15 +01:00
parent 39938ce72d
commit 0fc43827f2
2 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/index.html
View File

@ -8,35 +8,50 @@
<meta name="description" content="Presentation av mig.">
<meta name="author" content="Fredrick Amnehagen">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="styles.css?v=1.0">
<!-- dev voodoo magic line to refresh the page every 5 seconds. -->
<meta http-equiv="refresh" content="5">
</head>
<body>
<h1>Webb1 - Presentation</h1>
<div class="grid-container">
<div class="grid-item">
<h1>Webb1 - Presentation</h1>
</div>
<h2>Presentation</h2>
<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>
<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>
<img src="fredrick.jpg" />
<h2>Arbetsprocessen</h2>
<ul>
<li>Arbetade i Linux, Debian 12.</li>
<li>Började skriva i emacs.</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>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>
</ul>
<div class="grid-item"><h2>Presentation</h2></div>
<div class="grid-item">
<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>
<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>
</div>
<div class="grid-item">
<img src="fredrick.jpg" />
</div>
<div class="grid-item">
<h2>Arbetsprocessen</h2>
</div>
<div class="grid-item">
<ul>
<li>Arbetade i Linux, Debian 12.</li>
<li>Började skriva i emacs.</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>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>
</ul>
</div>
</div>
</body>
</html>

11
public/styles.css
View File

@ -1,12 +1,19 @@
@charset "UTF-8";
body {
font-family: "Helvetica", Sans-Serif;
background-color: #dadada;
}
/* Definition av mitt rutnät för sidans layout. */
/* Behållaren för cellerna, tabellen. */
.grid-container {
display: grid;
column-gap: 0px;
row-gap: 0px;
}
/* Gemensant för cellerna i tabellen. */
.grid-item {
display: grid;
}