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

60
intro html/index.html
View file

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

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