Add files via upload

kartikagarwal9 · Sep 4, 2020 · e484fd2 · e484fd2
commit e484fd2
Show file tree

Hide file tree

Showing 2 changed files with 244 additions and 0 deletions.
diff --git a/PENDULUM 3D CSS/index.html b/PENDULUM 3D CSS/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="ternary-system">
+  <div class="sun primary"></div>
+  <div class="sun secondary"></div>
+  <div class="sun ternary"></div>
+</div>
+<div class="sand">
+<div class="pendulums">
+  <div class="pendulum">
+    <div class="bar"></div>
+    <div class="motion">
+      <div class="string"></div>
+      <div class="weight"></div>
+    </div>
+  </div>
+  <div class="pendulum shadow">
+    <div class="bar"></div>
+    <div class="motion">
+      <div class="string"></div>
+      <div class="weight"></div>
+    </div>
+  </div>
+</div></div>
+<div class="pyramid"></div>
+<div class="text">
+  <h1 class="title">The <strong>UnStoppable</strong><em>Problem Of Life</em></h1>
+  <p>By Kartik Agarwal</p>
+</div>
+</body>
+</html>
diff --git a/PENDULUM 3D CSS/style.css b/PENDULUM 3D CSS/style.css
@@ -0,0 +1,209 @@
+body{
+  overflow:hidden;
+}
+.pyramid{
+  $size: 100vw;
+  position:absolute;
+  right: 50vw;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  transform: translateX(0);
+border-style: solid;
+border-width: 0 $size $size*1.2 $size;
+border-color: transparent transparent #ff9e24 transparent;
+}
+
+.sand{
+  position:absolute;
+  bottom:0;
+  width:100%;
+  height: 9vw;
+  min-height: 8rem;
+  background:#ff9e24;
+}
+
+.ternary-system{
+  position:absolute;
+  bottom:0;
+  right:17vw;
+}
+
+.sun{
+  position:relative;
+  border-radius:50%;
+  background:#ffeb12;
+}
+
+.sun.primary{
+  position: absolute;
+  top:15vw;
+  left:5vw;
+  width: 1rem;
+  height: 1rem;
+}
+
+.sun.secondary{
+  position: absolute;
+  top:5vw;
+  left: 11vw;
+  width: 16vw;
+  max-width:6rem;
+  height: 16vw;
+  max-height:6rem;
+}
+
+.sun.ternary{
+  right:0;
+  transform: translateX(10.8rem);
+  width:80vw;
+  max-width: 800px;
+  height:80vw;
+  max-height: 800px;
+}
+
+.pendulums{
+  position:absolute;
+  width:50px;
+  height:200px;
+  right:35vw;
+  top:-120px;
+  perspective:400px;
+}
+
+.pendulum{
+  position:absolute;
+  width:50px;
+  height:200px;
+  right:44%;
+  top:0;
+  left:50%;
+  transform: translateZ(-300px) translateX(-50%);
+}
+
+.pendulum.shadow{
+  top:263%;
+  left:-65%;
+  bottom:0;
+  transform-origin: 50% 0;
+transform:translateX(-50%) scaleY(-1) scaleZ(2) rotateY(-30deg) rotateX(-75deg) translateZ(300px);
+}
+
+.pendulum .bar{
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%);
+  bottom:0;
+  display:block;
+  width: 20px;
+  height:200px;
+  background:#333;
+}
+
+.pendulum .string{
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%);
+  width:2px;
+  height:150px;
+  background:#333;
+}
+
+.pendulum .weight{
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%);
+  bottom:10px;
+  width:50px;
+  height:50px;
+  border-radius:50%;
+  background:#333;
+}
+
+.pendulum .motion{
+  position:absolute;
+  height:200px;
+  width:50px;
+  transform-origin:50% 10px;
+  animation: swing 1600ms infinite ease-in-out;
+}
+
+.pendulum.shadow .bar, .pendulum.shadow .string, .pendulum.shadow .weight{
+  background:#3d3a34;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
+
+.text{
+  position:absolute;
+  width: auto;
+  right: 17vw;
+  bottom: calc(63vh);
+  transform: translateY(50%);
+  font-size:2.6rem;
+}
+
+.title{
+  text-align:center;
+  font-size: 1em;
+  font-family:'Oswald';
+  font-weight:300;
+  text-transform:uppercase;
+  line-height:1.3em;
+  margin:0;
+  color:#222;
+}
+
+.title strong{
+  display:block;
+  font-weight:700;
+  font-size:2em;
+  line-height:1em;
+}
+
+.title em{
+  font-style:normal;
+  font-weight:400;
+  font-size:1.899em;
+  line-height:1em;
+  letter-spacing:.29em;
+  margin-left:0.25em;
+}
+
+p{
+  position: absolute;
+  left: 50%;
+  transform: translateX(3.2em);
+  font-family:'Oswald';
+  font-size: 0.6em;
+  color:#222;
+  margin:0 17px;
+  padding:0;
+  text-align:right;
+}
+
+@keyframes swing{
+  0%{    
+  transform:rotate(-45deg);
+  }
+  50%{
+
+  transform:rotate(45deg);
+  }
+  100%{
+
+  transform:rotate(-45deg);
+  }
+}
+
+@media only screen and (orientation: portrait) {
+  .text{
+    right: 50%;
+    top: 10%;
+    transform: translateX(50%);
+    font-size: 7vw;
+  }
+  .title{ 
+    font-size: 1em;
+  }
+}