Multicolor border using conic gradient

hritik5102 · hritik5102 · commit e27d89da2bc8 · 2024-08-02T23:07:32.000+05:30
diff --git a/01-multicolor-border-using-conic-gradient/index.html b/01-multicolor-border-using-conic-gradient/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multicolor border using iconic gradient</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, odit.
+      Blanditiis quae ab odio impedit necessitatibus tempore accusamus ea
+      veritatis beatae, sint, iste deserunt rerum reprehenderit similique autem
+      quam consequuntur officiis dolore placeat fuga nulla mollitia non. Aut,
+      sapiente animi.
+    </p>
+  </body>
+</html>
diff --git a/01-multicolor-border-using-conic-gradient/style.css b/01-multicolor-border-using-conic-gradient/style.css
@@ -0,0 +1,47 @@
+:root,
+::before,
+::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Lora", serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: ghostwhite;
+}
+
+p {
+  width: 300px;
+  background-color: black;
+  color: white;
+  padding: 15px 25px;
+  border-radius: 8px;
+  position: relative;
+}
+
+p::after {
+  content: "";
+  position: absolute;
+  inset: -5px;
+  width: calc(100% + 10px);
+  height: calc(100% + 10px);
+  z-index: -1;
+  padding: 5px;
+  border-radius: 8px;
+  background: conic-gradient(
+    from 0deg,
+    #ff5f6d,
+    #ffc371,
+    #ffd700,
+    #32cd32,
+    #00fa9a,
+    #1e90ff,
+    #9370db,
+    #fff56d
+  );
+}
diff --git a/README.md b/README.md
@@ -4,6 +4,12 @@
 
 This repository is a collection of CSS projects created as part of a daily challenge to improve CSS skills. Feel free to explore, learn, and contribute!
 
+### Projects
+
+|  No.  | Project                                                                                                                     | Live Demo                                                                         |
+| :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| 01  | [Multicolor border using conic gradient](https://github.com/hritik5102/CSS-Daily-Challenge/)                             | [Live Demo](https://codepen.io/HritikDj/pen/XWLNjPB)               |
+
 ### Project Structure
 
 1. Each CSS project should be in its own folder.
