Creating an overlapping effect between a card deck and a carousel design

My goal is to create a website that resembles the design in this https://i.sstatic.net/WjaIE.png link.

You'll notice there's currently a white background behind my yellow background and carousel. Is there a way to change the background color behind my card deck from white to the same color as my carousel?

HTML

<div class="row-lg" id="backcolor">
  <div class="card-deck mx-auto" id="card-deck">
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody1">
        <h5 class="card-title" id="cardtitle1">Card 1</h5>
        <p class="card-text" id="cardtext1">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody2">
        <h5 class="card-title" id="cardtitle2">Card 1</h5>
        <p class="card-text" id="cardtext2">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody3">
        <h5 class="card-title" id="cardtitle3">Card 1</h5>
        <p class="card-text" id="cardtext3">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody4">
        <h5 class="card-title" id="cardtitle4">Card 1</h5>
        <p class="card-text" id="cardtext4">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody5">
        <h5 class="card-title" id="cardtitle5">Card 1</h5>
        <p class="card-text" id="cardtext5">Card text 1</p>
      </div>
    </div>
  </div>
</div>

CSS

#card-deck {
  padding-top: 190px;
  height: 450px;
  width: 1200px;
  margin: 0 auto;
}

#card-deck .card {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 300px;
  text-align: center;
}

#card-deck .card h5 {
  color: orange;
}
htmlcssbootstrap-4

Answer №1

Update: In order to ensure that the card container floats above the two elements, we need to adjust the positioning within the #card-deck.

To achieve this, follow these steps:

  • position:relative allows us to adjust its position relative to its parent div
  • Include top:30px; to position it 30px below its original placement
  • Remove height and padding properties as the cards' height will dictate spacing
  • Add z-index:1 to place it above other elements

Apply the following CSS for the #card-deck:

#card-deck {
  width: 1200px;
  margin: 0 auto;
  position:relative;
  top:30px;
  z-index:1;
}

Check out the revised fiddle: https://jsfiddle.net/8y4ojb5t/

Answer №2

Perhaps you overlooked adding the # before background-color.

Your current css:

#backcolor{
    background-color: F1F0F0;
}

To fix this, update to:

#backcolor{
    background-color: #F1F0F0;
}

The issue causing your image to be cut off is likely due to the padding within the container-fluid. To resolve this, simply remove the left and right padding.

Consider using this css:

 .container-fluid{
         padding-left: 0;
         padding-right: 0;
    }

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

Once you exit the input field, a function activates to alter the background color of the input

Is there a way to trigger a function that changes the background color of an input field when the cursor leaves it? I tried implementing this solution, but it didn't work as expected. <!DOCTYPE html> <html> <body> Enter your name: & ...

javascripthtml

What is the best way to define a starting value for a datepicker?

In my current view, I am using the following code: @Html.EditorFor(model => model.StartDate, new { htmlattributes = new { @class = "datepicker" } }) I attempted to modify it like this: @Html.EditorFor(model => model.StartDate, new { htmlat ...

asp.net-corerazorbootstrap-4

Cross-platform mobile browsers typically have scrollbars in their scrollable divs

I have successfully implemented scrollable div's on a page designed for tablets running Android 3.2+, BlackBerry Playbook, and iOS5+ (except iPad 1). However, I would like to add scrollbars to improve the user experience. For iOS5, I can use the suppo ...

javascriptandroidcsswebkitscrollbars

Creating universal CSS for all platforms

Seeking assistance in making this Chrome CSS code compatible across different platforms. It currently does not function properly in Firefox and is completely non-functional in IE8. Your help is greatly appreciated, thank you for taking the time to read. . ...

cssgoogle-chrome

The importance of adding blank spaces in email formatting

A Visual Basic 6 application is sending a HTML email. The issue is that when the email is received, all blank spaces are removed. For example, in the code snippet below, the email sent says "this is a test" instead of displaying the actual spaces on line ...

htmlvb6

Embed information from a MySQL database into an HTML layout

I have a main webpage containing various links (e.g. fist_link, second_link, etc...) When a user clicks on any link, it should open blank_template.html. If the user clicks on fist_link, the template should display the first string from the database table. ...

javascriptphphtmlmysql

Tips for aligning a div within another div using ReactJs

I'm having trouble positioning the children div at the end of the parent div in my code using reactJs, NextJs, and styled-components. Here is the ReactJS code: <a href={links[indexImg]} target="_blank" > <Carousel image ...

javascriptcssreactjsnext.jsstyled-components

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

cssangularbootstrap-4

Converting a key-value pair string into an array in PHP: A comprehensive guide

When the checkbox is selected, I will extract the values listed below: attribute_value:samsung, attribute_id:1, spec_group_id:2, prod_id:1 To convert the above string into an array format and obtain a single array outside of the loop. Therefore, if I wa ...

phphtml

Angular Dropdown Menu

When working with Angular, I encountered an issue with creating a drop down. Despite having a list of items, only the first item is displayed in the drop down menu. <div class="form-group"> <h4>Projects</h4> <div *ngFor="let ...

angularbootstrap-4angular-dragdrop

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

Creating a bottom bar using React and Material UI

I'm currently working on implementing a footer that will be displayed on every page of my Next.js application. To style this, I am utilizing Material UI. The following component is responsible for defining the layout across all pages of the app: impo ...

cssreactjsmaterial-ui

The rotation feature for legends in Highcharts does not function properly on Internet Explorer 10 and 11 if the document mode is

When using Internet Explorer 10 or 11, rotation works perfectly fine if we select edge mode, as shown in the image. This information was taken from the High Chart Demo Charts. However, if we select Document mode 8 in IE 10 or IE 11, the rotation does not ...

javascriptcssinternet-explorerhighcharts

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

javascripthtmlangularjsbrowserstatic-resource

Is it possible to use one table as a background and place another table on top of it?

Currently, I am designing an email template and due to restrictions, I can only use tables. I am looking for a solution to meet my requirements using tables. Since all the content is dynamically generated via an RSS feed, images cannot be used in this ca ...

csshtmlhtml-email

JS form validation malfunctioning

XHTML <form name="suggestion" method="post" action="suggestion.php" class="elegant-aero" onSubmit="return validate()" > <label> <span>Message :</span> <textarea id="Message" name="m ...

javascripthtml

Designing an advanced remote upload system using jQuery AJAX and PHP

Currently, I am in the process of developing an image hosting script and everything is going smoothly so far. To enable local uploading with drag & drop + AJAX, I have utilized various plugins which are working perfectly. Now, I am moving on to implementin ...

javascriptphpjqueryhtmlajax

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

htmlcsspure-css

Enabling the autowidth label expands the width of the td element

I am facing an issue where a label inside a table td grows in only one line when its width is greater than the td width. This results in the td expanding and not showing all the text. I would like the label to break into a new line when its width exceeds ...

htmlcssstylesheet

challenges encountered while using .css() to customize the height

Currently, I am working on a tutorial to learn about basic jQuery plugins. I am facing a challenge in understanding why my code is not adjusting the height of my <p></p>. The task requires creating a plugin that can set the height of specified ...

jquerycssplugins