Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolved the advertisement issue for Home, Bollywood, Fitness, Food pages #5

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Resolved the advertisement issue for Home, Bollywood, Fitness, Food pages #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 34 additions & 11 deletions src/pages/bollywood/Bollywood.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
font-size: 28px;
color: orangered;
text-transform: uppercase;
font-family: 'Courier New', Courier, monospace;
font-family: "Courier New", Courier, monospace;
}

.bolly-desc {
Expand Down Expand Up @@ -114,7 +114,6 @@
text-align: start;
margin-bottom: 15px;
padding: 2px;

}

.top-bolly-post-underline,
Expand Down Expand Up @@ -174,7 +173,7 @@
.top-bolly-post-title {
color: orangered;
text-transform: uppercase;
font-family: 'Courier New', Courier, monospace;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: bold;
/* text-shadow: 2px 2px 4px #5f4646; */
Expand All @@ -189,24 +188,38 @@

.bolly-ads-container {
width: 100%;
height: 400px;
/* background-color: red; */
height: 400px; /* Set a fixed height for the container */
margin-top: 10px;
margin-bottom: 20px;
border-radius: 20px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center; /* Center the content vertically */
}

.ads-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
}

.ads-box img {
width: 100%; /* Let the image take the full width of the container */
height: 100%; /* Let the image take the full height of the container */
/* object-fit: cover; Cover the entire container */
border-radius: 20px;
}

.bolly-ads-container2 {
display: none;
}

@media screen and (max-width:1000px) {
@media screen and (max-width: 1000px) {
.bollyContainer {
display: block;
}
Expand All @@ -224,16 +237,27 @@

.bolly-ads-container2 {
display: block;
width: 90%;
width: 100%;
height: 200px;
/* background-color: red; */
border: 1px solid red;
border-radius: 8px;
margin-left: 5%;
}
.bolly-ads-container {
width: 100%;
height: 400px; /* Set a fixed height for the container */
margin-top: 10px;
margin-bottom: 20px;
border-radius: 20px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center; /* Center the content vertically */
}
}

@media screen and (max-width:588px) {
@media screen and (max-width: 588px) {
.bolly-wrapper {
display: block;
/* background-color: red; */
Expand All @@ -254,5 +278,4 @@
width: 90%;
padding: 5px;
}

}
}
142 changes: 80 additions & 62 deletions src/pages/bollywood/Bollywood.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,64 @@
import React from 'react';
import { ContextData } from '../../data/Data';
import { useContext } from 'react';
import { Link } from 'react-router-dom';
import './Bollywood.css';
import ImageSlider from '../home/ImageSlider';
import Footer from '../../component/footer/Footer'
import React from "react";
import { ContextData } from "../../data/Data";
import { useContext } from "react";
import { Link } from "react-router-dom";
import "./Bollywood.css";
import ImageSlider from "../home/ImageSlider";
import Footer from "../../component/footer/Footer";

import image1 from './img/check.jpg'
import image2 from './img/wallpaper-10.jpg'
import image3 from './img/kala.jpg'
import image4 from './img/player.jpg'
import image5 from './img/War-.jpg'
import image6 from './img/brahmastra.jpg'
import image7 from './img/don2.jpg'
import image8 from './img/War-.jpg'
import image1 from "./img/check.jpg";
import image2 from "./img/wallpaper-10.jpg";
import image3 from "./img/kala.jpg";
import image4 from "./img/player.jpg";
import image5 from "./img/War-.jpg";
import image6 from "./img/brahmastra.jpg";
import image7 from "./img/don2.jpg";
import image8 from "./img/War-.jpg";
import adImage1 from "../../img/aid-1.gif";
import adImage2 from "../../img/aid-2.gif";
import adImage3 from "../../img/aid-3.gif";
// Add more as needed

const images = [
image1,
image2,
image3,
image4,
image5,
image6,
image7,
image8,
];
const images = [image1, image2, image3, image4, image5, image6, image7, image8];
const adImages = [adImage1, adImage2, adImage3]; // Add more as needed

const Info = () => {
const [data] = useContext(ContextData);
return (
<>
<div className='bollyComponent'>
<div className="bollyComponent">
<h1 className="bolly-component-title">Bollywood</h1>
<hr className="bolly-line" />
<hr className="bolly-line2" />
<div className="bollyContainer">
<div className="bolly-Left-Data">
{data
.filter((value) => value.category === 'bollywood')
.filter((value) => value.category === "bollywood")
.map((val) => {
return (
<>
<div key={val.id} className="bolly-wrapper">
<div className="bolly-img-container">
<Link to={`/article/${val.id}`} className="bolly-left-data-link">
<img src={val.image} alt="" className="bolly-all-image" />
<Link
to={`/article/${val.id}`}
className="bolly-left-data-link"
>
<img
src={val.image}
alt=""
className="bolly-all-image"
/>
</Link>
</div>
<div className="holly-details">
<p className="holly-details-para holly-title"><span>{val.name}</span></p>
<p className="holly-details-para holly-title">
<span>{val.name}</span>
</p>
<p className="holly-desc">{val.desc}</p>
<div className="holly-data-contain">
<p className="holly-details-para IMdb"><b>IMdb:</b> {val.imdb} <b>,</b> </p>
<p className="holly-details-para IMdb">
<b>IMdb:</b> {val.imdb} <b>,</b>{" "}
</p>
<p className="holly-details-release-para release-left">
<b>Release:</b> {val.release}
</p>
Expand All @@ -60,7 +67,7 @@ const Info = () => {
</div>
<hr className="bolly-bitween" />
</>
)
);
})}
</div>

Expand All @@ -69,44 +76,57 @@ const Info = () => {
<h2 className="bolly-top-post-title">Top Post</h2>
<div className="top-bolly-post-underline"></div>
<div className="top-bolly-post-underline2"></div>
<div className='bolly-top-img'>
<img src={image3} alt="top img" className='top-bolly-img' />
<div className="bolly-top-img">
<img src={image3} alt="top img" className="top-bolly-img" />
{/* <ImageSlider images={images} /> */}
</div>
</div>
<div className='bolly-main-right-container'>
<div className="bolly-main-right-container">
{data
.filter((value) => value.category === 'bollywood').slice(4, 9)
.map((val) => {
.filter((value) => value.category === "bollywood")
.slice(4, 9)
.map((val, index) => {
return (
<>
<div className='main-bolly-rigth-container'>
<div key={val.id} className="right-bolly-data-wrapper">
<div className='right-bolly-img-container'>
<Link to={`/article/${val.id}`} className="right-bolly-data-link">
<img src={val.image} alt="" className="top-bolly-post-image" />
</Link>
</div>
<div className="top-bolly-post-details-wrapper">
<p className="top-bolly-post-details top-bolly-post-title"><span>{val.name}</span></p>
<p className="top-bolly-post-details bolly-left-details"> {val.desc}</p>

</div>
<div key={val.id} className="main-bolly-rigth-container">
<div className="right-bolly-data-wrapper">
<div className="right-bolly-img-container">
<Link
to={`/article/${val.id}`}
className="right-bolly-data-link"
>
<img
src={val.image}
alt=""
className="top-bolly-post-image"
/>
</Link>
</div>
{/* <hr className="top-post-divider" /> */}
<div className='bolly-ads-container'>
<div className="bolly-ads-box ads-1">Advertisement</div>
<div className="top-bolly-post-details-wrapper">
<p className="top-bolly-post-details top-bolly-post-title">
<span>{val.name}</span>
</p>
<p className="top-bolly-post-details bolly-left-details">
{val.desc}
</p>
</div>
</div>
</>
)
<div className="ads-container bolly-ads-container">
<div className="ads-box ads-1">
<img
src={adImages[index % adImages.length]}
alt="Advertisement"
/>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>

<div className='bolly-ads-container2'>
<div className="bolly-ads-box-2 bolly-ads-2">Advertisement</div>
</div>
<div className="bolly-ads-container2">
<div className="bolly-ads-box-2 bolly-ads-2">Advertisement</div>
</div>
</div>
</div>
</>
Expand All @@ -124,9 +144,7 @@ const Bollywood = () => {
</div>
<Footer />
</>
)
);
};



export default Bollywood;
Loading