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

148
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,33 +16,41 @@
<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">
De to viktigste verktøyene vi skal bruke er disse: <div class="innerCard">
<ul> De to viktigste verktøyene vi skal bruke er disse:
<li> <ul>
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a> <li>
<br> Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
Vi skal bruke noen <i>extensions</i>: <br>
<ul> Vi skal bruke noen <i>extensions</i>:
<li>JavaScript-booster</li> <ul>
<li>es6-string-html</li> <li>JavaScript-booster</li>
<li>live-server</li> <li>es6-string-html</li>
<li>live-share</li> <li>live-server</li>
</ul> <li>live-share</li>
</li> </ul>
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li> </li>
</ul> <li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>
</div>
</div> </div>
<div> <div id="cards">
HTML <div class="card">
<div class="header blue">
HTML
</div>
</div>
</div> </div>
<div> <div class="card">
<div> <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">
CSS <div class="card">
<div class="header red">
CSS
</div>
</div>
</div> </div>
<div> <div class="card">
<div> <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,46 +92,50 @@
</ul> </ul>
</div> </div>
</div> </div>
<div> <div id="cards">
<div> <div class="card">
JavaScript <div class="header yellow">
JavaScript
</div>
</div> </div>
<div> <div class="card">
<div> <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.
<ul> <ul>
<li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på <li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
Moodle.</li> Moodle.</li>
<li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript <li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
Reference</a></li> Reference</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div> <div id="cards">
<div> <div class="card">
Hode, kropp og ben <div class="header dark">
Hode, kropp og ben
</div>
</div>
<div class="card">
<div id="head" class="bodyPart">
<button onclick="selectHead4()">◀</button>
<img src="img/head1.png">
<button onclick="selectHead2()">▶</button>
</div>
<div id="body" class="bodyPart">
<button onclick="selectBody4()">◀</button>
<img src="img/body1.png">
<button onclick="selectBody2()">▶</button>
</div>
<div id="legs" class="bodyPart">
<button onclick="selectLegs4()">◀</button>
<img src="img/legs1.png">
<button onclick="selectLegs2()">▶</button>
</div>
</div> </div>
<div>
<div id="head" class="bodyPart">
<button onclick="selectHead4()">◀</button>
<img src="img/head1.png">
<button onclick="selectHead2()">▶</button>
</div>
<div id="body" class="bodyPart">
<button onclick="selectBody4()">◀</button>
<img src="img/body1.png">
<button onclick="selectBody2()">▶</button>
</div>
<div id="legs" class="bodyPart">
<button onclick="selectLegs4()">◀</button>
<img src="img/legs1.png">
<button onclick="selectLegs2()">▶</button>
</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;
}