Angular Components with a Distorted Background

Having a little design issue with CSS Adjustments. I successfully skewed the backgrounds of all sections and elements, but towards the footer, I'm having trouble joining the article and footer as I want it to. Can anyone please help me figure out how to fix this? Here is the link to my plunker:

<https://plnkr.co/edit/iCgonAiCoBUfSaAF851P?p=preview>

Answer №1

Update the CSS as shown below

section {
background-color: #191919;
  color: #ffffff;
}
section, article {
  transform: skew(0deg, -10deg);
  padding: 20px;
}
section>div, article >div{
    transform: skew(0deg, 10deg);
}
article {
  background-color: #ffffff;
  color: #000000;
}

Check out this Plunker demo

Answer №2

If you're looking to enhance your design, consider implementing a background color for the body and adjusting the margin-top for the footer. You can achieve this effect by utilizing the following CSS code:

body, html {
    height: 100%;
    margin: 0;
    background:#191919;
}
.hero-image {
  background-color: #6c7cd0;
  padding: 200px 0;
  transform: skew(0deg, -10deg);
  margin-top: -150px
}
.hero-text {
  transform: skew(0deg, 10deg);
  text-align: center;
}

.wrapper {
  transform: skew(0deg, -10deg);
  background: #191919;
  color: white;
}
section, article {
  transform: skew(0deg, 10deg);
  padding: 20px;
}
.wrapper::after{
  transform: skew(0deg, -10deg);
}

div > h1 {
  margin-top: 50px;
}
footer {
  text-align: center;
  background: #6c7cd0;
  color: white;
  margin-top:50px;
  padding: 20px;
} 

Please keep in mind that adjustments may be necessary for larger viewports due to potential skewing issues within your layout.

We hope these suggestions prove to be helpful!

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

Using various conditions with ng-class in AngularJS

Is there a way to include an additional condition in the code snippet below? <div ng-class="{true: 'complete'}[item.Id != 0]"></div> I want to add "{true: 'abc'}[item.name == "FName"] to this code. Can someone provide assi ...

When FullCalendar eventRender is called, it can cause the browser tab to become

I'm working with the FullCalendar plugin within AngularJs. Everything is functioning properly. However, when I add background color, image, tooltip, and label for each event in the eventRender event, it causes the browser tab to freeze for a few seco ...

What could be the reason for my directive not properly interpolating the scope variable?

I attempted to create a directive that would swap out a CSS link with an inline style definition. Check out the functional version here. Now, I am hoping to achieve the same functionality using interpolation, so that I don't have to manually set the ...

Is it possible to add results in ng-repeat dynamically?

I am attempting to organize a simple collection of invoices from the Northwind dataset using AngularJS. The challenge I am facing is that there are multiple individual items associated with the same OrderID, and I would like to display these together in a ...

Enhancing Twitter Bootstrap with custom media queries for an extra-small breakpoint

It came as a surprise to me that Twitter Bootstrap does not include media queries specifically for creating a well-suited version of a website for mobile portrait screens. Defining the width for "mobile portrait" is a bit complicated. In the past, most ph ...

When incorporating "<" or ">" into a parameter value in Angular Translate and then showcasing it in a textarea with ng-model

In my Angular Translate string, I am using a parameter that can be in the form of <test>. However, when this translate is displayed in a textarea, it shows up as &lt;test&gt; instead of <test>. Is there a way to ensure it appears correc ...

Navigation bar at the bottom using Twitter Bootstrap 3 that includes a combination of full-width and regular containers

I've been tasked with recreating the designer's layout using Bootstrap. The desired layout consists of two full-width bars and a fixed container for the main content and footer menu. I have successfully implemented this layout, including respons ...

Interactive Image Carousel Using <ul> and <li> Tags

I am facing an issue with my image gallery slideshow using <ul> and <li> in HTML and CSS. The problem is that it is not responsive on mobile devices, as evidenced by the link provided herehere (I am accessing it from a smartphone). In the ima ...

The Distinction Between "Q" and "q" in AngularJS and RequireJS

Currently, my project involves developing a single page application using AngularJS, Breeze, and RequireJS. While trying to configure AMD with requirejs to integrate Angular and Breeze, I ran into an issue related to Breeze's dependency on "q". Intere ...

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

Tips for dynamically assigning values to scope variables in AngularJS

My ng-model looks like this: <tr ng-repeat="user in users"> <input type="text" ng-model="code[user.id]"/> When I set $scope.code = {0: 'value'};, it works fine. However, if I try to pass a dynamic value like: var index = 0; $scope ...

ui-bootstrap pagination refreshing page number when initializing

Having trouble with the pagination directive from the ui-bootstrap library. When I navigate to a specific page via url, my controller initializes correctly with the desired page from $stateParams, but then the pagination directive triggers the ng-change fu ...

Remove the whitespace between the <h2> element and the CSS animation

Is there a way to remove the space between h2 and the animation in the following code snippet? .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 2s li ...

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

Create a container-fluid design in Bootstrap with various colors

I am aiming to create a design with a fluid container featuring different background colors on each side, separated by two columns within the container. I have visualized it in this image - do you think it is feasible? https://i.stack.imgur.com/KRc2Q.pn ...

What is the best way to include personalized attributes in a form_for?

Here is the code I am working with: <%= form_for @quiz do |f|%> <% @questions.shuffle.each do |q| %> # get_answers returns an array of 4 random answers <% answers = q.get_answers %> <%= f.label q.inquest %><br> ...

Positioning a Duplicated Element with Precision in jQuery

I am having trouble positioning a cloned div using jQuery. Even when I try to add CSS to the cloned element using the .css() method, it only affects the text and not the entire element. Here is a link to the fiddle for reference: https://jsfiddle.net/emil ...

Transferring Chart Div Titles Above Bars

Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end? <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; ...

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...