RaneWallin/index.pug

## index.pug
head
  title Freddie Mercury in CSS
  body
    div.frame
      div.hair

## style.scss
.frame {
  border: 2px solid pink;
  width: 740px;
  height: 740px;
  margin: 0 auto;
  background-image: linear-gradient(#B5CFE8, #7892AB 10%, #CAE4FD 100%);
}

body {
  background-color: black;
}

## xvdbbp.markdown

      
    Raw
  

              xvdbbp.markdown
            
          
    Freddie Mercury in CSS (Day 1)

A Pen by Rane on CodePen.
License.
I am on a mission to create an image of Freddie Mercury in pure CSS. I want to do this because I love seeing what other people have made in CSS and have always wanted to try it, and I love Freddie Mercuriy. I've played around with simple CSS art in the past, but I've never taken on anything quite like this!
The image I am working from is a black and white image of Freddie in a white tanktop looking into the camera. It's probably his most iconic look.
For my first day working on this, I just focused on creating the background. I simplified the gradient and used a color picker to get the colors as close to the original as possible.
	.frame {
	border: 2px solid pink;
	width: 740px;
	height: 740px;
	margin: 0 auto;
	background-image: linear-gradient(#B5CFE8, #7892AB 10%, #CAE4FD 100%);
	}

	body {
	background-color: black;
	}