Is there a way to apply an indigo color solely to a div using CSS without affecting the entire body?

Can someone help me achieve a result similar to the image shown https://i.sstatic.net/IY1kI.png

I've been working on some code, but I haven't been able to get the exact desired outcome. My goal is to make a div indigo and leave the rest of the body white.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <!-- Bootstrap and fontawesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body >
<style>
   .arc {
       
       position: absolute;
       width: 3.5em;
       height: 2em;
       border-radius: 70%;    /* make it circular */
       
       border-bottom:5px solid brown;  /* the arc effect */
       z-index: -1;
   }
   
   .wrapper > .arc {
       display: block;
   }
   body{background-color:indigo !important}
</style>
<div class="wrapper container" >
    <div class="arc"></div>
    <div class="exp"><span style="color:white !important">Example</span></div>
</div>

        
</body>
</html>

htmlcssbootstrap-4

Answer №1

Here's a simple idea: let's add a new container called "logo" with specific dimensions for height, width, background color, and flexbox properties to the "container" class selector. A touch of white space in the right spots completes the look. I hope this solution meets your needs.

.arc {
  margin-top: 0.75rem;
  position: absolute;
  width: 4.4em;
  height: 2em;
  border-radius: 70%;
  /* create a circular shape */
  border-bottom: 5px solid brown;
  /* adds an arc effect */
}

.wrapper {
  height: 90%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  margin: 1rem;
  background-color: indigo;
  width: 90px;
  height: 45px;
}

.exp {
  font-size: 1.2rem;
}
<html>

<head>
  <title>Page Title</title>
  <!-- Include Bootstrap and fontawesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="logo">
    <div class="wrapper container">
      <div class="arc"></div>
      <div class="exp"><span style="color:white !important">Example</span></div>
    </div>
  </div>

</body>

</html>

Answer №2

<style>
    .container{
        background-color:#4B0082;
    }
</style>

By using this code snippet, you can limit the use of indigo color to your badge design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vertical text alignment alongside an image in multiple lines

I have been struggling with aligning multi-line text next to an image in a responsive design. No matter what I try, when the browser window is resized and the text becomes multi-lined, it always falls below the image positioned to the left of it. Can any ...

csshtmltextvertical-alignment

Error in Bootstrap Auto-complete: Property " " cannot be read because it is undefined

I am attempting to implement Bootstrap autocomplete with Django. I have tested the calls and the ajax request successfully sends to my views, but I am not receiving a response in my form. An error appears in the console stating: Uncaught TypeError: Cannot ...

javascriptjquerydjangobootstrap-4

Struggling with proper vertical alignment using Flexbox and achieving center alignment

I've been using JavaScript for displaying dynamic text and images, but I'm facing some formatting issues. Currently, I'm utilizing display: flex to position the text and image next to each other, but I'm struggling with horizontal alig ...

htmljquerycss

Obtaining attribute from an object using JQuery

I am experiencing an issue with extracting the innerHTML from an object. The code I currently have is as follows: console.log( $(myString).find("#" + someID).prevObject ); The variable myString contains HTML code in string format someID represents the ...

jqueryhtml

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

"Utilizing Express.js and PHP for Streamlined Functionality

I have been working on a project that involves using expressjs, Php, Html, and MongoDB. Here is the code snippet from my "Index.Html" File: <form action="/Login" method="POST"> <input type="text" placeholder="name" name="Username"> <in ...

javascriptphphtmlmongodbexpress

Looping through each <li> element using JavaScript, insert an image with a hyperlink that redirects to a different page within every li item

I am looking to iterate through each <li> element and dynamically add an image with a link that redirects to a different page using JavaScript. The goal is to store all images, links, and titles in an array object by utilizing the Document Object M ...

javascripthtmlurldomhyperlink

Challenges with asynchronous form groups in Angular: comparison between Edge and Chrome

I've set up a FormGroup where certain fields need to be disabled or enabled based on whether a checkbox is checked or not. Initially, my code was working fine, but I encountered an issue when testing it on Microsoft Edge (only previously tested on Chr ...

htmlangularasynchronousformgroups

Having difficulty deleting a checkbox element using JavaScript

My goal is to have a feature where users can effortlessly add or remove checkbox div elements as needed. The code I have written successfully adds and resets checkboxes, but I am encountering an issue when trying to remove them. I am struggling to identif ...

javascriptjqueryhtml

Tips for concentrating on the initial input field produced by an ng-repeat in AngularJS

Currently, I am dynamically generating input fields using ng-repeat and everything is working smoothly. However, my requirement is to set focus on the first input that is generated by this ng-repeat based on their sequenceId values. So far, I have attempte ...

javascripthtmlangularjs

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

htmlcssresponsive-design

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

Tips for inserting an image within two divs within the .row class (leveraging Bootstrap 4)

Take a look at my code snippet: <div class="row"style=""> <div class="panel panel-success col-sm-3" style="background-color: #d16b55; "> <div class="panel-body" style="height: 1000px; margin-left: 50px;overflow: hidden !important;"> ...

htmlcssbootstrap-4

Safari's Web Audio API suffering from subpar performance and various shortcomings

For my University project, I am developing an HTML and JavaScript-based mp3 player using the Web Audio API. You can check out the progress of this project by visiting this link: While everything is running smoothly on Firefox and Chrome, Safari is posing ...

javascripthtmlaudiosafariweb-audio-api

Is it necessary to contain every element within a row and column in the Foundation or Bootstrap grid system?

I have been exploring both Foundation and Bootstrap frameworks lately. A theoretical question came to my mind - do I always need to place each element inside .row>.column (for Foundation) or .container>.row>.col-- (for Bootstrap), even if I don&ap ...

csszurb-foundationfrontendtheorybootstrap-4

Struggling with creating a unique business card design with CSS

Currently, I am working on designing a business card that features the name and title at the center, with the email and phone number positioned on the extreme left and right sides of the card. Below is the code snippet I have been using: .business-card ...

htmlcssresponsive-designflexbox

What is the method for adjusting the text color in an HTML document?

Is there a way to modify the text color of this statement: You Have Already Earned Credit For This Link? <div id=\"myform\" style=\"visibility: hidden;\"> <font size=2><b>You Have Already Earned ...

htmlcss

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Currently, I am embarking on a project to streamline data entry for myself. I have SQL tables set up in an Azure database, and I can effortlessly write Python code to add data to them. However, my next endeavor is to develop a web application that allows ...

pythonhtmlsqlflaskweb-applications

Resetting the value of a radio button input option to null using Angular2 ngModel

In my Angular2 application, I am attempting to implement radio button inputs using ngModel and value. The goal is to have three options: true, false, and null. However, I am struggling to assign a value of null to one of the inputs. Ideally, when nothing ...

htmlformsangularradio-buttonngmodel

How can the height of a Material-UI Grid item be dynamically set to match its width?

I am trying to create grid items that are square, where the height matches the width: const App = ({ width, items }) => ( <Grid container> {items.map((v) => ( <Grid item md={width}> // I want this Grid item to be square ...

cssreactjsmaterial-ui