Advertisement
WhoAmI1000

New Webpage 1

Jun 17th, 2019
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.36 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf8">
  5.         <title>Home | RNotes</title>
  6.         <style>
  7.             body {
  8.                 background-color: paleturquoise;
  9.                 text-align: center;
  10.             }
  11.             p {
  12.                 font-family: "Futura";
  13.             }
  14.             #tit {
  15.                 font-family: "Copperplate";
  16.             }
  17.            
  18.             #top {
  19.                 font-family:"Copperplate";
  20.             }
  21.            
  22.             #images1 {
  23.                 height:1000px;
  24.             }
  25.             #research {
  26.                 height:750px;
  27.                 background-image: url("https://i.udemycdn.com/course/750x422/1344866_5c41.jpg");
  28.                 background-size: 100% 100%;
  29.             }
  30.             #ActualNotes {
  31.                 height:1000px;
  32.             }
  33.             #fccalculator2 {
  34.                 height:1000px;
  35.             }
  36.             #top {
  37.                 text-align: center;
  38.             }
  39.             #about {
  40.                 height: 1000px;
  41.             }
  42.             #ta1 {
  43.                 border-radius: 8px;
  44.             }
  45.             #calcsec2 {
  46.                 border-radius: 8px;
  47.             }
  48.             .center {
  49.   display: block;
  50.   margin-left: auto;
  51.   margin-right: auto;
  52.   width: 50%;
  53. }
  54.             ul {
  55.   list-style-type: none;
  56.   margin: 0;
  57.   padding: 0;
  58.   background-color: teal;
  59.   position: fixed;
  60.   top: 0;
  61.   width: 100%;
  62.   left:0;
  63.   }
  64.  
  65. li {
  66.   float: left;
  67. }
  68.  
  69. li a {
  70.   display: block;
  71.   color: white;
  72.   text-align: center;
  73.   padding: 14px 16px;
  74.   text-decoration: none;
  75. }
  76.  
  77. li a:hover:not(.active) {
  78.   background-color: rgb(0, 49, 60);
  79. }
  80.  
  81. .active {
  82.   background-color: #4CAF50;
  83. }
  84. #navbar{
  85. width:14.3%
  86. }
  87. #img1 {
  88.     width: 50%;
  89.     image-orientation: center;
  90.     border-radius: 12px;
  91. }
  92. .dropdown {
  93.   float: left;
  94.   overflow: hidden;
  95. }
  96.  
  97. .dropdown .dropbtn {
  98.   font-size: 16px;  
  99.   border: none;
  100.   outline: none;
  101.   color: white;
  102.   padding: 14px 16px;
  103.   background-color: inherit;
  104.   font-family: inherit;
  105.   margin: 0;
  106. }
  107.  
  108. .navbar a:hover, .dropdown:hover .dropbtn {
  109.   background-color: rgb(0, 49, 60);
  110. }
  111.  
  112. .dropdown-content {
  113.   display: none;
  114.   position: absolute;
  115.   background-color: teal;
  116.   min-width: 160px;
  117.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  118.   z-index: 1;
  119. }
  120.  
  121. .dropdown-content a {
  122.   float: none;
  123.   color: white;
  124.   padding: 12px 16px;
  125.   text-decoration: none;
  126.   display: block;
  127.   text-align: left;
  128. }
  129.  
  130. .dropdown-content a:hover {
  131.   background-color: rgb(0, 49, 60);
  132. }
  133.  
  134. .dropdown:hover .dropdown-content {
  135.   display: block;
  136. }
  137. .ghighlight {
  138.     background-color: #E8E8E8;
  139. }
  140.  
  141.  
  142.         </style>
  143.     </head>
  144.     <body>
  145. <div id="navbar">
  146. <ul>
  147.   <li><a href="#top">Home</a></li>
  148.   <li><a href="#research">Research</a></li>
  149.   <li><a href="#ActualNotes">Notes</a></li>
  150.   <li><a href="#fccalculator">Temperature Calculator</a></li>
  151.   <li><a href="#buyfunc">Purchase A Function</a></li>
  152.   <li><div class="dropdown">
  153.     <button class="dropbtn">External Links(Dropdown)
  154.       <i class="fa fa-caret-down"></i>
  155.     </button>
  156.     <div class="dropdown-content">
  157.       <a target="_blank" href="https://www.khanacademy.org">Khan Academy</a>
  158.       <a target="_blank" href="https://images-na.ssl-images-amazon.com/images/I/11C7MTeYlOL._SX331_BO1,204,203,200_.jpg">Chartreuse Color</a>
  159.       <a target="_blank" href="https://www.w3schools.com">W3Schools</a>
  160.       <a target="_blank" href="file:///Volumes/RYAN%20D%20USB/notes2.html">Notes 2</a>
  161.       <a target="_blank" href="file:///Volumes/RYAN%20D%20USB/Notes%20Folder/filternotes2.html">Night Light Page (BETA)</a>
  162.     </div>
  163.   </div>
  164.   <li style="float:right"><a class="active" href="#about">About</a></li>
  165. </ul>
  166. </div>
  167.     <br>
  168.     <br>
  169.     <h1 id="top">My Webpage</h1>
  170.    
  171.     <br>
  172.     <img src="https://www.bing.com/th?id=OIP.65j2q3N1PFU6gwEQkCWDKAHaEK&pid=Api&rs=1&p=0" id="img1" class="center" alt="Blue binary complex imaginary building">
  173.     <h2 id="mythoughts">My thoughts on this page</h2>
  174.     <p class="pa">This is a boring webpage. I wish I could add a background image or some CSS tags. This is a very boring and sad website.<p>
  175.     <br>
  176.     <p class="pa">Hi. CSS tags are awesome. When can we start making a <b>REAL</b> website?</p>  
  177.     <div id="research"><h2>Research</h2>
  178.     <p>CSS 3 is a new version of CSS which allows users and programmers to customize their websites<br>easily and efficiently. CSS 2 is now outdated and should never be used.</p>
  179.     <p class="ghighlight">To learn CSS3, you can go to <a target="_blank" href="https://www.khanacademy.org" style="text-decoration: none;"> Khan Academy</a>.</p>
  180.     </div>
  181.     <div id="ActualNotes">
  182.         <h2>Actual Notes</h2>
  183.     </div>
  184.     <div id="fccalculator">
  185.         <h2>Fahrenheit, Celsius, and Kelvin Calculator</h2>
  186.         <select name="calcSec" id="calcSec2">
  187.         <option value="FC">Fahrenheit To Celsius</option>
  188.         <option value="CF">Celsius To Fahrenheit</option>
  189.         <option value="FK">Fahrenheit To Kelvin</option>
  190.         <option value="CK">Celsius To Kelvin</option>
  191.         <option value="KF">Kelvin To Fahrenheit</option>
  192.         <option value="KC">Kelvin To Celsius</option>
  193.         </select>
  194.         <!--<p><button onclick="conName()">Click Here To Submit Conversion Type!</button>-->
  195.         <br>
  196.         <p></p>
  197.         <textarea rows="2" cols="40" id="ta1"></textarea>
  198.         <br>
  199.         <button type="button" id="b1" onclick="func()" class="ib">Calculate!</button>
  200.         <br>
  201.         <script>
  202.         //confirm("Circler.xyz wants to know your location, your identity, your credit card number, your debit card number, your debit card CVC, your social security number, and your house address.")
  203.         let output1;
  204.         let error = false;
  205.         let e = null;
  206.         let outt = "FC";
  207.         let conName = function() {
  208.             e = document.getElementById("calcSec2");
  209.             outt = e.value;
  210.         };
  211.             let func = function() {
  212.                 //alert(output1)
  213.                 error = false;
  214.                 conName();
  215.                 let splitta1 = document.getElementById("ta1").value.split(" ");
  216.                 let space = splitta1.length;
  217.                 //alert(y);
  218.                 if(space > 1 && error === false) {
  219.                     alert("Error.")
  220. error = true;
  221.                 }
  222.                 if(document.getElementById("ta1").value === "" && error === false) {
  223.                    alert("Error.");
  224.                     document.getElementById("func1out").innerHTML = "Please input a number.";
  225.                     error = true;
  226.                 }else{
  227.                     //alert("Made it past.");
  228.                     document.body.style.backgroundColor = "paleturquoise";
  229.                     if(outt === "CF"){
  230.                         output1 = ((parseFloat(document.getElementById("ta1").value) * 9/5 + 32)+ " degrees Fahrenheit");
  231.                         document.getElementById("func1out").innerHTML = output1;
  232.                         document.getElementById("func2out").innerHTML = "N x 9/5 + 32";
  233.                     }else if(outt === "FC") {
  234.                         output1 = (((parseFloat(document.getElementById("ta1").value) - 32) * 5/9) + " degrees Celsius");
  235.                         document.getElementById("func1out").innerHTML = output1;
  236.                         document.getElementById("func2out").innerHTML = "(N - 32) x 5/9";
  237.                     }else if(outt === "FK"){
  238.                         output1 = (((parseFloat(document.getElementById("ta1").value) - 32)*5/9) + 273.15 + " Kelvin");
  239.                         document.getElementById("func1out").innerHTML = output1;
  240.                         document.getElementById("func2out").innerHTML = "(N - 32) x 5/9 + 273.15";
  241.                     }else if(outt === "CK") {
  242.                         output1 = (parseFloat(document.getElementById("ta1").value) + 273.15 + " Kelvin");
  243.                         document.getElementById("func1out").innerHTML = output1;
  244.                         document.getElementById("func2out").innerHTML = "N + 273.15";
  245.                     }else if(outt === "KF") {
  246.                         output1 = (((parseFloat(document.getElementById("ta1").value) - 273.15)*9/5 + 32) + " degrees Fahrenheit");
  247.                         document.getElementById("func1out").innerHTML = output1;
  248.                         document.getElementById("func2out").innerHTML = "(N - 273.15) x 9/5 + 32";
  249.                     }else if(outt === "KC") {
  250.                         output1 = ((parseFloat(document.getElementById("ta1").value) - 275.15) + " degrees Celsius");
  251.                         document.getElementById("func1out").innerHTML = output1;
  252.                         document.getElementById("func2out").innerHTML = "N - 275.15";
  253.                     }
  254.                 }
  255.                 if(document.getElementById("func1out").innerHTML === "NaN degrees Fahrenheit" && error === false) {
  256.                     alert("Error.")
  257.                     document.getElementById("func1out").innerHTML = "Please input a number.";
  258.                     error = true;
  259.                 }
  260.                                 if(document.getElementById("func1out").innerHTML === "NaN degrees Celsius" && error === false) {
  261.                     alert("Error.")
  262.                     document.getElementById("func1out").innerHTML = "Please input a number.";
  263.                     error = true;
  264.                 }
  265.                                 if(document.getElementById("func1out").innerHTML === "NaN Kelvin" && error === false) {
  266.                     alert("Error.")
  267. document.getElementById("func1out").innerHTML = "Please input a number.";
  268. error = true;
  269.                 }
  270.             };
  271.         </script>
  272.         <br>
  273.         <br>
  274.         <h3><div id="func1out"></div></h3>
  275.         <br>
  276.         <p>Formula: <div id="func2out"></div></p>
  277.     </div>
  278.     <br>
  279.     <br>
  280.     <h2>Good Music:</h2>
  281.     <div id="fun">
  282. <iframe width="420" height="315"
  283. src="https://www.youtube.com/watch?v=mX-SktWVHao">
  284. </iframe>
  285. <br>
  286. <p id="buyfunc"></p>
  287. <br>
  288. <br>
  289. <h2>Buy A Function!</h2>
  290. <textarea rows="2" cols="40" id="ta2"></textarea>
  291. <br>
  292. <button type="button" id="b1" onclick="v()" class="ib">Purchase</button>
  293.         <script>
  294.             let v = function() {
  295.                 let fname = document.getElementById("ta2").value;
  296.                 if(fname === "") {
  297.                     alert("Please enter a name for the function.");
  298.                     return;
  299.                 }
  300.                 let tof = confirm("Are you sure you want to purchase the function with the name '" + fname + "'?");
  301.                 if(tof === true) {
  302.                     document.getElementById("bon").innerHTML = "The function '" + fname + "' has been bought. Your CirclR value has been updated. You will be able to do more with your CirclR value soon.";
  303.                 }
  304.                 else {
  305.                     document.getElementById("bon").innerHTML = "The transaction for the function '" + fname + "' was not completed.";
  306.                 }
  307.             };
  308.         </script>
  309.         <script>
  310.        
  311.         </script>
  312.     </div>
  313.     <h3><div id="bon"></div></h3>
  314.     <br>
  315.     <div id="about">
  316.     <br>
  317.     <br>
  318.     <h2>About</h2>
  319.     <br>
  320.     <br>
  321.     <p>This webpage was started on 6-17-2019 A.D. We are not responsible for damage or harm to yourself, another person, an animal, or an object, from this website. We are not liable for anything involving this website, and we are especially not liable for anything <em>not</em> involving this website.</p>
  322.     </div>
  323.     </body>
  324. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement