repl.it
HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • CelsiusPortrait.jpeg
  • FahrenheitPortrait.jpg
  • fire-123784_1920.jpg
  • KelvinPortrait.jpeg
  • script.js
  • style.css
  • SUN.jpg
  • VOLCANO.jpg
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>An Inquiry Into The Science Of Heat</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="mySidenav" class="sidenav">

      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Part1</a>
      <a href="#">Part2</a>
      <a href="#">Part3</a>
      <a href="#">Part4</a>
    </div>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

    <div class="topBar">
     <span style="font-size:30px;cursor:pointer"onclick="openNav()" class="navClick">&#9776; </span>
    <p>AN INQUIRY INTO THE SCIENCE OF HEAT</p>
    </div>
    <h1 class="title">AN INQUIRY INTO THE SCIENCE OF HEAT</h1>
      <img class="mySlides" src="SUN.jpg">
      <img class="mySlides" src="VOLCANO.jpg">
      <img class="mySlides" src="fire-123784_1920.jpg">
    <div id="main">

      <!--Add Slideshow-->
      <div class="slideShow">

      </div>
      
      <br>

      <h2>What is heat?</h2>
      <div class="divider"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus e</p>
      <h2>Part two</h2>
      <div class="divider"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, interdum neque. Donec cursus diam elit, ac maximus neque dictum eleifend. Praesent vitae arcu vitae neque rhoncus dignissim. Donec id tempus nulla, in mollis magna. Donec mattis tempus dui. Etiam nec nulla dolor. Donec ullamcorper sagittis ex et bibendum. Vestibulum luctus est metus, nec accumsan diam porttitor in. Curabitur eu dolor id enim ultricies imperdiet sed in nisl. Ut non viverra ex, ut egestas quam.</p>
      <h2>Fahrenheit, Celcius, and Kelvin</h2>
      <div class="box1">
        <img class="box1image"src="FahrenheitPortrait.jpg">
        <p class="box1text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, int</p>
      </div>
      <br>
      <br>
      <br>
      <div class="box1">
        <p class="box2text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, int</p>
        <img class="box2image"src="CelsiusPortrait.jpeg">
      </div>
      <br>
      <br>
      <br>
      <div class="box1">
        <img class="box1image"src="KelvinPortrait.jpeg">
        <p class="box1text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, intLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere vulputate pellentesque. Sed laoreet viverra diam, a porttitor tellus pulvinar vel. Fusce sit amet dolor commodo, accumsan metus eu, int</p>
      </div>
      <div class="footer">
        <p class="footer-text">Sachi B., Created December 2019 </p>
        <p class="footer-text">Images from pixabay.com</p>
        <p class="footer-text">Sources Referenced: </p>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
  
</html>
result
console
?