<!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>© 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)";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.