PROWAREtech
CSS: Rainbow Linear Gradient
A rainbow effect for a background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Linear Gradient</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #ddd;
color: #000;
}
header {
display: table;
width: 100%;
height: 15vh;
background-image: linear-gradient(
to right,
#c8beff 0%,
#dea8f8 10%,
#a8deff 30%,
#bdfacd 42%,
#f3fabd 58%,
#fae3bd 70%,
#f8acab 95%,
#feaad4 100%
);
}
header h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
footer {
text-align: right;
}
</style>
</head>
<body>
<header>
<h1>RAINBOW FLOWER SHOP</h1>
</header>
<nav>
</nav>
<main>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ipsam tempora modi quas atque pariatur culpa. Veritatis, soluta possimus. Explicabo cum voluptatibus, voluptatum sapiente inventore at dolores maxime? Ratione quas dicta reiciendis molestias exercitationem eveniet cum fugit, nobis expedita veniam sequi rerum provident tenetur accusantium, distinctio iure unde at sed quaerat. Laudantium hic amet fugiat, quia recusandae labore quaerat velit perspiciatis tempora ad quos libero, maiores harum perferendis explicabo in voluptate illo pariatur. Animi quos mollitia maiores beatae quaerat. Numquam quo veniam quis voluptatem error sunt molestiae exercitationem tempora aliquam quaerat, consequatur laborum tempore nihil dolor architecto totam, ullam qui.</p>
<p>Nihil quibusdam nemo, id corporis, assumenda libero ea eius pariatur vitae praesentium quam eveniet alias reprehenderit rerum qui suscipit, odio quaerat officia unde. Quo ex quia, voluptatem molestiae vero eligendi nihil quis ducimus modi. Commodi necessitatibus quaerat sit suscipit hic corrupti numquam similique quod quam placeat, voluptatibus non assumenda, recusandae accusantium facilis ullam dolorum ratione nam reprehenderit excepturi fuga consequuntur magni. Cum enim ratione dolore, reiciendis ipsum quidem sapiente iste deserunt nemo commodi in dolorum ea optio delectus vel sint porro nihil ab quasi. Sit nisi esse totam molestiae id. Iusto voluptatem minima quo numquam eligendi et laborum, expedita officiis.</p>
<p>Id magni laboriosam distinctio nobis tempora suscipit placeat quod tempore in aut. A deserunt qui est accusantium natus molestiae, doloremque dolore, incidunt vero, quo cumque facilis aliquam optio quis voluptates asperiores corporis reprehenderit accusamus quam porro harum provident voluptas facere atque. Suscipit nam error a exercitationem esse rerum in? Suscipit obcaecati neque placeat possimus aliquam voluptas dignissimos asperiores ipsum sit nobis nemo iusto atque nesciunt qui, facilis earum fugiat magni! At quia iusto animi tempore nobis! Amet, dolore quibusdam laudantium numquam magni tenetur sapiente ad dignissimos debitis? Quia voluptate et, debitis, quae fuga odio minima numquam sequi ab deserunt possimus?</p>
<p>Assumenda eaque, rem minima, et quaerat provident ut expedita aliquam rerum culpa totam ipsam veniam aspernatur. Recusandae excepturi atque, libero suscipit, est ducimus repellendus, sapiente architecto dolore quis fuga mollitia laboriosam placeat doloribus assumenda at. Similique nostrum aut velit mollitia qui, nobis quod facere deserunt vel dolores voluptates odio placeat modi sed, rerum quisquam beatae animi sit soluta error tenetur. Optio ratione, excepturi earum veniam veritatis corporis aliquam quo sequi possimus voluptates. Consequatur numquam repudiandae delectus accusamus voluptates officia quod, provident soluta! Quia atque quidem, animi odit odio laborum temporibus. Ratione quasi voluptates blanditiis culpa laboriosam, nulla quo tempora necessitatibus?</p>
<p>Corporis, sapiente? Commodi aut, iure officiis sequi nostrum quos exercitationem odio, explicabo, temporibus ex tempore? Molestiae eos eum ipsa ullam voluptatem, cumque sequi veritatis excepturi sit, assumenda officiis. Consequuntur dolor modi temporibus, accusantium, amet explicabo voluptatibus provident, perferendis similique delectus ea suscipit enim voluptas atque. Consequuntur delectus illo vel esse dolorem voluptas, reiciendis iusto quia provident rerum obcaecati laudantium odio rem consequatur perspiciatis est odit quod recusandae quas nisi eos exercitationem quidem ullam. Corrupti culpa pariatur itaque repellat asperiores enim totam. Modi eveniet iusto aperiam eius libero, quae obcaecati laborum facilis autem corporis rem, soluta quia veritatis necessitatibus? Corrupti, alias.</p>
<p>Quas atque in quasi, harum, eveniet vero distinctio, optio corrupti fuga dicta ipsa. Rem id omnis cupiditate dolore assumenda eos tenetur. Labore est numquam vel doloremque deserunt corrupti ipsum accusantium ea autem saepe, perspiciatis dolore! Quidem id ipsum aspernatur distinctio sed nemo similique fugit deserunt dicta, doloribus sint, enim dolor facilis ut natus illo minus soluta voluptatibus minima assumenda tenetur possimus? Dolorem qui molestias, dicta commodi repellendus vel in soluta incidunt id aperiam molestiae laudantium consectetur iure officia, quaerat tempore quis error quibusdam accusantium debitis facere quisquam, consequuntur excepturi assumenda. Tempore architecto nostrum veritatis, sapiente recusandae adipisci nisi harum dolorem.</p>
<p>Neque rerum dolorum nihil quas perferendis amet quidem, tempore laudantium! Rem, a vitae? Recusandae sint voluptates quisquam provident sunt doloremque tempora hic placeat quis corrupti officiis ad magni beatae accusantium, vel harum quasi explicabo aperiam dolores ratione, eveniet at tempore similique sit. Iusto fuga eaque aliquam corporis eius ducimus similique, deserunt excepturi magni temporibus a sed consequatur voluptatibus exercitationem sit quibusdam aspernatur accusantium, illum voluptate voluptatem molestiae! Sapiente ad, dolores quibusdam recusandae nam deserunt placeat earum modi ab doloremque non tempore et consequuntur ea ullam necessitatibus, ipsum a! Architecto, ipsam consequuntur. Architecto aspernatur expedita vitae tempore nulla modi, voluptatem maiores.</p>
<p>Quos animi, quae est sit neque eius quidem itaque in, amet, minus tempore adipisci doloremque cum accusamus impedit aperiam sed quo. Itaque quae laudantium incidunt voluptate obcaecati consequuntur vel maiores, aut aspernatur fugiat neque possimus excepturi similique nobis officiis porro? Libero maxime, nulla laudantium quasi voluptas consectetur a quia ex consequatur dolorem commodi, laboriosam velit? Corporis assumenda sapiente non sunt amet dicta quidem iure laboriosam deserunt! Facilis, odio laudantium! At, nesciunt provident voluptates aut voluptatibus impedit repudiandae obcaecati quae, rem odio, suscipit similique. Necessitatibus aperiam iure odio dolores praesentium quasi perferendis dignissimos quod, omnis velit, nesciunt consequuntur tenetur deleniti voluptas.</p>
<p>Accusamus sit eveniet doloribus velit adipisci quae quisquam itaque pariatur, laudantium nobis atque! Error soluta cupiditate totam tempora quo. Ullam laudantium molestias rerum neque iste, esse sapiente alias quam atque amet dolores aspernatur, nulla perspiciatis autem enim saepe necessitatibus minima soluta repellendus modi doloribus? Fugiat doloremque expedita voluptas soluta commodi qui laboriosam fugit nostrum voluptatum aliquam explicabo provident natus itaque rerum non molestias perspiciatis placeat, dolores impedit. Id explicabo, sapiente deserunt totam vitae blanditiis odit ipsum nulla delectus quae numquam nemo autem nobis praesentium quaerat necessitatibus, incidunt nesciunt. Minima sunt iusto laudantium vitae totam esse repellat, harum ducimus sapiente error?</p>
<p>Rerum, hic repellendus officia numquam distinctio nostrum cupiditate rem aut, quos nam, labore sunt tenetur culpa laudantium voluptates? Dicta reiciendis quaerat sint accusantium veritatis perspiciatis, esse laboriosam dolorem id beatae officia sed nesciunt quis iure, fuga reprehenderit odio repudiandae soluta qui illo eveniet saepe voluptas animi similique! Blanditiis voluptas ullam tempora ipsum non inventore illum? Amet eum vero eaque itaque praesentium. Qui laborum ducimus quidem. Tempore est, consequatur cumque dolores quia, perspiciatis fuga cum fugit ipsa ex quidem voluptatem nostrum quod amet commodi veniam earum reprehenderit eum minus quae unde. Dolorem tempore laudantium debitis officia, accusamus quia asperiores quasi et.</p>
</main>
<footer>
© Rainbow Flower Shop
</footer>
</body>
</html>
Coding Video
Comment
