comiCSS

Guess the Brand (CSS Edition)

Instructions

The idea of the game is to guess the name of the brand/company that is described by the CSS code in the dark box. The selectors, properties, and values will give you important hints to solve the puzzle.

Click anywhere on this banner to close these instructions.

:target {
  /* styles */
}

Correct

Hint 1

6 letters

Hint 2

American retail corporation with a target as logo.

.brand {
  aspect-ratio: 1;
}

Correct

Hint 1

6 letters

Hint 2

Company that provides payment system and commercial solutions.

video {
  transform: scale(2);
}

Correct

Hint 1

4 letters

Hint 2

A popular videoconference service.

a[href^="#"] {
  /* styles */
}

Correct

Hint 1

8 letters

Hint 2

A professional site to connect with other workers, learn, or apply for jobs.

.brand::before {
  content: "🐄";
  color: #ff0000ff;
}

Correct

Hint 1

7 letters in 2 words

Hint 2

This drink will give you wings.

#fear {
  display: none;
}

Correct

Hint 1

6 letters in 2 words

Hint 2

A clothing brand that is never scared.

#brand {
  --b: #0000 49%, #fff 0 51%, #0000 0;
  background: 
    linear-gradient(var(--b)),
    linear-gradient(90deg, var(--b)),
    conic-gradient(
      #6dbf00 25%, 
      #ffb800 0 50%,
      #00a7f7 0 75%,
      #ff4200 0
    );
  aspect-ratio: 1;
}

Correct

Hint 1

9 letters

Hint 2

The company that brought you Windows... and Internet Explorer.

.brand {
  animation-duration: 0.00001s;
  color: #c0c0c0;
}

Correct

Hint 1

11 letters

Hint 2

A clothing retailer especialized in "surfing" attire.

#brand {
  background: 
    radial-gradient(
      200% 100% at 50% 0, 
      #0000 50%,
      mediumSeaGreen 0
    );
  background-size: 20% 100%;
  transform: scaleX(-1);
}

Correct

Hint 1

3 letters

Hint 2

The hint is a drawing of some waves.

.brand::before {
  content: "m";
  text-shadow: 1em 0, 2em 0;
}

Correct

Hint 1

2 letters (1 number and 1 letter)

Hint 2

This Minnesota company specialized in Minery and Machinery before expanding their product line.

#brand {
  aspect-ratio: 1;
  background: 
    radial-gradient(
      23% 100% at 28% 100%, 
      #0000 90%, #ff0 0 99%, #0000 0
    ),
    radial-gradient(
      23% 100% at 72% 100%, 
      #0000 90%, #ff0 0 99%, #0000 0
    ),
    #f00;
}

Correct

Hint 1

9 letters (and something else)

Hint 2

America's favorite hamburger chain.

#brand {
  aspect-ratio: 1;
  background: 
    radial-gradient(
      circle at 34% 50%, 
      #f00 30%, #0000 0
    ),
    radial-gradient(
      circle at 66% 50%, 
      #f90 30%, #0000 0
    );
  background-blend-mode: soft-light;
}

Correct

Hint 1

10 letters

Hint 2

A popular credit card company.

.brand {
  aspect-ratio: 1;
}

.brand::before {
  content: "\00a0";
}

Correct

Hint 1

11 letters

Hint 2

A web creation and hosting service.

hr {
  border: 1em solid gray;
}

Correct

Hint 1

7 letters

Hint 2

American wholesale electrical, communications and data networking business. The line is supposed to be a bar.

.brand::before {
  content: "⚑⚑⚑⚑⚑⚑";
}

Correct

Hint 1

8 letters in 2 words

Hint 2

One of USA's favorites theme parks.

.brand::before {
  content: "1";
  text-transform: uppercase;
}

Correct

Hint 1

10 letters in 2 words

Hint 2

This bank wants to know what's in your wallet.

#brand {
  background: 
    radial-gradient(
      closest-side circle, 
      #f00f 20%, 
      #0000 0 40%,
      #f00f 0 60%, 
      #0000 0
    );
}

Correct

Hint 1

6 letters

Hint 2

You already answered this one before.

#brand::before {
  content: "🙈";
  color: hsl(0 100% 50%);
}

Correct

Hint 1

9 letters in 2 words

Hint 2

An apparel company from LA. The full name is --- ------ Lifestyle.

#brand::before {
  content: "vii";
}

#brand::after {
  content: "xi";
}

Correct

Hint 1

2 words, can be written with numbers or letters

Hint 2

America's "favorite" pit stop and gas station.

#brand {
  font-family: serif;
}

#brand::before {
  content: "J";
  font-size: 4em;
  text-shadow: 0.5em 0;
  vertical-align: -webkit-baseline-middle
}

#brand::after {
  content: "&";
}

Correct

Hint 1

17 letters in 3 words

Hint 2

This company makes many products, amont them, some no-tears baby shampoo.

audio, 
video, 
article, 
.docs {
  aspect-ratio: 7 / 10;
  border: 15px solid gold;
  width: 140px;
}

Correct

Hint 1

18 letters in 2 words

Hint 2

You might have seen some publications or documentaries from this company.

input[type="checkbox"]:checked {
  /* styles */
}

Correct

Hint 1

4 letters

Hint 2

This is more of a gaming system/platform.

article {
  font-weight: 500;
}

Correct

Hint 1

6 letters

Hint 2

A popular website to write articles online.

[content] {
  /* styles */
}

Correct

Hint 1

4 letters

Hint 2

Facebook and Whatsapp are related to this company.

.brand::before {
  content: "T";
  color: hotpink;
  animation: move 1s infinite;
}

Correct

Hint 1

7 letters in 2 words

Hint 2

A giant German telekom.

[lang=es]:nth-child(5)::after {
  content: "🛏️";
}

Correct

Hint 1

8 letters in 2 words

Hint 2

A popular hotel chain with a Spanish name.

[href^="mailto:"]::before {
  content: "🐵";
}

Correct

Hint 1

9 letters

Hint 2

A newsletter and mailing online service.

sup::before {
  content: "8";
}

Correct

Hint 1

6 letters in 2 words

Hint 2

A cheap American motel chain.

#brand {
  aspect-ratio: 1; 
  border-radius: 50%; 
  background: 
    radial-gradient(
      farthest-side, 
      #0000 55%, 
      #000f 0
    ),
    repeating-conic-gradient(
      #fff 0 25%, 
      #19d 0 50%
    );
}

Correct

Hint 1

3 letters

Hint 2

A luxury car brand (the hint is the logo).

q + q {
  /* styles */
}

Correct

Hint 1

2 characters (1 letter + 1 number)

Hint 2

American fintech that provides electronic banking solutions. The Austin FC stadium sponsor.

#brand::before {
  content: "7";
  vertical-align: top;
}

Correct

Hint 1

7 characters in 2 words

Hint 2

A refreshing soda. Fido Dido was the brand mascot for a while

#brand {
  top: 0;
  vertical-align: top;
  align-items: start;
  margin-top: -1rem;
}

Correct

Hint 1

3 letters

Hint 2

A famous package delivery service.

.car {
  aspect-ratio: 6 / 5;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: 
    repeating-conic-gradient(
      from -30deg at 50% 66.66%, 
      #f00f 0 60deg, 
      #0000 0 120deg
    );
}

Correct

Hint 1

10 letters

Hint 2

Japanase automobile brand.

ol::before {
  content: "r";
}

ol::after {
  content: "ex";
}

Correct

Hint 1

5 letters

Hint 2

Seriously? This watch company is the dumbest puzzle in all the game!

img {
  aspect-ratio: 1;
  width: 164px;
  border: 18px solid;
  border-radius: 56px;
  background: 
    radial-gradient(
      circle at 82.5% 17.5%, 
      #000 0 6%, #0000 0
    ),
    radial-gradient(circle, 
      #0000 30%, #000 0 45%, #0000 0
    );
}

Correct

Hint 1

9 letters

Hint 2

A popular image/video sharing platform acquired by Facebook.

#brand {
  aspect-ratio: 1;
  width: 100px;
  border: 15px solid;
  border-radius: 50%;
  filter: 
    drop-shadow(80px 0)
    drop-shadow(160px 0);
}

Correct

Hint 1

4 letters

Hint 2

A luxury car brand from Germany.

:has(* + *) {
  /* styles */
}

Correct

Hint 1

6 letters

Hint 2

A toy and game maker.

#hamburger {
  width: 500Q;
}

Correct

Hint 1

10 letters in 2 words

Hint 2

American chain of soft serve ice cream and fast food restaurants.

.video {
  height: 120px;
  width: 200px;
  border-radius: 10% / 50%;
  background: 
    conic-gradient(
      at 100% 50%, 
      #0000 0 240deg, 
      #ffff 0 300deg, 
      #0000 0 360deg
    ) 50% 50% / 20% 50% no-repeat,
    red;
}

Correct

Hint 1

7 letters

Hint 2

The most popular video site on the Internet (probably).

.brand::before {
  content: "🍓";
  color: #000;
}

Correct

Hint 1

10 letters

Hint 2

Creators of a super-productive phone with full keyboard.

.brand::before,
.brand::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 25px solid;
  border-left-color: #0000;
  border-radius: 50%;
}

.brand::after {
  transform: scaleX(-1) translateX(-50%)
}

Correct

Hint 1

6 letters

Hint 2

This luxury fashion house was founded by a famous Coco.

#brand {
  aspect-ratio: 8 / 5;
  background:
    linear-gradient(
      #015 25%, 
      #0000 0 75%, 
      #015 0
    ),
    linear-gradient(
      90deg, 
      #fff 50%, 
      red 0
    );
}

Correct

Hint 1

13 letters in 2 words

Hint 2

This American fashion brand founded in 1985 has the name of its founder.

* + #brand {
  /* styles */
}

Correct

Hint 1

7 letters

Hint 2

A company famouse for their printers.

#brand {
  background: chocolate;
  display: flex;
  justify-content: space-between;
  color: #000;
}

#brand::first-letter {
  /* Won't work, but as a hint ;) */
  color: red;
}

Correct

Hint 1

7 letters

Hint 2

A popular brand of a hazelnut and chocolate spread.

#brand::before {
  content: "🌼🌸🌺🌹🌷🌳🌲";
  color: #808000;
}

Correct

Hint 1

11 letters in 2 words

Hint 2

A restaurant chain with Italian-American food.

td::before {
  content: "$$$";
  color: green;
}

Correct

Hint 1

6 letters in 2 words

Hint 2

An American bank, subsidiary of the Toronto Dominion group.

li > dl {
  /* styles */
}

Correct

Hint 1

4 letters

Hint 2

This is by far the easiest puzzle in the whole game... but, if you want a clue: a grocery storm from Germany.

:nth-child(n + 8) ~ * {
  color: chocolate;
  background: mintyCream;
}

Correct

Hint 1

10 letters in 2 words

Hint 2

A minty chocolate to enjoy in the evening.

hr {
  display: block;
}

Correct

Hint 1

A US tax-preparing company.

Hint 2

2 words, 8 characters (including an &).

:where(input, output) {
  &:nth-of-type(n + 2) {
    &::before {
      content: "📣🎉🥂";
    }
  }
}

Correct

Hint 1

8 letters

Hint 2

A brand of cereal rings made of honey and nuts.

Swipe or tab to go to a different level