upload
This commit is contained in:
commit
920ed8a08d
106
css/style.css
Normal file
106
css/style.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
htmll {
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Helvetica,Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #222222;
|
||||||
|
color: #bababa;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
float: left;
|
||||||
|
height: 3rem;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #d3d00c;
|
||||||
|
color: #448344;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-left: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 0.4rem;
|
||||||
|
height: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section p {
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #calc {
|
||||||
|
border: 1px solid green;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #calc input[type='number'] {
|
||||||
|
margin: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #calc button {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #222222;
|
||||||
|
color: #bababa;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
9
css/style.css.map
Normal file
9
css/style.css.map
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "AAAA,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,CAAC;EACT,OAAO,EAAC,CAAC;EACT,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,KAAK,CAAA;EACD,SAAS,EAAE,KAAK;CACnB;;AACD,AAAA,IAAI,CAAA;EACA,WAAW,EAAE,2BAA2B;CAC3C;;AACD,AAAA,MAAM,CAAA;EACF,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,IAAI;CAmChB;;AAtCD,AAKI,MALE,CAKF,GAAG,CAAA;EACC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;CACrB;;AAVL,AAYI,MAZE,CAYF,EAAE,CAAA;EACE,WAAW,EAAE,4BAA4B;EACzC,SAAS,EAAE,MAAM;CACpB;;AAfL,AAkBQ,MAlBF,CAiBF,GAAG,CACC,EAAE,CAAA;EACE,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,CAAC;CAWjB;;AA/BT,AAsBY,MAtBN,CAiBF,GAAG,CACC,EAAE,CAIE,EAAE,CAAA;EACE,OAAO,EAAE,YAAY;EACrB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAC,OAAO;EACb,MAAM,EAAE,eAAe;EACvB,WAAW,EAAE,CAAC;EACd,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,eAAe;CAC3B;;AA9Bb,AAiCQ,MAjCF,CAiBF,GAAG,CAgBC,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACf;;AAIT,AAAA,IAAI,CAAA;EACA,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,OAAO;EAC9B,GAAG,EAAE,MAAM;CAoCd;;AAzCD,AAOI,IAPA,CAOA,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;EACvB,OAAO,EAAE,MAAM;EACf,MAAM,EAAE,KAAK;CAchB;;AAxBL,AAWQ,IAXJ,CAOA,OAAO,CAIH,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,MAAM;CACxB;;AAdT,AAgBQ,IAhBJ,CAOA,OAAO,CASH,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,MAAM;CACxB;;AAnBT,AAqBQ,IArBJ,CAOA,OAAO,CAcH,CAAC,CAAA;EACG,aAAa,EAAE,MAAM;CACxB;;AAvBT,AA0BI,IA1BA,CA0BA,KAAK,CAAA;EACD,MAAM,EAAE,eAAe;EACvB,YAAY,EAAE,GAAG;EACjB,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;CAUtB;;AAxCL,AAgCQ,IAhCJ,CA0BA,KAAK,CAMD,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,EAAc;EAChB,MAAM,EAAE,MAAM;CACjB;;AAlCT,AAmCQ,IAnCJ,CA0BA,KAAK,CASD,MAAM,CAAA;EACF,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,MAAM;CACxB;;AAIT,AAAA,MAAM,CAAA;EACF,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,IAAI;CAChB",
|
||||||
|
"sources": [
|
||||||
|
"style.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "style.css"
|
||||||
|
}
|
||||||
100
css/style.scss
Normal file
100
css/style.scss
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding:0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
htmll{
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
font-family: Helvetica,Arial, sans-serif;
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
background-color: #222222;
|
||||||
|
color: #bababa;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
img{
|
||||||
|
float: left;
|
||||||
|
height: 3rem;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav{
|
||||||
|
ul{
|
||||||
|
list-style-type: none;
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
li{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #d3d00c;
|
||||||
|
color:#448344;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-left: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.4rem;
|
||||||
|
|
||||||
|
section{
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 0.4rem;
|
||||||
|
height: 18rem;
|
||||||
|
h2{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#calc{
|
||||||
|
border: 1px solid green;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
input[type='number']{
|
||||||
|
margin: 0.3rem;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
background-color: #222222;
|
||||||
|
color: #bababa;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
BIN
img/henrik.png
Executable file
BIN
img/henrik.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
54
img/js-logo.svg
Normal file
54
img/js-logo.svg
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
version="1.1"
|
||||||
|
width="297.45001"
|
||||||
|
height="337.341"
|
||||||
|
viewBox="0 0 297.45001 337.341"
|
||||||
|
id="svg2">
|
||||||
|
<title
|
||||||
|
id="title4">Slice 1</title>
|
||||||
|
<metadata
|
||||||
|
id="metadata30">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title>Slice 1</dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<g
|
||||||
|
transform="translate(-0.071,-82.67)"
|
||||||
|
id="Layer_1"
|
||||||
|
style="fill:none;stroke:none">
|
||||||
|
<path
|
||||||
|
d="M 27.142,386.29 0.071,82.67 l 297.45,0 -27.096,303.571 -121.811,33.77 L 27.142,386.29 z m 0,0"
|
||||||
|
id="path13"
|
||||||
|
style="fill:#d4b830;fill-opacity:1" />
|
||||||
|
<path
|
||||||
|
d="m 148.798,394.199 98.427,-27.288 23.157,-259.415 -121.584,0 0,286.703 z m 0,0"
|
||||||
|
id="path15"
|
||||||
|
style="fill:#fdd83c;fill-opacity:1" />
|
||||||
|
<g
|
||||||
|
transform="translate(55,142)"
|
||||||
|
id="Group">
|
||||||
|
<path
|
||||||
|
d="m 195.55107,75.496002 -52.47907,0 0,-38.132 55.79667,0 3.30333,-37.23899948 -98.0332,0 0,112.60699748 50.7682,0 -4.484,48.294 -46.284,8.426 0,38.819 81.091,-18.451 z"
|
||||||
|
id="path18"
|
||||||
|
style="fill:#4d4d4d;fill-opacity:1" />
|
||||||
|
<path
|
||||||
|
d="m 83.795999,0.12500252 -83.15099941,0 3.45300001,37.25399948 42.3189994,3.4e-4 0,126.706188 -20.741,-3.03453 -2.652,-29.698 c 0,0 -24.9193323,0 -37.378999,0 l 5.2159997,58.467 c 92.9349993,18.45053 0.3522911,-0.0135 92.9349993,18.45053 z"
|
||||||
|
id="path24"
|
||||||
|
style="fill:#000000;fill-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
66
index.html
Normal file
66
index.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JavaScript Prov WU-2</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<img src="img/js-logo.svg" alt="js logo">
|
||||||
|
<h1 id="h1-1">Prov i JavasScript</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="#" id="menuBtn">Mennny</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Hem</a></li>
|
||||||
|
<li>Sida 1</li>
|
||||||
|
<li>Sida 2</li>
|
||||||
|
<li>Sida 3</li>
|
||||||
|
<li>Sida 4</li>
|
||||||
|
<li>Sida 5</li>
|
||||||
|
<li>Sida 6</li>
|
||||||
|
<li>Om</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Detta om detta</h2>
|
||||||
|
<h3>Ta bort</h3>
|
||||||
|
<p> Lorem ipsum dolor sit amet, mea denique iudicabit ne. Quo ipsum errem torquatos te,
|
||||||
|
nominavi accusata erroribus sit in. Idque facilisis no eam</p>
|
||||||
|
|
||||||
|
<p>sea labore fuisset accusamus in.Quo an latine deserunt recteque.</p>
|
||||||
|
|
||||||
|
<p>Pro at ponderum consetetur reformidans. Ut nam iudico decore scripta,
|
||||||
|
per sint delicata te, ne sit modo etiam.</p>
|
||||||
|
|
||||||
|
<p> Quo ipsum errem torquatos te, nominavi accusata erroribus sit in. Idque facilisis no eam,
|
||||||
|
sea labore fuisset accusamus in.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Mer om detta</h2>
|
||||||
|
<img src="img/henrik.png" width="150" alt="Bild på Henrik Bygren">
|
||||||
|
|
||||||
|
<p>Gå till <a href="http://dn.se">DN</a> och titta.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Klassen</h2>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="calc">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Multiplication</legend>
|
||||||
|
<input type="number" id = 'n1'> x <input type="number" id = 'n2'> = <span id = 'result'></span><br>
|
||||||
|
<button id="btnCalc">Multiplicera</button>
|
||||||
|
</fieldset>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<section>Uppgift att lösa!</section>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
js/script.js
Normal file
7
js/script.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const names = ['Otto', 'Johan','Axel', 'Theodor', 'Alvin', 'saleh', 'isak', 'Henrik', 'Jonathan', 'Omar', 'Joel'];
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
alert("Funktionen init() körs nu. Kommentera bort raden i js-filen när det fungerar.");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', init);
|
||||||
Loading…
Reference in New Issue
Block a user