HTML haphazard design

My goal was to design a page with an intriguing layout, as seen below.

Click here for an example of the intended layout

The issue I'm facing is determining the best method to achieve this.

I am utilizing bootstrap, and here is what I have implemented so far:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4" id="shapes" style="background: #FFF">
    <h1>Here's where the shapes will happen.</h1>
  </div>
  <div class="col-md-6" id="content" style="background: #999">
    <h1>page content</h1>
  </div>
</div>

My concept involves creating 2 columns, where the smaller one on the left (col-md-4) contains the shaped elements, while the other column displays the page content.

I am struggling with shaping the elements, do you have any suggestions on how I can tackle this challenge?

Thank you in advance!

jqueryhtmlcsstwitter-bootstrap

Answer №1

If you want to display two divs side by side and clip them using a custom shape, you can utilize the bootstrap grid system along with the clip-path: polygon() CSS property. Here's an example:

#shapes {
  -webkit-clip-path: polygon(100% 0, 94% 16%, 98% 37%, 93% 59%, 100% 91%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 94% 16%, 98% 37%, 93% 59%, 100% 91%, 100% 100%, 0 100%, 0 0);
  background: #323232;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6" id="shapes">
      <h1>Here's where the shapes will happen.</h1>
    </div>
    <div class="col-xs-6" id="content">
      <h1>page content</h1>
    </div>
  </div>
</div>

Clippy is a useful tool for creating polygon clips.

I hope this information proves 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

Calculate the total count of responses within the JSON data returned

Hello all, I need some guidance on calculating the total number of responses in a JSON response that adhere to a specific rule using JavaScript. Here is the JSON response that I am discussing: [ { "InvoiceNumber":"INV0319", "InvoiceOrd ...

javascripthtmljsonapirest

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

What is the rationale behind using YY to depict a 4-digit year in the date format of the jQueryUI datepicker?

Understanding the date format for the jQuery UI datepicker: YY represents a 4-digit year and Y represents a 2-digit year: YY = 2011 Y = 11 To learn more, check out http://docs.jquery.com/UI/Datepicker/formatDate Just wondering about the reasoning behin ...

jqueryjquery-uidatepickerdate-format

Issue encountered while trying to update field using dynamically created row

I am encountering a problem while trying to update the unit cost and total cost of dynamically generated rows in an inventory form that submits inventories to a database. The product names are fetched via autocomplete jQuery, as shown in the snapshots belo ...

javascriptjqueryautocomplete

The jQuery code is failing to run as intended

Recently, I encountered an issue with a HTML page that utilizes some jQuery libraries. The specific functionality in question involves a balloon floating across the screen, which works perfectly fine on my local machine. However, upon integrating this pag ...

jqueryjoomla

Having trouble with Facebook sign-in getting stuck on a blank page?

Upon encountering a blank page, I decided to check the source in Chrome and found the source code of the intended page. The issue lies with this Facebook login application page; it seems to get stuck on a blank page without showing any errors. Upon refres ...

phperror-handlinghtmlfacebook-loginlogin-script

Ensuring real-time updates occur every time a new record is inserted into the database

Currently, I am utilizing AJAX to retrieve data from a database. I have successfully implemented a way to display this data using AJAX and now I want to ensure that any additional data in the database is automatically added to the view as well. My dilemma ...

phpjqueryajaxcodeigniterreal-time

Updating Dropdown Selection in Angular 9 and 10

Is there a way to set attributes to "Selected" in HTML options based on a condition from a *ngFor loop in response.body of the component ts file? Below is the dropdown code: <select [(ngModel)]="customer.id"> <option *ngFor="let location of lo ...

htmltypescripthtml-selectangular9angular10

I'm having trouble getting my ajax call to work properly when I include form-tags. What could

I am encountering an issue with my simple ajax call. It seems that adding form tags to my code is causing the entire ajax response to break. I'm curious as to why this is happening. <div id="overviewList" class="col-sm-3 offset-sm-1 text-center"&g ...

phpjquery

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

Troubleshooting a mishap in setting up the change event for a dropdown in ASP.NET MVC

I am currently working on setting up a jQuery change event handler for a dropdown list in order to update a div called "payment" with HTML content returned from my controller action whenever a user selects a different value from the dropdown. Despite my b ...

jqueryasp.netajaxasp.net-mvc-3razor

There seems to be an issue with vertically centering row divs in Bootstrap

Struggling to center a row div vertically in an ASP.NET MVC project? Despite numerous attempts, the content remains at the top. Here's a quick fix with some eye-catching colors to illustrate the issue: Site.css: html, body { height: 100%; } #mm ...

asp.net-mvccssbootstrap-4

Leverage the Ajax response within a Jade template

I'm currently utilizing ExpressJS with the Jade template engine. My goal is to achieve the following: Within a Jade file, I need to extract a variable that will be used in a JavaScript file. This JavaScript file will then make an Ajax request to the ...

javascriptjqueryajaxnode.jsexpress

How can you make your InfoPath 2007 forms stand out with custom designs and branding?

Hello fellow developers, I'm interested in learning about the various methods, tools, and best practices for designing personalized InfoPath 2007 forms to be integrated into MOSS. I understand that this is a broad question, but any guidance would be ...

csssharepointformsinfopathbranding

What could be causing the FontAwesome social icons in <ul> to malfunction?

I'm a beginner and I've been following various tutorials to achieve my goal. The main objective is to create animated social icons in the footer. However, I have encountered an issue where the social icons from FontAwesome are not working. When ...

htmlcssfont-awesome

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

javascriptcssangulartypescriptbootstrap-4

Hiding the Previous or Next Button on the First and Last Item in a Twitter Bootstrap Carousel

Is there a way to hide the previous button on the first item and hide the right button when the carousel reaches the last item? I've tried different solutions but couldn't get it to work. Any help in understanding how to implement this for a Boot ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Expanding on current features with jQuery to enhance the code by incorporating validation checks for input boxes with values

Seeking assistance as a newcomer to the jQuery library. I have existing code that checks for selected values in select boxes and enables the search button accordingly. Now, I need help modifying the code to also check for input values in input boxes simul ...

javascriptjqueryhtmlforms

Incorporate 'Additional features' into the Navbar when adjusting window size

When the window is resized, I want to display a collapsed 'More options' button that will collapse all hidden <li> elements. Here is an example: <li id="menu_more_container" class="dropdown" style="display: none; ...

javascripthtmljquerytwitter-bootstrapnavbar

The navigation bar is failing to display all of the titles

Having trouble with my HTML page. I can only see the first word of the title in the drop-down list. The navigation bar refuses to center despite trying various styles. Below is my CSS code: background-color: #78706e; height: 100%; font-family: Arial; c ...

htmlcssdrop-down-menumenunavbar