Spinning Newspaper Layout Using CSS

Spinning Newspaper Layout Using CSS
Code Snippet:Animated Simpsons Newspaper
Author: masterneme
Published: March 22, 2024
Last Updated: March 22, 2024
Downloads: 239
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X