Visual Identity Exercise

Developer
Acemir Sousa Mendes
Size
1,864 Kb
Views
30,360
  1. Visual Identity Exercise Previews
  2. Visual Identity Exercise HTML Codes
  3. Visual Identity Exercise CSS Codes

How do I make an visual identity exercise?

What is a visual identity exercise? How do you make a visual identity exercise? This script and codes were developed by Acemir Sousa Mendes on 10 August 2022, Wednesday.

Visual Identity Exercise Previews
IQ Test

Visual Identity Exercise - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visual Identity Exercise</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
</div>
</body>
</html>

Visual Identity Exercise - Script Codes CSS Codes

.col { width: 40px; height: 40px; background: #000; display: inline-block; margin: 0; position: relative;
}
.row { font-size:0;
}
.row:nth-child(2) .col:nth-child(2):before,
.row:nth-child(2) .col:nth-child(4):before,
.row:nth-child(2) .col:nth-child(5):before,
.row:nth-child(2) .col:nth-child(7):before,
.row:nth-child(2) .col:nth-child(8):before,
.row:nth-child(3) .col:nth-child(3):before,
.row:nth-child(3) .col:nth-child(6):before,
.row:nth-child(3) .col:nth-child(7):before,
.row:nth-child(3) .col:nth-child(8):before,
.row:nth-child(3) .col:nth-child(9):before,
.row:nth-child(4) .col:nth-child(3):before,
.row:nth-child(4) .col:nth-child(6):before,
.row:nth-child(5) .col:nth-child(3):before,
.row:nth-child(5) .col:nth-child(7):before,
.row:nth-child(5) .col:nth-child(8):before{ content: ''; display: block; position: absolute; border-radius: 50%; width: 36px; height: 36px; background: linear-gradient(#66cc88,#66a8cc); top: -18px; left: -18px;
}
.row .col:after { content: ''; display: block; position: absolute; border-radius: 50%; width: 10px; height: 10px; background: linear-gradient(#66cc88,#66a8cc); top: 50%; left: 50%; margin-top: -5px; margin-left: -5px;
}
.wrap { -webkit-filter: blur(3.5px); filter: blur(3.5px);
}
body { margin: 40px; -webkit-filter: contrast(300%); filter: contrast(300%);
}
html { background: #000;
}
Visual Identity Exercise - Script Codes
Visual Identity Exercise - Script Codes
Home Page Home
Developer Acemir Sousa Mendes
Username acemir
Uploaded August 10, 2022
Rating 3
Size 1,864 Kb
Views 30,360
Do you need developer help for Visual Identity Exercise?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Acemir Sousa Mendes (acemir) Script Codes
Name
CSS animation syntax tests
CSS Gradient hover buttons
A Pen by Acemir Sousa Mendes
Shrinking Triangles
Atom
Fading trail test with pixijs
Clip fixed element test
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!