I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png
Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below the title.
You can view my code sandbox here: https://codesandbox.io/s/nextjs-forked-xxn8g?file=/index.js
Any suggestions on the best practice to achieve this positioning? Thank you for your help.
Hey there! Here's a suggestion for you:
import React from "react";
import { render } from "react-dom";
import Head from "next/head";
const App = () => (
<div>
<Head>
<title>Testing Next.js</title>
</Head>
<div className="container">
<div className="wrapper">
<div className="innerwrapper">
<img
src="https://example.com/image.jpg"
className="title-image"
/>
<h1 className="title">Feedback Section</h1>
</div>
</div>
</div>
<style jsx>{`
.container {
width: 100vw;
height: 100vh;
background-color: #fcf7f9;
}
.wrapper {
max-width: 1440px;
margin: auto;
}
.innerwrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-weight: 800;
font-size: 2rem;
color: #00163a;
text-align: center;
z-index: 1;
}
.title-image {
max-width: 72px;
min-height: 50px;
max-height: 50px;
min-width: 72px;
}
`}</style>
</div>
);
render(<App />, document.getElementById("root"));
To utilize the image as a background for the "innerwrapper" element, you would need to do the following:
<div className="container">
<div className="wrapper">
<div className="innerwrapper">
<h1 className="title">What They Said</h1>
</div>
</div>
</div>
Then adjust the CSS accordingly:
.innerwrapper {
padding: 5rem;
background-image: url("https://rembux.vercel.app/_next/image?url=%2Fimages%2Fpretitle-image.png&w=96&q=75");
background-repeat: no-repeat;
background-position: left 30% top 15%;
}
If you prefer to maintain the image within an <img> tag, you can achieve this by manipulating the z-index property in the CSS rules.
I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...
Currently, I am looking for a solution to switch my layout from two tabs on a small screen to two side-by-side divs if the screen size is large enough. I came across documentation that seems to describe exactly what I need, but I'm unsure how to impl ...
I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...
Even though I specify that I want 3 ticks, I end up with 4 in my d3 js code The y-axis values I am working with are [2, 1, 3, 2, 4, 4, 6] svg .select(`[data-labels-y]`) .call(d3.axisLeft().scale(yScale).ticks(3).tickPadding(4))` My expected tick valu ...
I've encountered a TypeScript error that has left me puzzled: src/helpers.ts:11:14 - error TS2322: There's an issue with this piece of code and I can't quite grasp it: Type '<T extends "horizontal" | "vertical" | undefined, U extends ...
I have the following code snippet: <NativeSelect classes={{ icon: classes.icon }} className={classes.select} onChange={this.onVersionChange} > { Object.keys(interface_versions).map(key => { return <optio ...
My question is regarding changing the content of a div using the `html()` method in JavaScript. I am currently working on implementing a "cancel" button and would like to revert the content back to its original value without having to completely reset it w ...
After reading the documentation for nextjs, I learned that the getStaticProps function should pre-render data that I need before a user visits my site. My goal is to fetch images and load them onto cards. In my index.js file: export async function getSta ...
Hello, I've encountered an issue with a checkbox selection and a link within the same cell in a Material UI DataGrid table. The challenge is that when clicking on a cell that contains an external link which redirects to another page, the checkbox a ...
Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't se ...
I have a set of three divs. One contains a Twitter icon, another holds a LinkedIn icon, and the last one is designated for displaying text upon clicking. My goal is to click on the Twitter icon and have corresponding text appear in the third div. Then, if ...
I am facing an issue with a table that has multiple rows, each containing one column with three checkboxes. The requirement is for the user to select only one out of the three options in each row. I attempted to solve this using JQuery, but ran into the pr ...
Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...
NextJs is the framework I am currently utilizing for my project. Is there a way to render a specific project based on its unique ID? { “projects”: [ { "id": 1, "picture": "portf.jpg" }, { ...
My custom button has a background and a :hover color. It works fine on the web, but on mobile devices, the color of the :hover persists even after clicking the button when the mouse is not over it. I am looking for a solution to fix this issue because the ...
I am new to the world of HTML coding and currently working on an assignment for my online computer course. I reached out to my professor for help, but unfortunately, he hasn't been very responsive. The task at hand is to create a basic cost calculator ...
On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...
UPDATE: I highly recommend utilizing the new Autocomplete feature, which provides a wide range of options and functions seamlessly, rather than manually integrating Downshift. I have attempted to customize this specific downshift example (other-examples/r ...
When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...
Currently, I am attempting to troubleshoot the getStaticProps() function within a React component that is being utilized from my pages by implementing console.log() like so: export default class Nav extends React.Component { render() { return & ...