<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="shape-shift">
        <p id="text">Lorem ipsum dolor sit, <br>amet consectetur adipisicing elit.</p>
    </div>

    <div class="shapes">
        <p>Choose your shape</p>
        <button id="triangle"><img src="https://i.ibb.co/D5Y7HBN/triangle.png" alt=""></button>
        <button id="circle"><img src="https://i.ibb.co/xfWZt37/circle.png" alt=""></button>
        <button id="square"><img src="https://i.ibb.co/bNKhS0z/square.png" alt=""></button>
    </div>

    <footer>&copy; 2020 <a href="https://www.linkedin.com/in/straleb/">StraleB</a></footer>
</body>
<script src="script.js"></script>
</html>
@import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap');


body{
    background-color: rgb(246, 248, 211);
}

.shape-shift{
    margin: 3em auto;
    text-align: center;
    font-family: 'Odibee Sans',
    cursive;
    font-size: 3em;
   border: 3px solid black;
   width: 7em;
  background-repeat: no-repeat;
  background-size:90% 100%;
  background-position-x:0.1em ;
position: relative;
  transition: all 0.2s;
}


 
p{
    background-color: rgb(246, 248, 211);
   width: 10em;
   margin: 1.3em -1.5em;
}

.shapes{
    margin: 0 45%;
    width: 15em;
}

.shapes p{
    margin: 0 0.5em;
    padding-bottom: 2em;
    font-size: 1.2em;
    font-family:'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

.shapes button{
border: 2px solid black;
background-color: transparent;
}

.shapes button:hover{
    background-color: rgb(197, 199, 173);
    cursor: pointer;
}
 

footer{
    margin: 10em 0;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

footer a{
    text-decoration: none;
    color: royalblue;
}

@media screen and (max-width: 1280px) {
    .shapes {
        margin: 0 42%;
    }
}

@media screen and (max-width: 960px) {
    .shapes {
        margin: 0 38%;
    }
}

@media screen and (max-width: 960px) {
    .shapes {
        margin: 0 35%;
    }
}
const shapeShift = document.querySelector('.shape-shift')
const txt = document.querySelector('#text');
const triangle = document.querySelector('#triangle');

triangle.onclick = function(){
    shapeShift.style.background = "url('https://i.ibb.co/xqhCTLQ/img-148441.png')"
    shapeShift.style.borderColor ="transparent";
    shapeShift.style.backgroundRepeat = "no-repeat"
    shapeShift.style.backgroundSize="90% 100%";
}

const circle = document.querySelector('#circle');
circle.onclick = function(){
   shapeShift.style.borderRadius = "140em";
   shapeShift.style.width = "5em"
    txt.style.margin = " 1.3em 10em;"
    shapeShift.style.borderColor = "black";
    shapeShift.style.background ="rgb(246, 248, 211)";
}

const square = document.querySelector('#square');
square.onclick = function () {
shapeShift.style.borderRadius = "0"
    shapeShift.style.width = "7em"
    shapeShift.style.borderColor = "black";
  shapeShift.style.background ="rgb(246, 248, 211)";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.