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);
  }
 }