Full width to the odds div

Developer
Mohammed Fawzy
Size
2,571 Kb
Views
8,096
  1. Full width to the odds div Previews
  2. Full width to the odds div HTML Codes
  3. Full width to the odds div CSS Codes
  4. Full width to the odds div JS Codes

How do I make an full width to the odds div?

What is a full width to the odds div? How do you make a full width to the odds div? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.

Full width to the odds div Previews
IQ Test

Full width to the odds div - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full width to the odds div</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/earlyaccess/notonaskharabic.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2 class="text-center">المدونة</h2> </div>
<div class="container"> <div class="blog"> <div class="row"> <div class="col-md-6"> <article> <div class="article-overlay"> <p>خبرتنا الاساسية تكمن في توصيل العلامة التجارية لأعمالك من خلال الفرص العظيمة يتيحها الويب، حيث نشرك </p> <a href="">اقرا المزيد</a> </div> </article> </div> <!-- end column --> <div class="col-md-6"> <article> <div class="article-overlay"> <p>خبرتنا الاساسية تكمن في توصيل العلامة التجارية لأعمالك من خلال الفرص العظيمة يتيحها الويب، حيث نشرك </p> <a href="">اقرا المزيد</a> </div> </article> </div> <!-- end column --> <div class="col-md-6"> <article> <div class="article-overlay"> <p>خبرتنا الاساسية تكمن في توصيل العلامة التجارية لأعمالك من خلال الفرص العظيمة يتيحها الويب، حيث نشرك </p> <a href="">اقرا المزيد</a> </div> </article> </div> <!-- end column --> <div class="col-md-6"> <article> <div class="article-overlay"> <p>خبرتنا الاساسية تكمن في توصيل العلامة التجارية لأعمالك من خلال الفرص العظيمة يتيحها الويب، حيث نشرك </p> <a href="">اقرا المزيد</a> </div> </article> </div> <!-- end column --> <div class="col-md-6"> <article> <div class="article-overlay"> <p>خبرتنا الاساسية تكمن في توصيل العلامة التجارية لأعمالك من خلال الفرص العظيمة يتيحها الويب، حيث نشرك </p> <a href="">اقرا المزيد</a> </div> </article> </div> <!-- end column --> </div> <!-- end row --> </div> <!-- end right blog -->
</div>
<!-- end container --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full width to the odds div - Script Codes CSS Codes

.body { background-color: #fbfbfd;
} h2 { color: #30323b; margin: 75px 0 90px 0; font-family: 'Noto Naskh Arabic';
} .article-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(58, 61, 61, 0.8); z-index: 0; color: white; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } article { font-family: 'Noto Naskh Arabic'; text-align:right; position: relative; height: 230px; background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcROiip8HG-L2WMLTBEs4CZm_mRIr3W-xnihYKa4UvBqV9d-1q5C'); background-size: cover; height: 230px; margin-bottom: 35px; padding: 35px; } article p { font-size: 19px; color: #f9fafb; padding: 35px; line-height: 30px; } article a { margin-left: 30px; padding: 7px 15px; background-color: #eff3f6; font-size: 16px; color: #30323b; font-weight: bold; float: left;
} article a:hover {text-decoration:none} article:hover .article-overlay { background-color: #00aeef; }

Full width to the odds div - Script Codes JS Codes

 $(document).ready(function() { var div = $('.blog .row > div'); if (div.length % 2 !== 0) { div.last().addClass('col-md-12').removeClass('col-md-6'); }
});
Full width to the odds div - Script Codes
Full width to the odds div - Script Codes
Home Page Home
Developer Mohammed Fawzy
Username mohammed-fawzy
Uploaded January 26, 2023
Rating 3
Size 2,571 Kb
Views 8,096
Do you need developer help for Full width to the odds div?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mohammed Fawzy (mohammed-fawzy) Script Codes
Name
Scroll to Top
Place holder
JQuery Collapse
Like button with react
Update text with react
React component
Tool Box
Todo List with react
Slider
A Pen by mohammed fawzy
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!