geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

stylesheet

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-08 14:22:09 +02:00
parent 02ae280bc0
commit 0193683b7d
2 changed files with 128 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
intro html/index.html
View file

@ -4,6 +4,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=x, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
@ -14,12 +16,15 @@
<h1>Eksempel 1</h1>
Hva heter du?<input type="text">
<div>
<div id="cards">
<div class="card">
<div class="header green">
Verktøy
</div>
<div>
</div>
</div>
<div class="card">
<div class="innerCard">
De to viktigste verktøyene vi skal bruke er disse:
<ul>
<li>
@ -36,11 +41,16 @@
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>
</div>
<div>
</div>
<div id="cards">
<div class="card">
<div class="header blue">
HTML
</div>
<div>
<div>
</div>
</div>
<div class="card">
<div class="innerCard">
Vi bruker HTML til å definere et dokument.
<ul>
<li>Tagger for grunnleggende oppsett av en HTML-fil</li>
@ -55,11 +65,15 @@
</ul>
</div>
</div>
<div>
<div id="cards">
<div class="card">
<div class="header red">
CSS
</div>
<div>
<div>
</div>
</div>
<div class="card">
<div class="innerCard">
Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
<ul>
<li><tt>background-color</tt></li>
@ -78,12 +92,14 @@
</ul>
</div>
</div>
<div>
<div>
<div id="cards">
<div class="card">
<div class="header yellow">
JavaScript
</div>
<div>
<div>
</div>
<div class="card">
<div class="innerCard">
Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
ved
å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
@ -97,11 +113,13 @@
</div>
</div>
</div>
<div>
<div>
<div id="cards">
<div class="card">
<div class="header dark">
Hode, kropp og ben
</div>
<div>
</div>
<div class="card">
<div id="head" class="bodyPart">
<button onclick="selectHead4()">◀</button>
<img src="img/head1.png">

44
intro html/style.css Normal file
View file

@ -0,0 +1,44 @@
body {
margin-left: 20px;
}
.card {
width: 500px;
background-color: lightgray;
border: solid 1px darkgray;
margin-inline-end: 10px;
}
.innerCard {
padding: 10px;
}
.header {
color: white;
text-align: center;
font-size: x-large;
padding: 1% 0;
border: 1px solid grey;
user-select: none;
}
.green {
background-color: #3cba54;
}
.yellow {
background-color: #f4c20d;
;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.dark {
background-color: #36393f;
}