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

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

I have utilized Spring Roo to create a basic web project. The user interface is JSP-based with a Tiles layout. Upon examining the default layout code, I noticed that the script tags were defined as: <script src="${dojo_url}" type="text/javascript" > ...

javascripthtmlspring-mvc

Retrieving ViewBag Data following a successful $.ajax post in C# .NET Razor

When I use ajax to post data, it successfully goes through. However, when I try to retrieve the posted data from ViewBag on the controller side, I encounter an issue. Here's the Ajax Code: $.ajax({ type: "POST", url: '../Home/ ...

c#jquery.netajaxasp.net-mvc

Develop a JSF/XHTML project that showcases a single XHTML page containing duplicated content of itself

Recently, I encountered a scenario where I have an xhtml page containing a sessionscoped bean. I am looking to utilize this page twice within another html page - once on the left side and again on the right side of the screen. The issue I faced is that w ...

javahtmljsfxhtml

Using Python in Selenium to set the value of a dropdown menu within an <input> element

I am working with an HTML page that has a form containing a dropdown tag. My goal is to set the value of this dropdown tag using Selenium. When I retrieve the input element, here is the code snippet: driver.find_element_by_xpath("/html/body/div[2]/div/di ...

pythonhtmlseleniumxpath

Generating JSON responses using Django REST framework to facilitate table visualizations on the front end

I am facing an issue with my django-rest-framework where I am trying to display a table using the Google Chart data drawing library. However, I keep encountering an error message saying "You called the draw() method with a String rather than a DataTable or ...

jquerypythonajaxjsondjango

Encountering an issue in Angular 8 where a class is not being added after the page loads, resulting in an

Looking to dynamically add a class to a div element using Angular? I have a condition isTrue, and am utilizing the angular function ngAfterViewInit() to add the class hideOnLoad after the page loads when isTrue becomes true. Instead of traditional javascri ...

javascripthtmlangularangular8

Positioning an immovable element beneath a fixed element that can vary in height

I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based o ...

htmlcsscss-position

Implement jQuery to dynamically append form fields and utilize PHP Sessions to store the added fields for future reference

Currently working on a multi-paged form and seeking advice from the expert Stack community; This specific page enables users to dynamically add more input fields [type=text] to the form The setup includes a primary input field for "CHILD NAME" followed b ...

phpjquerysession

The spotlight is shifting towards validating a datepicker field using jQuery

I am currently working on validating a datepicker field using jQuery. However, whenever I try to validate it, the calendar popup opens up. I only want to display the validation message without the datepicker popup. ...

javascriptjqueryjquery-ui

Using HTML code to incorporate one HTML file into another's structure

As a skilled programmer, I understand the importance of code reusability. Despite being new to HTML and CSS programming, I often find myself writing repetitive code in one HTML file. Is there a way to avoid this redundancy? Can functions be utilized in H ...

html

Implementing a restriction clause while executing a load additional data feature

I'm currently working on implementing a basic load more function for my web page. Right now, the page displays 8 results from the database. When the user scrolls, a load more button appears. Clicking this button triggers an ajax request to another PH ...

javascriptphpjqueryajax

What is the proper way to implement JQuery within a constructor function contained in a JavaScript namespace?

Yesterday I ran into a problem when asking about using JQuery inside a JavaScript constructor function within a namespace. There was a bug in my code that caused me to get the answer to the wrong question. var NS=NS||{}; NS.constructor=function() { t ...

javascriptjquerynamespaces

Sending a JSONP request to a PHP script

For my application submission, I am trying to send a JSON object to a PHP script that will return a JSON response. The challenge here is that the domain does not comply with the same-origin policy, meaning the JSON is being sent from a different domain. Up ...

javascriptphpjqueryjsonajax

Adding Hebrew characters from the URL query string to a field's content

I have encountered an issue while trying to extract a query string parameter value and inserting it into a field. The parsed output is not as expected. Here is the URL with the query string: activities.html?t=שלום Instead of displaying the value "ש ...

jquery

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

htmlcss

Having two identical select2 forms on the same page

Integrating two select2 multi-value select boxes into my Rails application is proving to be a challenge. While the top form functions correctly, the bottom one refuses to work as expected. Despite my attempts at changing IDs and adding new JavaScript cod ...

javascriptjqueryruby-on-railsruby-on-rails-4jquery-select2

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

I am currently developing a small web application that creates exercise program printouts. The concept is simple - a user like a personal trainer can craft an exercise regimen and send it to their client via email using a unique link. http://www.myurl ...

phpjavascriptjquerysecurity

Is there a way to create animated CSS box-shadow depth using jQuery or CSS3 transitions?

This code snippet applies delays but doesn't seem to update the style changes until the loop completes: for (i=20;i>=0;i--) { var boxShadow = i+"px "+i+"px "+i+"px #888"; $('article').css("box-shadow", boxShadow); ...

javascriptjquerycsscss-transitions

using jquery, how can you send multiple parameters in an ajax request

Hello and welcome! I'm having trouble passing parameters through an ajax URL. I am attempting to send multiple data using the jQuery $.ajax method to my PHP script, but I can only pass a single data item when concatenating multiple data entries toget ...

javascriptphpjquerycssajax

Facing a dilemma: Javascript not updating HTML image source

I am facing an issue while attempting to modify the source of my HTML image element. Despite using document.getElementId('image') in my code, I am unable to make it work as intended. Surprisingly, there are no errors displayed. Interestingly, whe ...

javascripthtmlimage