CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. Additionally, when the width is reduced significantly, the screenshot also shrinks in size. To better convey my idea, here are some visuals:

https://i.stack.imgur.com/nInhI.png

https://i.stack.imgur.com/9WMuk.jpg

https://i.stack.imgur.com/7UOFq.png

Below is the code I have come up with; I hope it proves useful to others:


   &.accounts {
    display: block;
    margin: 0 auto;
    height: auto;

    .text {
      width: auto;
      padding: 0;
      text-align: center;
    }

    .image {
      width: auto;
      height: 300px;
      background-image: url('/assets/scrn-accounts.png');
      background-repeat: no-repeat;
      background-position: 100px 0;
      background-size: cover;
      margin: 20px 0;
    }
  }
jqueryhtmlcssresponsive

Answer №1

If you want to replicate the look of the screenshots provided, try creating a straightforward two-column grid layout. Assign the right column a background-image mirroring your chosen screenshot. This way, as you adjust the window size, more or less of the image will be visible.

.grid {
  display: flex;
  max-width: 1024px;
  margin: 0 auto;
}
.grid-item {
  width: 50%;
}
.text {
  padding: 40px 10px;
}
.image {
  background-image: url('http://placekitten.com/800/400');
  background-size: cover;
  margin: 20px 0;
}
<div class="grid">
  <div class="grid-item text">
    <h1>Your Content Here</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis lectus sed risus auctor pellentesque. Proin sed purus velit. Vivamus vehicula bibendum mi euismod ornare. Proin non lacus varius lorem tempor ullamcorper at eu eros. Quisque ullamcorper dui id sodales interdum. Curabitur rhoncus, erat et sollicitudin auctor, odio nibh lacinia dui, eu tincidunt tellus turpis fringilla ipsum. Aliquam consectetur augue malesuada dolor viverra tempor. Suspendisse ornare. </p>
  </div>
  <div class="grid-item image">
  </div>
</div>

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

The allure of Beautiful Soup lies in its ability to effortlessly gather every <br/> tag nestled within the <strong> element

I'm facing a peculiar issue that's getting on my nerves. Trying to convert HTML into markdown, but the formatting of my HTML is quite unusual. It includes things like: <strong>Ihre Aufgaben:<br/></strong> and <strong> ...

pythonhtmlparsingbeautifulsoupdom-manipulation

Step-by-step guide on creating a clickable button that triggers the appearance of a block showcasing a dimmed photo upon activation

Is there a way to create a button that triggers a pop-up block featuring a darkened photo when clicked? ...

javascripthtmlcssbootstrap-5

Step-by-step guide on populating input fields with JSON data for each row

As a beginner in Programming, I have been searching for an answer to the following problem on this site for days but haven't been able to figure it out yet. To explain briefly, there will be an input form where the user can define the number of rows ...

javascriptphpjqueryajax

The pseudo class before is experiencing issues with background color in Safari and not functioning as

Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...

csssafaricross-browserpseudo-class

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

javascriptjqueryhtmlcss

What are the steps to adjust the width of a website from the standard size to a widescreen

Is it possible to create a "floating" screen adjustment on websites? I know you can set the standard size of pixels, but how do sites adjust for different screen sizes like wider laptop screens? Does it automatically detect the reader's screen size an ...

javascripthtmlcss

Retrieve the element's ID based on its class identifier

There are two elements in my document that have the class "rate". The first element has an id of "1" and the second has an id of "2". When I click on one of these elements using the following code: $(".rate").click(function() { var id = $(this).attr(&a ...

jqueryselector

Exploring the dynamic capabilities of JSON with ASP .Net

After successfully retrieving JSON data from a database using PHP through json_encode() and jQuery parsing, I'm curious if there is a similar method for accomplishing this dynamically in ASP.Net Web Forms. Specifically, without the need to pre-determi ...

jqueryasp.netajaxjson

The sample Ajax XML code provided by W3Schools is ineffective

While studying xml parsing in ajax on w3schools.com, I came across an example that functioned perfectly online. However, when I saved it to my desktop as abc.html and note.xml, the XML values weren't displaying. Even though the HTML elements were vis ...

javascripthtmlxmlajaxdom

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

tips for making a row stand out in a massive table with jquery

When changes are made to data rows on tables or any other item with multiple rows of data, I have observed that the edited row temporarily turns yellow before returning to its original state. In my case, I have a data table with approximately 500 rows. A ...

jquery

There was a json parsing error that occurred due to an uncaught TypeError. The error message stated that the 'in' operator cannot be used to search for '1009'

I'm currently working on a project where my application makes an Ajax call to a PHP script that returns data encoded in json_encode. The PHP script is returning the data as expected. However, when attempting to parse it in jQuery, I encounter a conso ...

phpjqueryjson

Animating a Bootstrap 4 card to the center of the screen

I am attempting to achieve the following effect: Display a grid of bootstrap 4 cards Upon clicking a button within a card, animate it by rotating 180 degrees, adjusting its height/width from 400px - 350px to the entire screen, and positioning it at the c ...

javascriptjqueryhtmlcssbootstrap-4

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...

javascriptjquerycsshtml

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Within this element, there is a text input field that allows users to search for specific items. Next to the input field is an icon image that can be clicked on to trigger a jQuery onclick event. This event sends an AJAX request to a PHP file, retrieves da ...

javascriptjqueryhtml

issue with eval() function

I am attempting to convert a JSON string from my .php file using the eval() function, but it is not working. The browser console shows a SyntaxError: expected expression, got '<'... However, when I comment out the line where eval() is used an ...

javascriptphpjqueryjson

What is the best way to use CSS to evenly lay out a group of dynamically generated buttons?

My Vue-generated buttons need to be evenly laid out on the bottom of the page, with equal space on the left and right. The mdui button style I am using has fixed width and height, so I have to decide between a single row for fewer buttons (less than three ...

cssvue.js

Excessive delay in executing Javascript loops

While developing an EMI calculator for a hybrid mobile app, I encountered a performance issue. The execution within one of the loops takes too long, resulting in the page becoming unresponsive. Here is my code snippet: var EMICalculator = { basicEMI: fun ...

javascriptjquerywhile-loop

Merging JavaScript with Less

As I attempt to extract the height of a div using JQuery and style it with less, I am facing an issue. Despite placing my JavaScript at the bottom of the page and less at the head, the compilation of less appears to occur after my JavaScript. Upon attempt ...

jqueryless

Ways to transfer data to a different PHP file without the need to navigate to the actual page

How can I make a button send information to another PHP folder while staying on the same page? <button class="btn btn-outline-dark w-60"><?php echo "<td> <a href='carrinho.php?acao=adc&id=$PegaID'>Adicionar ...

phphtmlmysql