asked on

Styling a web page

Hi,
I have designed the following website :
https://jsfiddle.net/pensee/pyb1oawt/
I need help in doing the following :
1) The image INTRO TO KITTENS is spread throughout the horizontal width
I want it to be placed in the center
2) There is a text Kittens and then there is a line in front of it.
And the text Cuteness overload below it.
I wanted to make it look like :

In the above image the Cuteness Overload appears below the New Collections.

Whereas in the fiddle that I have created it appears like :
User generated image

How can I make it appear like the earlier pic ?

Binh Win

Are you using CSS?

Rohit Bajaj

ASKER

Yeah If you see the jsfiddle link that I pasted it shows the CSS

Binh Win

I don't like to click on links and attachments. If you are using CSS then you just need to play with the CSS code... try trail and error. You should also do version control is that you can revert easily. That is how I learn CSS. Good Luck!

BTW - Just to be clear, I am talking about going directly into the CSS sheet to make the needed code changes not the HTML source code page.

Rohit Bajaj

ASKER

Posting the HTML and CSS code for reference -

<html>
  <head>
    <link rel="stylesheet" href="home.css" />
  </head>
  <div class="promo_banner">
    <div class="promo_banner__content">
      <p>
        <strong>Our Guide on Caring for Your Furry Feline Friend</strong>
      </p>
    </div>
    <div class="promo_banner-close"></div>
  </div>
  <div class="top_bar clearfix">
    <ul class="social_icons">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
      />

      <div class="container">
        <span
          ><a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a
        ></span>
        <span
          ><a href="https://www.facebook.com"
            ><i class="fab fa-facebook-f"></i></a
        ></span>
        <span
          ><a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a
        ></span>
        <span
          ><a href="https://www.instagram.com"
            ><i class="fab fa-instagram"></i></a
        ></span>
      </div>
    </ul>
  </div>

  <div class="logo text-align--center">
    <a title="LINE FRIENDS INC">
      <img
        src="https://i.ibb.co/SchwyQ5/logo.jpg"
        class="primary_logo lazyloaded"
        alt="LINE FRIENDS INC"
    /></a>
  </div>

  <div class="nav_wrapper">
    <div class="nav">
      <ul class="menu center">
        <li>
          <span>HOME</span>
        </li>
        <li>
          <span>All About Kittens</span>
        </li>
        <li>
          <span>Feeding Your Kitten</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="contents_title">
    <h2><fontsninja-text>Kittens</fontsninja-text></h2>
    <div class="line"></div>
  </div>
  <div class="shg-rich-text shg-theme-text-content">
    <p>
      <span style="font-size: 16px; font-family: inherit"
        >Cuteness Overload</span
      >
    </p>
  </div>
</html>

Open in new window

* {
  font-family: sans-serif;
}
a {
  color: black;
  text-decoration: none;
}
.promo_banner {
  background-color: #333;
  text-align: center;
  color: #fff;
  font-size: 12px;
  position: relative;
  width: 100%;
  z-index: 5000;
  top: 0;
  overflow: hidden;
}
div.logo img {
  max-width: 205px;
  width: 100%;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

.nav .menu {
  display: flex;
  gap: 1rem;
  list-style: none;
}
.nav {
  display: flex;
  justify-content: center;
}
.nav_wrapper {
  background: #f1f1f1;
}
.nav .menu li {
  cursor: pointer;
  padding: 12px 0;
  transition: 0.3s;
}
.nav .menu li.active {
  color: green;
}
.nav .menu li:hover {
  color: green;
  border-bottom: 1px solid green;
}

.contents_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.line {
  flex-grow: 1;
  margin-left: 20px;
  height: 2px;
  background-color: #333;
}

Open in new window

ASKER CERTIFIED SOLUTION

Binh Win

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rohit Bajaj

ASKER

@Binh Win

Thanks I will try it out.

Just to give more perspective I am trying to make it similar to the one on this website :

https://store.linefriends.com/

Binh Win

The https://store.linefriends.com website uses a CSS stylesheet from a CDN - https://cdn.getshogun.com/60a7d7929ae44000d29ce318.css

1) View source on the HTML page and look for 'New Collection"
2) Then look at the CSS class it is in...(I see that the class is in shg-c)
3) Then go to the CSS - https://cdn.getshogun.com/60a7d7929ae44000d29ce318.css and get some ideas how it was done

SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial