Spinning Newspaper Layout Using CSS

This code creates a spinning newspaper layout using HTML and CSS. It rotates the content dynamically. It helps showcase news or articles in a visually interesting way.

You can use this code on your website to display news articles attractively. It adds visual interest and engagement to your content. This layout can enhance user experience and make your website more memorable.

How to Create Spinning Newspaper Layout Using CSS

1. Start by creating a container div to hold your newspaper layout. Inside, define sections for different parts of the newspaper such as name, info, title, and content. Use appropriate HTML tags for each section.

Fill in the content for each section with relevant text, images, or other media. Customize the headlines, article titles, and paragraphs to match your desired content.

<div class="container">
  <div class="newsletter">
    <section class="name">
      <p>Springfield Shopper</p>
    </section>

    <section class="info">
      <p>DAILY NEWS</p>
      <p>35¢</p>
    </section>

    <section class="title">
      <h1>
        <span>Simpsons scam</span>
        <span>Springfield</span>
      </h1>
    </section>

    <section class="content">
      <article class="left-side">
        <h2>
          <span>Angry Mob</span>
          <span>Mulls Options</span>
        </h2>
        <div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
      </article>
      <article class="right-side">
        <img src="https://i.ibb.co/R6vng5P/family-simpson.jpg" alt="Simpsons family photo">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
      </article>
    </section>
  </div>
</div>

2. Apply CSS styles to create the spinning effect and overall layout design. Use transform and animation properties to rotate the newspaper and add dynamic movement. Adjust padding, borders, and fonts to enhance the visual appeal.

Utilize keyframes in CSS to define the rotation animation for the newspaper. Set the initial and final states of the rotation to create a smooth spinning effect. Experiment with different timing functions to achieve the desired animation speed.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: dimgray !important;
}

.container {
  animation: scale-up 2.5s linear;
}

.newsletter {
  width: 800px;
  background-color: whitesmoke;
  padding: 5px;
  border: 1px solid black;
  transform: rotate(-5deg);
  animation: rotate 0.5s linear 5;
  position: relative;
}

.newsletter::before {
  content: '';
  width: 8px;
  height: 98%;
  position: absolute;
  left: -10px;
  top: 1%;
  background-color: whitesmoke;
  border: 1px solid black;
}

.newsletter::after {
  content: '';
  width: 8px;
  height: 96%;
  position: absolute;
  left: -19px;
  top: 2%;
  background-color: whitesmoke;
  border: 1px solid black;
}

.name {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  font-size: 60px;
}

.info {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px 5px;
}

.title h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  font-size: 65px;
}

.content {
  display: flex;
}

.left-side {
  display: flex;
  flex-direction: column;
}

.left-side h2 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px 5px;
}

.left-side div {
  display: flex;
}

.left-side div p {
  padding: 5px;
}

.right-side {
  padding: 0 10px;
  font-size: x-small;
}

@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

@keyframes scale-up {
  0% {transform: scale(1%);}
  100% {transform: scale(100%);}
}

That’s all! hopefully, you have successfully created a Spinning Newspaper Layout Using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.