gotechnica · carolynl23 · Aug 7, 2022 · Aug 14, 2022
diff --git a/about.html b/about.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang = "en-US">
+
+ <head>
+    <link rel="stylesheet" href="style.css">
+    <img src="images/infinite diabolo banner.png" style="display: inline; max-width: 60%; height: auto;">
+    <i class="fa fa-user"></i>
+</head>
+
+<body>
+
+    <div class="tabs">
+        <ul class="tabs-list">
+            <p>
+                <h1>Infinite Diabolo</h1>
+
+                <a href="home.html">  Home |  </a>
+                <a href="about.html">  About |  </a>
+                <a href="performances.html"> Performances </a>
+            </p>
+        </ul>
+    </div>
+
+        <div class="header">
+            <h1> 
+                About Me
+            </h1>
+        </div>
+
+        <div id="container">
+
+            <div class="section">
+                <h2> 
+                    Introduction 
+                </h2>
+                <p>
+                    Hi! I'm <span class="emphasis">Carolyn</span>, a student at the <span class="emphasis">University of Maryland</span> who aspires to be a CEO in the future. I am majoring in chemical engineering and hope to minor in robotics & autonomous systems, and one day build a career where I can use both. Here's a link to <a href="http://www.google.com">my resume</a>.
+                </p>
+            </div>
+
+            <div class="section">
+                <h2> 
+                    Education and Career
+                </h2>
+                <p>
+                    I went to Richard Montgomery High School and learned robotics in FIRST Tech Challenge. In APSCA, I learned basic coding skills and got introduced to <span class="emphasis">Java</span>. I took a math-heavy courseload that included <span class="emphasis">Multivariable Calculus, Ordinary Differential Equations,</span> and <span class="emphasis">AP BC Calculus</span>.
+                </p>
+                <p>
+                    In college, I am taking a variety of STEM classes such as <span class="emphasis">Engineering Design</span> where I learn CAD, and <span class="emphasis">Physics</span> which taught me how the world works the way that it does from a mathematical perspective. I also was able to take immerse myself in business through IBH with classes such as <span class="emphasis">The Future of Work</span>, which explores the future of business and work from a critical and multidisciplinary perspective.
+                </p>
+            </div>
+
+            <div class="section">
+                <h2> 
+                    Interests 
+                </h2>
+                <p>
+                    In my free time, I love drawing, traveling, biking, and running! I am a photography fanatic and am still trying out new types of photography and techniques and finding my own style. I love how photography allows you to capture a sliver of history to keep forever as memories!
+                    I am also passionate about business & entrepreneurship and love to create new startup ideas. 
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/home.html b/home.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <img src="images/infinite diabolo banner.png" style="display: inline; max-width: 60%; height: auto;">
+    <i class="fa fa-user"></i>
+
+    </head>
+
+    <body>
+
+        <div class="tabs">
+            <ul class="tabs-list">
+                <p>
+                    <h1>Infinite Diabolo</h1>
+
+                    <a href="home.html">  Home |  </a>
+                    <a href="about.html">  About |  </a>
+                    <a href="performances.html"> Performances </a>
+
+
+                    <h1>What is Infinite Diabolo?</h1>
+
+                   Infinite Diabolo is an organization that aspires to spark an interest to expand the world of diabolo! 
+                   Founded in 2019 and based in MD. 
+                </p>
+
+                <img src= "images/final pose.jpg" style="display: inline; max-width: 30%; height: auto;">  
+                <img src= "images/team.jpg" style="display: inline; max-width: 30%; height: auto;">  
+
+            </ul>
+        </div>
+
+        <div class 
+
+        <div class="footer">
+            <a href="https://www.instagram.com/infinite.diabolo/"> Instagram: @infinite.diabolo </a>
+        </div>
+
+
+
+
+
+
+
+    </body>
+
+</html>
+
diff --git a/images/final pose.jpg b/images/final pose.jpg
diff --git a/images/infinite diabolo banner.png b/images/infinite diabolo banner.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo2.png b/images/logo2.png
diff --git a/images/logo3.png b/images/logo3.png
diff --git a/images/team.jpg b/images/team.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <style>
+
+    </style>
+
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="icon" href="images/logo.png">
+    <i class="fa fa-user"></i>
+    </head>
+
+    <body>
+        <div class="tabs">
+            <ul class="tabs-list">
+                <p>
+                    <a href="home.html">  Home |  </a>
+                    <a href="about.html">  About |  </a>
+                    <a href="performances.html"> Performances </a>
+                </p>
+            </ul>
+        </div>
+
+        <img src="images/infinite diabolo banner.png" style="display: inline">
+
+        <button onClick> hello </button>
+        <button id="btn"> Click me </button>
+        <script src="script.js"></script>
+
+    </body>
+
+</html>
+
diff --git a/miranda-song/README.md b/miranda-song/README.md
diff --git a/miranda-song/index.html b/miranda-song/index.html
diff --git a/performances.html b/performances.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <img src="images/infinite diabolo banner.png" style="display: inline; max-width: 60%; height: auto;">
+        <i class="fa fa-user"></i>
+
+
+        <div class="tabs">
+            <ul class="tabs-list">
+                <p>
+                    <h1>Infinite Diabolo</h1>
+
+                    <a href="home.html">  Home |  </a>
+                    <a href="about.html">  About |  </a>
+                    <a href="performances.html"> Performances </a>
+                </p>
+            </ul>
+        </div>
+
+    </head>
+
+    <body>
+        <div>
+            <h1 class="projects-heading"> Peformances </h1>
+            <div class="pics-grid">
+                <div class="project-image-wrapper">
+                    <h4><i class="fa fa-tree"></i></h4>
+                    <a href="team.jpg"><img class="project-image" src="images/team.jpg"/></a>
+                </div>
+                <div class="project-image-wrapper">
+                    <h4><i class="fa fa-pagelines"></i></h4>
+                    <a href="final pose.html"><img class="project-image" src="images/final pose.jpg"/></a>
+                </div>
+                <div class="project-image-wrapper">
+                    <h4><i class="fa fa-tint"></i></h4>
+                    <a href="infinite diabolo banner.html"><img class="project-image" src="images/infinite diabolo banner.png"/></a>
+                </div>
+
+                <div class="project-image-wrapper">
+                    <h4><i class="fa fa-sun-o"></i></h4>
+                    <a href="logo.html"><img class="project-image" src="images/logo.png"/></a>
+                </div>
+
+                <p> This site is constantly being updated with new performances so be sure to check often! </p>
+            </div>
+        </div>
+
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,23 @@
+document.write("this is a text on the document written through javascript!");
+document.body.innerHTML +="<h1"
+
+*/3 primary ways to access elements on a webpage
+document.getElementById(id_name);
+document.getElemntsByClassName(class_name);
+document.querySelector();
+
+<div class="container">
+    <p id="big_pph"this is a pph!> </p>
+</div>
+
+
+let button1 = document.getElementById('btn');
+
+BigInt.addEventListener("click, function() {}
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,125 @@
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mukta+Malar&display=swap");
+
+body {
+  background-image:url("infinite diabolo banner.png");
+  text-align: center;
+  color: mediumvioletred;
+}
+.intro {
+	text-align: center;
+}
+
+.intro-list {
+	color: white;
+}
+
+.intro ul li {
+	background: black;
+	color: white;
+	display: inline-block;
+	list-style-type: none;
+	padding: 10px;
+}
+
+
+.intro ul li a {
+	color: white;
+}
+
+.tabs{
+    text-align: center;
+}
+
+.tabs-list{
+    color: orange;
+}
+
+a{
+    background-color: pink;
+    -webkit-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+
+}
+
+/*css formatting
+/* apply a google font from fonts.google.com */
+/* let us know if you want to learn to do this (or anything else in CSS) */
+
+
+/* generic styling */
+body {
+  font-family: "Mukta Malar", sans-serif;
+  background-color: #eee;
+}
+
+h1 {
+  font-family: "Bebas Neue", cursive;
+}
+
+h2 {
+  letter-spacing: 2px;
+  color: #000;
+  border-bottom: 1px solid #6e85b7;
+}
+
+a {
+  font-weight: bolder;
+  text-decoration: none;
+  color: #6e85b7;
+  border-bottom: 2px solid transparent;
+  /* the below two lines will make any transitions/changes slow and smooth */
+  -webkit-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+a:hover { /* when a link is hovered, it will change color and border smoothly */
+  color: #000;
+  border-bottom: 2px solid #6e85b7;
+}
+
+.emphasis { /* anything with the emphasis class will be bold */
+  font-weight: bolder;
+}
+
+/* setting up the container in the center to hold the sections */
+#container {
+  /* setting auto margins on a relatively positioned div will center it */
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  text-align: center;
+  width: 75%;
+}
+
+/* styling each section (boxes inside the container) */
+.section {
+  z-index: 0;
+  border: 1px solid #777;
+  padding: 5%;
+  margin: 10%;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.section:hover h2 {
+  background-color: #fff;
+}
+
+/* styling the header "about me" to be at the top */
+/* if you want the header to be "sticky" and not scroll, use position:fixed */
+.header {
+  z-index: 1; /* makes it so it will be above any overlapping elements (bigger number = front) */
+  padding-top: 10px;
+  letter-spacing: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 15%;
+  border-bottom: 5px solid #6e85b7;
+  text-align: center;
+  -webkit-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+.header:hover {
+  color: #6e85b7;
+}