Responsive flexbox letters...

Developer
Judith Neumann
Size
2,002 Kb
Views
14,168
  1. Responsive flexbox letters... Previews
  2. Responsive flexbox letters... HTML Codes
  3. Responsive flexbox letters... CSS Codes

How do I make an responsive flexbox letters...?

Only CSS... done with flexbox and responsive. What is a responsive flexbox letters...? How do you make a responsive flexbox letters...? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.

Responsive flexbox letters... Previews
IQ Test

Responsive flexbox letters... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive flexbox letters...</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="item-1">
<h1 class="letra1">C</h1> </div> <div class="item-2">
<h1 class="letra2">R</h1> </div> <div class="item-3">
<h1 class="letra3">E</h1> </div> <div class="item-4">
<h1 class="letra4">A</h1> </div> <div class="item-5">
<h1 class="letra5">T</h1> </div> <div class="item-6">
<h1 class="letra6">I</h1> </div> <div class="item-7">
<h1 class="letra7">V</h1> </div> <div class="item-8"> <h1 class="letra8">E</h1> </div>
</div>
</body>
</html>

Responsive flexbox letters... - Script Codes CSS Codes

body{ background:black; font-family:sans-serif; font-weight:bold;
}
.container{ width:100%; height:500px; background:black; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
[class^="item-"]{ width:65px; height:500px; font-size:5em; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
}
.item-6{ width:21px;
}
h1.letra1 { background: -webkit-linear-gradient(#00B7EA, #7AD0E8); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra2 { background: -webkit-linear-gradient(#FF00FF, #FF87FF); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra3 { background: -webkit-linear-gradient(#12EA45, #7AE894); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra4 { background: -webkit-linear-gradient(#FF3F00, #EA785B); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra5 { background: -webkit-linear-gradient(#FFF600, #FFF968); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra6 { background: -webkit-linear-gradient(#3300FF, #9F87FF); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra7 { background: -webkit-linear-gradient(#00F4F0, #60DCFF); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.letra8 { background: -webkit-linear-gradient(#FF0004, #FF7C7F); opacity:.7; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width:800px){ [class^="item-"]{ width:43px; height:500px; font-size:3em; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
} .item-6{ width:21px;
} .item-5{
margin-left:-9px;
} .item-7{ margin-left:-7px;
}
}
@media (max-width:480px){ [class^="item-"]{ width:33px; height:500px; font-size:2.1em; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;
} .item-6{ width:9px;
} .item-7{ margin-left:-3px;
}
}
Responsive flexbox letters... - Script Codes
Responsive flexbox letters... - Script Codes
Home Page Home
Developer Judith Neumann
Username judag
Uploaded October 13, 2022
Rating 4
Size 2,002 Kb
Views 14,168
Do you need developer help for Responsive flexbox letters...?

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!

Judith Neumann (judag) Script Codes
Name
Fireworks
Forest
Change your look...
Clo clo
Fantasy earth...
Landscapes animated icons...
Sad kitty
Css animals
Code and view
Pericles mi loro...
Create amazing web content 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!