first commit

3 years ago · c514add79d
4 changed files with 103 additions and 0 deletions
--- a/ROR.png
+++ b/ROR.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Recipes on the Radio</title>
+       <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="box_top">
+    <h1>Recipes on the Radio</h1>
+  </div>
+    <div class="box">
+
+    <span class="about"> Recipes are more than just instructions, whether it is food, or a recipe for disaster. <br> Recipes are deviant, magical and political. <br> Yoana and Alice, together with the occasional guest, will be cooking all kinds of recipes and their sounds and stories every other Saturday on the <span class="glow"><a href="https://s2.radio.co/sde6c7b42e/listen">Worm radio</a>.</span></span>
+    <img src="ROR.png" alt="logo">
+
+  </div>
+    <h2>Episode 1</h2>
+    <span class="description">
+    Potato recipe
+  </span>
+  </body>
+</html>
--- a/knife.gif
+++ b/knife.gif
--- a/style.css
+++ b/style.css
@ -0,0 +1,80 @@
+@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&family=Open+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
+
+body {
+  background-color: white;
+}
+
+.box {
+   display: flex;
+   align-items:center;
+   border-bottom: 1px solid #f0f0f0;
+}
+
+.box_top {
+   display: flex;
+   align-items:center;
+   background-color: #f0f0f0;
+   margin: 0;
+}
+
+img {
+  width: 25%;
+  display: inline;
+  margin-top: 2%;
+  padding-bottom: 25px;
+}
+
+.about {
+  margin-left: 5%;
+  font-family: 'Open Sans', sans-serif;
+  line-height: 200%;
+  padding-right: 15%;
+  width: 650px;
+}
+
+h1 {
+  font-family: 'Josefin Sans', sans-serif;
+  font-size: 50px;
+  margin-left: 5%;
+  color: rgb(255,99,6);
+}
+
+h2 {
+  margin-left: 5%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 25px;
+  margin-top: 5%;
+  color: rgb(255,99,6);
+}
+
+.description {
+  margin-left: 5%;
+}
+
+.gif {
+  width: 10%;
+  margin-left: 50%;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+.glow {
+  color: ;
+  text-align: center;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 10px rgb(255, 237, 71), 0 0 20px rgb(255, 237, 71), 0 0 30px rgb(255, 237, 71), 0 0 40px rgb(255, 237, 71), 0 0 50px rgb(255, 237, 71);
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px rgb(255,99,6), 0 0 40px rgb(255,99,6), 0 0 50px rgb(255,99,6), 0 0 60px rgb(255,99,6), 0 0 70px rgb(255,99,6);
+  }
+}