Tips for Arranging HTML Elements Next to Each Other with CSS3

As a beginner in programming, I am embarking on the task of creating a basic website inspired by a dribble design.

I am currently struggling to align an image and text side by side within a section, so that they stack on top of each other when the screen is resized. Can someone provide guidance?

Here is how my website currently appears:

https://i.sstatic.net/738qD.jpg

I aim to achieve a layout resembling this dribble design:

https://i.sstatic.net/QCtBc.jpg

This is the HTML code I have:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./new.css">
      <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
      <title>Document</title>
</head>
<body>
      <header>
            <a href="#" class="brand">MYBRAND</a>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Tasks</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">School</a></li>
                  <li><a href="#">Contact</a></li>
            </ul>
      </header>
      <section class="banner">
            <div class="container">
                  <div class="item">
                        <h1>Create, <br>and Collect Data</h1>
                        <div class="text">Change your mind, <br> extract and collect any data for you business.</div>
                        <button href="#" class="btn-contact btn-style-one">Talk to me</button>
                  </div>
                  <div class="item">
                        <figure class="image">
                              <img src="1.png" alt="">
                        </figure>
                  </div>
            </div>
      </section>

      <script type="text/javascript">
            window.addEventListener("scroll", function() {
                  let header = document.querySelector("header");
                  header.classList.toggle("sticky", window.scrollY > 390);
            })

      </script>
</body>
</html>

Below is the CSS code I'm using:

* {
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 200vh;
  background-color: black;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 40px 100px;
  z-index: 100000;
}

header .brand {
  position: relative;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.6s;
}

header.sticky {
  padding: 5px 100px;
  background-color: #fff;
}

header.sticky .brand,
header.sticky ul li a {
  color: #000;
}

header ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  position: relative;
  list-style: none;
}

header ul li a {
  position: relative;
  margin: 0 15px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500px;
  transition: 0.5s;
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(13.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.item {
    flex: 1;
    margin: 5px;
    padding: 0 10px;
    text-align: center;
}

btn-contact {
    display: inline-block;
}

.btn-style-one {
    position: relative;
    text-decoration: none;
    line-height: 24px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 50px;
    border-style: none;
    background-color: #ff8048;
    text-transform: capitalize;
    padding: 16px 32px 16px 32px;
    font-family: "Poppins", sans-serif;
    box-shadow: 0px 0px 20px rgba(23, 23, 23, 0.15);
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(0, #f434a1),
      color-stop(100, #ff8442)
    );
    background-image: -webkit-linear-gradient(left, #f434a1 0%, #ff8442 100%);
    background-image: linear-gradient(to right, #f434a1 0%, #ff8442 100%);
  }

These are the images I am incorporating:

Background: https://i.sstatic.net/31mId.jpg Dashboard: https://i.sstatic.net/pJIuC.jpg

Answer №1

Make sure to include height: 100% in the .container class and update the CSS accordingly.

* {
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    min-height: 200vh;
    background-color: black;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 40px 100px;
    z-index: 100000;
}

header .brand {
    position: relative;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.6s;
}

header.sticky {
    padding: 5px 100px;
    background-color: #fff;
}

header.sticky .brand,
header.sticky ul li a {
    color: #000;
}

header ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li {
    position: relative;
    list-style: none;
}

header ul li a {
    position: relative;
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 500px;
    transition: 0.5s;
}

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('https://i.imgur.com/mTHpmbP.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.item {
    flex: 1;
    margin: auto;
    padding: 0 10px;
}

.item-text {
    width: max-content;
    margin: auto;
}

.item-text h1 {
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
}

.item-text .text {
    color: #fff;
    margin: 10px 0;
    font-size: 14px;
}

.btn-contact {
    display: inline-block;
}

.btn-style-one {
    position: relative;
    text-decoration: none;
    line-height: 24px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 50px;
    border-style: none;
    background-color: #ff8048;
    text-transform: capitalize;
    padding: 16px 32px 16px 32px;
    font-family: "Poppins", sans-serif;
    box-shadow: 0px 0px 20px rgba(23, 23, 23, 0.15);
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #f434a1),
        color-stop(100, #ff8442)
        );
    background-image: -webkit-linear-gradient(left, #f434a1 0%, #ff8442 100%);
    background-image: linear-gradient(to right, #f434a1 0%, #ff8442 100%);
}

@media only screen and (max-width: 767px) {
    .banner {
        padding-top: 130px;
    }
    header {
        padding: 20px;
        flex-direction: column;
    }
    header ul li a {
        margin: 0 10px;
        letter-spacing: 0;
    }
    .container {
        flex-direction: column;
        flex-wrap: unset;
    }
    .item {
        margin: 0;
        padding: 0 30px;
    }
    .item img {
        max-width: 100%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./new.css">
      <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
      <title>Document</title>
</head>
<body>
      <header>
            <a href="#" class="brand">MYBRAND</a>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Tasks</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">School</a></li>
                  <li><a href="#">Contact</a></li>
            </ul>
      </header>
      <section class="banner">
            <div class="container">
                  <div class="item">
                        <div class="item-text">
            <h1>Create, <br>and Collect Data</h1>
                        <div class="text">Change your mind, <br> extract and collect any data for you business.</div>
                        <button class="btn-contact btn-style-one">Talk to me</button>
            </div>
                  </div>
                  <div class="item">
                        <figure class="image">
                              <img src="https://i.imgur.com/5Zvfdoe.png" alt="">
                        </figure>
                  </div>
            </div>
      </section>

      
</body>
</html>

Answer №2

Have you considered implementing CSS grid for your layout?

.grid-container {
  display: inline-grid;
}

Explore more about CSS grid here!

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

Safari Version 8.0.2 experiencing issues with fixed positioning

I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal. My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button tr ...

Trouble encountered when attempting to override styles in Material UI's TableRow

I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...

Overflowing Bootstrap navbar problem

After adjusting the navbar height, the overflowing issue was resolved, but I specifically want it to be set at 5rem. Currently, the content of the navbar exceeds the 5rem height and mixes with the main body content, regardless of what modifications I make. ...

Combine various input data and store it in a variable

I am looking for a way to add multiple input text values together and store the sum in a variable. Currently, I can add the values and display it in an id, but I want to assign it to a variable instead. The condition for this variable is described below af ...

Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

Creating a flexible grid layout that adjusts to show either one or two columns on smaller mobile screens

NOTE: This is not a duplicate as the layout order for columns and rows is specifically tailored for mobile devices. I am attempting to showcase this grid design on mobile devices with the following sequence: First row: header (1 column, full width) Secon ...

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

Is it possible to reuse variables declared in a Javascript function within the same function?

string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString(); string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString(); string gradeCode = ds.Tables[0].Rows[i]["GRADE_CODE"].ToString(); tr = new TableRow(); td = new Ta ...

What is the best way to create a column that adjusts its width based on the row width in a table?

Here is the code snippet that I am working with: return ( <Box sx={{ height: 400 }}> <DataGrid columns={columns} rows={rows} /> </Box> ) Currently, my table appears like this: https://i.sstatic.net/KWXwL.png I am aiming for the ...

Eliminate the white background from the modal image

I'm facing an issue with an image displayed in a modal. The image has a white background that I want to remove so only the image itself is visible. https://i.stack.imgur.com/CG9Ne.png Here's the code snippet: <div id="myModal" class ...

The Django view function is failing to add new records to the database

Whenever I attempt to create a record in the FinTransDetail table as an admin, I encounter errors. This is preventing me from adding records successfully. Any assistance in resolving these issues would be greatly appreciated. Additionally, since I am unabl ...

PHP Form Submission Issue

I'm currently facing an issue with submitting a form using PHP and PHPMailer. Initially, I created a form based on the complete form example from w3schools. After that, I attempted to send the form via email by integrating PHPMailer, but unfortunatel ...

Is your Ajax jQuery live search not functioning properly with JSON data?

My programming code is not functioning properly. Here is the file I am working on. When it does work, it does not display the list and gives an error in the Json file. I am unsure of the reason behind this issue. You will be able to view the error in the C ...

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

Drop down menus fail to appear after the screen has been resized

Creating responsive menus involves using ordered and unordered lists, along with CSS for styling. I have added a script to dynamically generate dropdown menus, but encountered an issue where nothing appears on the screen upon resizing - only the backgrou ...

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...