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