Designing a website's layout with HTML and CSS

I am having trouble developing a concept depicted in the image below. Here is what I have accomplished so far: https://jsfiddle.net/o0zmtr3q/2/. I am struggling to make each box unique, especially with the layout where the text is positioned differently in the first box, and the SVG is placed next to "100,000" with "readers" at the bottom.

https://i.sstatic.net/ncst6.png

/*Legal Notice Styling*/ .featured--legal--notices { position: relative; height: 300px; overflow: hidden; background:#1A1A1A; } .featured--legal--notices .btn-legal { position: absolute; top: 89%; left: 28%; transform: translate(5%, -50%); -ms-transform:
translate(-50%, -50%); background-color: #01AD54; color: #fff; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; text-align: center; text-transform: uppercase; } .legal-overlay-logo{margin-top: 1rem; margin-left:
43%;} .featured--legal--notices .legal-overlay { position: absolute; top: 55%; left: 55%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); cursor: pointer; margin-left: auto; margin-right: auto; width: 15rem; } .featured--legal--notices
.legal-overlay h2 { font-size: 28px; color: #fff; text-transform:uppercase; } .featured--legal--notices .legal-overlay p { font-size: 18px; color: #fff; } .featured--legal--notices .legal-overlay i { font-size: 16px; color: #fff; } .featured--legal--notices
.legal-overlay-white { position: absolute; top: 71%; left: 45%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); cursor: pointer; } .featured--legal--notices .legal-overlay-white p { font-size: 16px; color: #fff; } @media only screen
and (max-width: 1200px) { .featured--legal--notices .bob-logo { position: absolute; top: 20%; left: 34%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); cursor: pointer; } .featured--legal--notices .btn-listen { position: absolute;
top: 80%; left: 55%; transform: translate(5%, -50%); -ms-transform: translate(-50%, -50%); background-color: #fff; color: #01ad54; font-size: 12px; padding: 8px 20px; border: none; cursor: pointer; border-radius: 5px; text-align: center; text-transform:
uppercase; } .featured--legal--notices .legal-overlay { position: absolute; top: 55%; left: 60%; transform: ...

<!-- Two other columns are provided in the source code -->

htmlcssbootstrap-4

Answer №1

If you're looking to align elements in a layout, consider using flexbox. It's a simple way to achieve the alignment you need. Below is a basic example of how to structure your layout using flexbox.

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 80vw;
  margin: 0 auto;
  border: 2px solid black;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-align: center;
  color: #fff;
}

.item:nth-of-type(1) {
  background-color: teal;
}
.item:nth-of-type(2) {
  background-color: DarkOrchid;
}
.item:nth-of-type(3) {
  background-color: tomato;
}

.item__inner__photo {
  max-width: 120px;
  height: auto;
}
<main>
  <div class="item">
    <div class="item__inner">
      <img src="https://cdn3.volusion.com/uuhbg.clmqc/v/vspfiles/photos/00028861-2.jpg?v-cache=1522302835" alt="" class="item__inner__photo">
      <h3 class="item__inner__headline">
        This is a headline
      </h3>
      <p class="item__inner__content">Add some content here!</p>
    </div>
  </div>
  <div class="item">
    <div class="item__inner">
      <img src="https://cdn3.volusion.com/uuhbg.clmqc/v/vspfiles/photos/00028861-2.jpg?v-cache=1522302835" alt="" class="item__inner__photo">
      <h3 class="item__inner__headline">
        This is a headline
      </h3>
      <p class="item__inner__content">Add some content here!</p>
    </div>
  </div>
  <div class="item">
    <div class="item__inner">
      <img src="https://cdn3.volusion.com/uuhbg.clmqc/v/vspfiles/photos/00028861-2.jpg?v-cache=1522302835" alt="" class="item__inner__photo">
      <h3 class="item__inner__headline">
        This is a headline
      </h3>
      <p class="item__inner__content">Add some content here!</p>
    </div>
  </div>
</main>

Answer №2

Try this out and let me know if it fits your requirements. I've utilized Flexbox to arrange the elements beside each other as per your request.

#container {
  display: flex;
  text-align: center;
}

.featured-news-wrapper {
  flex: 1 1 0;
}

a {
  text-decoration: none;
}

/*Legal Notice Styling*/
.featured--legal--notices {
  background: #1A1A1A;
  height: 100%;
}
/* More styling code here */
/*END OF legal notice STYLING*/

/*Readers Styling*/
.featured--readers {
  background: linear-gradient(90deg, rgb(0, 118, 57) 0%, rgb(39, 173, 84) 100%);
  height: 100%;
}
/* More styling code here */
/*END OF Readers STYLING*/

/*subscribe Styling*/
.featured--subscribe {
  background: linear-gradient(90deg, rgb(0, 118, 57) 0%, rgb(39, 173, 84) 100%);
  color: #fff;
  height: 100%;
}
/* More styling code here */
/*END OF Readers STYLING*/

<div id="container">
  <div class="col-4 featured-news-wrapper">
    <a href=" ">
      <div class="featured--readers">
        <div class="readers-overlay-logo">
          <svg>
             <!-- SVG Path Data here -->
           </svg>
        </div>
        <div class="readers-overlay">
          <p>Reach Over</p>
          <h1>100,000 </h1>
          <p> Readers<br>with advertising </p>
        </div>
        <button class="btn-readers">Learn More</button>
      </div>
    </a>
  </div>
  <!-- More HTML code for other sections -->
</div>

JsFiddle: https://jsfiddle.net/Lasxr3kb/1/

Answer №3

Creating a layout with classes like container, row, and custom column to modify padding. See the code snippet in Full Page Mode for a better view.

.column {
  padding-left: 0px !important;
  padding-right: 0px !important;
}


/*Legal Notice Styling*/
.featured--legal--notices {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #1a1a1a;
}
...

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- BootStrap 4 CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />;
    <title> App</title>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-4 column featured-news-wrapper">
          <a href=" ">
            <div class="featured--readers">
              ...
            </div>
          </a>
        </div>
        <div class="col-4 column featured-news-wrapper">
          <a href="">
            <div class="featured--legal--notices">
              ...
            </div>
          </a>
        </div>

        <div class="col-4 column featured-news-wrapper">
          <a href="  ">
            <div class="featured--subscribe">
              ...
            </div>
          </a>
        </div>
      </div>
    </div>


  </body>
</html>

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

Out of reach: Menu div slides up on click outside

<a class="btn">Click ME </a> <div class="content"> Content </div> $('.btn').click(function(){ $('.content').slideToggle(); }); Check out the example here Everything is working properly, but I have a q ...

jqueryhtmlslideup

Modify the collapse orientation in Bootstrap

I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

javascriptcssbootstrap-5

Dynamic CSS Class Implementation with KnockoutJS

Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...

javascriptcsshtmlmvvmknockout.js

Is it possible to deactivate an anchor tag based on the result of a conditional statement that returns a string?

I've created an anchor tag (not a button) with text that redirects me to another page <StyledTableCell align="center"> <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> </StyledTableCell> There is a ...

javascriptcssreactjs

Vertically arrange the table for better visibility

I need help with changing the table layout from horizontal to vertical. Currently, all fields are displayed horizontally and I want them to be displayed vertically. Also, I'm trying to add a functionality where the current date is added to the databas ...

phphtmlcssmysql

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

phpjavascriptjqueryhtmlajax

Is your React application struggling to display large images when bundled with Webpack?

I am facing an issue while trying to display an image from my image folder in a React project using Webpack. I have observed that smaller photos with physically smaller dimensions and file sizes load properly, but larger photos do not render on the screen, ...

javascripthtmlcssreactjswebpack

Place the span element above the div container

I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before? Is there a way to display the numbe ...

htmlcss

The Joys of Delayed Animation with jQuery Isotope

Has anyone successfully modified the CSS3 transitions in jquery Isotope to incorporate a delay for shuffling items, such as using "transition-delay: 0s, 1s;"? I am aiming for a specific shuffle direction - first left, then down - to create a more calculat ...

jquerycssjquery-isotope

Responsive design parameters

After creating a media query specifically for phones, I realized that I needed one for desktop as well. @media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;} However, when I attempted to add a sim ...

htmlcssmedia-queriestablet

Looking to extract data from a Json object and add it into a table

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function displayJsonData() { var jsonData = { "cars": [ '{"model":"Sentra", "doors":4, "features":["hi"," ...

javascripthtml

When calling canvas.getContext('2D'), the function returns a null value

After creating a canvas and calling its getContext() method, I was confused when it returned null for the context. Below is the code snippet that I used: <script> window.onload = initializeCanvas; function initializeCanvas(){ ...

javascripthtmlcanvas

Choose an option with JavaScript once the request is successful

Choose the day, month, and year using JSON data success: function(jsondata){ var data=JSON.parse(jsondata); var list_html="<div id='editrelation'><label id='dateLabel' style='display:none&apo ...

javascripthtmlselectedindexselectedindexchanged

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Building a versatile memoization function in JavaScript to cater to the needs of various users

There is a function in my code that calculates bounds: function Canvas() { this.resize = (e) => { this.width = e.width; this.height = e.height; } this.responsiveBounds = (f) => { let cached; return () => { if (!cache ...

javascripthtmlnode.js

"Enhance your website with captivating Javascript hover effects for

Can anyone assist me with incorporating the navigation hover effect seen on this website into my HTML/CSS project? The example site is built using a WordPress theme, but I am looking to apply that green effect to my own webpage and have the ability to cust ...

javascripthtmlcssmenunavigationbar

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

Reveal and conceal using CSS animations

I am working on adding animation effects to show and hide HTML elements triggered by a button click. The button toggles a "hide" class to display or hide the element. Check out my code snippet: const toggleButton = document.querySelector('button ...

javascripthtmlcss