I am trying to find a way to add a similar box to a webpage like the one shown in this image.
The design I am referring to is from Reddit's theme, but I would like to know how to create a box with a different color and then have another box next to it in white. I have tried searching on Google using terms like "box with css", "css table box", etc. but haven't had any success.
What is this layout called and how can I achieve it?
It is likely that the height and width dimensions may need adjustments to align with your final code requirements. However, by using this snippet, you can explore how to apply border-radius to an outer card element and border-top-right-radius as well as border-top-left-radius to the inner card-header element to achieve the desired visual effect.
The display: flex property set on the card-header element enables the utilization of justify-content: space-between to create spacing between the title and ellipsis elements with minimal CSS rules.
I also incorporated additional styling to maintain consistency in colors, font styles, etc.
.body {
display: block;
background: #FAFAFA;
width: 1000px:
height: 1000px;
padding: 25px;
}
.card {
background: #fff;
border-radius: 5px;
width: 300px;
height: 400px;
}
.card .card-header {
display: flex;
justify-content: space-between;
color: #fff;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5px;
background: #4BA2AF;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}<div class="body">
<div class="card">
<div class="card-header">
<span class="title">COMMUNITY DETAILS</span>
<span class="ellipsis">…</span>
</div>
</div>
</div>I am facing a challenge with my code that is supposed to hide div elements containing a specific word along with additional text. I have tried multiple solutions but none seem to work effectively. Any assistance on how to hide divs properly will be greatl ...
I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...
Issue with Scroll Functionality in Generic List Component On the main page: <ion-header> <app-generic-menu [leftMenu]="'left-menu'" [rightMenu]="'client-menu'" [isSelectionMode]="isSelectio ...
Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...
Having a problem with my mui modal where the top content is getting cut off and I can't scroll up. I've tried adding the {overflow:"scroll"} property to the modal but it's not working. Here's the code snippet I'm currentl ...
I'm currently utilizing polymer's paper-dialog element in my application. While the dialog is always centered by default, I am looking to establish a minimum distance between the dialog and the right side of the window. This way, as the window re ...
Problem with Bootstrap toggle not working on multiple identical inputs unless the first input is pressed. Even then, not all inputs are checked/unchecked. I've created a small example I want to ensure that when one input is toggled, all others have ...
I am currently attempting to extract reviews data from booking.com that is contained within the <ul> tag with the class attribute set to "review_list". There are a total of 10 reviews, each of which is inside an <li> element with the class attr ...
I am currently working on a website, but I am facing some issues with the product listing pages and the tips and tricks page. It appears that there is an issue with jMenu and jFlipBook plugins not functioning properly. Since I didn't develop the origi ...
I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...
I'm facing a challenge when working with dynamic elements in jQuery and I really could use some help. Let me provide an example from my current project: main.js $(function () { renderPlaceList(places); setupVoting(); } The two functions are ...
My program has a CSS file that I defined, but for some reason it's not working. When I checked with firebug, the status is 200 OK, but no changes are occurring. I'm unsure if there is a syntax issue with my CSS file. Can you please provide your i ...
models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...
I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...
Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...
I am facing an issue where I have multiple draggable elements inside a Scrollbar using the mcustomscrollbar plugin. When I try to drag one of these elements to a droppable area located below the visible area of the scroller, the scroll does not automatical ...
I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...
I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...
I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...
I'm looking to implement a transparent box, with a button, that surrounds a table row when the user hovers over it. I've searched on Google but all the pages only talk about how to highlight rows on hover. I am currently using JavaScript to add ...