outline and outline-offset

yavuzahmet1 · Oct 26, 2024 · 4c43a29 · 4c43a29
1 parent 5130540
commit 4c43a29
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 0 deletions.
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/images/banner.jpg b/frontend/html-css/class-notes/hc-09-CSS-combinators/images/banner.jpg
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/images/logo.png b/frontend/html-css/class-notes/hc-09-CSS-combinators/images/logo.png
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/index.html b/frontend/html-css/class-notes/hc-09-CSS-combinators/index.html
@@ -27,6 +27,9 @@
     <a href="#" target="_blank">Clarusway</a><br>
     <a href="#">Clarusway</a>
 
+    <h1 class="out">VOTE</h1>
+    <h1 class="cw">Clarusway</h1>
+
 </body>
 
 </html>
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/index.html b/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Practice</title>
+</head>
+
+<body>
+    <h1>Practice</h1>
+</body>
+
+</html>
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/style.css b/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/style.css
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/style.css b/frontend/html-css/class-notes/hc-09-CSS-combinators/style.css
@@ -28,4 +28,36 @@ div>p {
 
 a[target="_blank"] {
     background-color: aquamarine;
+}
+
+.out {
+    border: 2px solid red;
+    width: 10rem;
+    height: 10rem;
+    margin: 50px auto;
+    border-radius: 50%;
+    text-align: center;
+    padding-top: 60px;
+    box-sizing: border-box;
+    /* justify-content: center;
+    align-items: center;
+    display: flex; */
+
+}
+
+.out:hover {
+    outline: 5px dashed darkblue;
+    outline-offset: .5rem;
+}
+
+.cw {
+    border: 2px solid red;
+    width: 20rem;
+    margin: 50px auto;
+    text-align: center;
+    outline: 15px solid purple;
+    outline-offset: 1rem;
+    border-top-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    background-color: orange;
 }