Skip to content

Commit

Permalink
create page Blog-page and fix section header
Browse files Browse the repository at this point in the history
  • Loading branch information
sina-alimi committed Sep 4, 2024
1 parent 663defe commit c136575
Show file tree
Hide file tree
Showing 3 changed files with 521 additions and 133 deletions.
394 changes: 394 additions & 0 deletions blog.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,394 @@
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Blog</title>
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta property="og:title" content="WeProDev"/>
<meta property="og:site_name" content="WeProDev"/>
<meta property="og:description" content="WeProDev"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://WeProDev.com"/>
<meta name="keywords" content="">
<meta name="description" content="WeProDev">
<meta name="robots" content="WeProDev">
<meta name="copyright" content="2017-2018">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="twitter:card" content="WeProDev">
<meta name="twitter:url" content="http://WeProDev.com">
<meta name="twitter:domain" content="http://WeProDev.com">
<meta name="twitter:title" content="WeProDev">
<meta name="twitter:description" content="WeProDev">
<meta name="twitter:image" content="http://WeProDev.com">
<meta name="apple-mobile-web-app-status-bar-style" content="WeProDev.com">
<meta name="apple-mobile-web-app-capable" content="WeProDev">
<link rel="icon" href="img/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="stylesheet" href="scss/lib/tiny-slider.css">
<link rel="stylesheet" href="css/style.css" media="all">

</head>
<body>
<?php include "header.php"; ?>
<!--start header-->
<div class="blog">
<div class="section-header">
<div class="section-contant-header cont2">
<div class="select-lang">
<span class="icon-globe1 icon"></span>
<ul class="menu">
<li><a href="#" class="l-one "><span class="show">Language</span></a><span class="icon-chevron-down"></span>
<!-- <span class="icon-chevron-down"></span> -->
<ul class="dropdown" id="dropdown">
<li><a href="#" class="l-two"> English</a></li>
<li><a href="#" class="l-two">Kurdish</a></li>
</ul>
</li>
</ul>
</div><!--section lang-->
<div class="section-login">
<div class="search-box" id="search-btn">
<input type="text" class="search-txt" id="input-search" placeholder="search..." />
<span class="icon-search search-btn" id="input-search-btn"></span>
</div>
<div class="section-button">
<button><a href="#">login</a></button>
<button class="button2"><a href="#">Free Template</a></button>
</div>
</div><!--section login-->
</div><!--section content header-->
</div><!--section header-->
</div>

<header id="header">
<div class="logo">
<img src="img/logo.png" alt="logo WeProDev">
</div>
<ul class="menu">
<li><a href="#" class="l-one">Home</a>
<span class="icon-circle-down"></span>
<ul class="dropdown" id="dropdown">
<li><a href="#" class="l-two">two-one</a></li>
<li><a href="#" class="l-two">two-two</a></li>
<li><a href="#" class="l-two">two-three</a></li>
</ul>
</li>
<li><a href="#" class="l-one">Portfolio</a>
<span class="icon-circle-down"></span>
<ul class="dropdown" id="dropdown">
<li><a href="#" class="l-two">two-one</a></li>
<li><a href="#" class="l-two">two-two</a></li>
<li><a href="#" class="l-two">two-three</a></li>
</ul>
</li>
<li><a href="#" class="l-one" id="parent-dropdown">Blog</a>
<span class="icon-circle-down"></span>
<ul class="dropdown" id="dropdown">
<li><a href="#" class="l-two">two-one</a></li>
<li><a href="#" class="l-two">two-two</a></li>
<li><a href="#" class="l-two">two-three</a></li>
</ul>
</li>
<li><a href="#" class="l-one last-li-menu">Contact</a></li>
</ul>
<div class="search">
<span class="icon-search icon-searchh"></span>
</div>
<div class="search-active">
<div class="search-active-content">
<span class="icon-search"></span>
<input type="text" class="text-search" placeholder="Write...">
<span class="icon-close icon-searchh"></span>
</div>
</div>
<div class="section-responsive icon-menu5"></div>
</header>

<!--end header section-->
<!--start section blog -->
<div class="blog">
<div class="content">
<div class="section-article">
<div class="post-header">
<article class="big-card">
<figure>
<a href="#"> <img src="img/blogging.jpg" alt="create blog"></a>

</figure>
<figcaption>
<h2><a href="#">How to Write a Blog Post: A Step-by-Step Guide [+ Free Blog Post Templates]</a></h2>
<div class="blog-meta">
<a href="#">MARKETING&nbsp;</a>
<a href="#"> | 18 MIN READ</a>
</div>
</figcaption>
</article>

<!--most popular-->
<div class="most-popular">
<h3>Most Popular</h1>

<div class="post-compact">
<h4>
<a href="#">How to Create a Sales Plan: Template + Examples</a>
</h4>
<div class="blog-meta">
<a href="">SALES&nbsp;</a>
<a href=""> | 3 MIN READ</a>
</div>
</div>
<div class="post-compact">
<h4>
<a href="#">How to Ask for a Referral to a Potential Client [+ Free Email Templates]</a>
</h4>
<div class="blog-meta">
<a href="#">SERVICE&nbsp;</a>
<a href="#"> | 9 MIN READ</a>
</div>
</div>
<div class="post-compact">
<h4>
<a href="#">5 Steps to Create an Outstanding Marketing Plan [Free Templates]</a>
</h4>
<div class="blog-meta">
<a href="#">MARKETING&nbsp;</a>
<a href="#"> | 20 MIN READ</a>
</div>

</div>
</div>
</div><!--post header-->
<!-- articles-->
<div class="post-list">
<article class="middle-card">
<figure>
<a href="#"></a>
<img src="img/blog2.jpg" alt="blog">
</figure>
<figcaption>
<p>Content type</p>
<h2><a href="#">The Ultimate Guide to Managing Remote Marketing Teams</a></h2>
<div class="blog-meta">
<a href="#">MARKETING&nbsp;</a>
<a href="#"> | 2 MIN READ</a>
</div>
</figcaption>
</article>
<article class="middle-card">
<figure>
<a href="#"></a>
<img src="img/blog1.png" alt="blog">
</figure>
<figcaption>
<p>Content type</p>
<h2><a href="#">The 5 Key Components of a Killer Customer Marketing Strategy</a></h2>
<div class="blog-meta">
<a href="#">MARKETING&nbsp;</a>
<a href="#"> | 7 MIN READ</a>
</div>
</figcaption>
</article>
<article class="sub middle-card">
<!-- <img src="img/B-G.jpg" alt="back" class="img2"> -->
<div class="txt-sub-arti">
<h3>Subscribe to Our Blog</h3>
<p class="class-p">Stay up to date with the latest marketing, sales, and service tips and news.</p>
<button>Subscribe via Email</button>
<button>Subscribe on Slack</button>
</div>

</article>
<article class="sub2 middle-card">
<div class="txt-sub-arti hover-underline">
<!-- <div class="hover-underline"> -->
<h1>2020 State of Marketing Report</h1>
<span class="sub-button">Explore the Report</span>
<!-- </div> -->
</div>
</article>
<article class="big-card">
<figure>
<a href="#"></a>
<img src="img/blog5.jpg" alt="blog">
</figure>
<figcaption>
<p>Content type</p>
<h2><a href="#">7 Tips for Working Remotely with Roommates or Family, From HubSpot Marketers</a></h2>
<div class="blog-meta">
<a href="#">MARKETING&nbsp;</a>
<a href="#"> | 11 MIN READ</a>
</div>
</figcaption>
</article>
<article class="big-card">
<figure>
<a href="#"></a>
<img src="img/blog4.png" alt="blog">
</figure>
<figcaption>
<p>Content type</p>
<h2><a href="#">How My Sales Team Hit Quota Every Month for A Year</a></h2>
<div class="blog-meta">
<a href="#">SALES&nbsp;</a>
<a href="#"> | 5 MIN READ</a>
</div>
</figcaption>
</article>
<article class="middle-card">
<figure>
<a href="#"></a>
<img src="img/blog3.jpg" alt="blog">
</figure>
<figcaption>
<p>Content type</p>
<h2><a href="#">12 Female Entrepreneurs You Need to Follow</a></h2>
<div class="blog-meta">
<a href="#">SALES&nbsp;</a>
<a href="#"> | 8 MIN READ</a>
</div>
</figcaption>
</article>
</div><!-- post list -->
<div class="under-border"></div>

</div><!--section articles-->
<div class="section-topic">
<h2>Explore More Topic</h2>
<p>Ready to brush up on something new? We've got more to read right this way.</p>
<div class="more-topic">
<div class="topic">
<a href="#" ><span class="icon-chevron-right"></span><span>Customer Retention</span></a>
<a href="#" class="color-line"><span class=" icon-chevron-right"></span>Customer Experience</a>
<a href="#" class="color-line2"><span class=" icon-chevron-right"></span>SEO</a>
<a href="#" class="color-line3"><span class=" icon-chevron-right"></span>Instagram Marketing</a>
<a href="#" class="color-line4"><span class=" icon-chevron-right"></span>Email Newsletters</a>
<a href="#" ><span class="icon-chevron-right"></span><span>Email Marketing</span></a>
<a href="#" class="color-line2"><span class=" icon-chevron-right"></span>Sales Qualification</a>
<a href="#" class="color-line3"><span class=" icon-chevron-right"></span>Sales Process</a>
<a href="#" class="color-line"><span class="icon-chevron-right"></span>Sales Prospecting</a>
<a href="#" class="color-line4"><span class="icon-chevron-right"></span>Remote work</a>
</div>
</div>
</div><!--section topic-->
</div>
</div>
<!--end section blog -->
<!--start section footer-->
<div class="footer-section">
<div class="text-section">
<div class="colm-txt">
<h1>WeProDev</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque nostrum assumenda voluptate excepturi recusandae ducimus impedit totam culpa quidem beatae</p>
</div>
<div class="colm-txt">
<h1>Contact Info</h1>
<span class="icon icon-location"></span>
<p class="span-text">Dadkhah Mall,Enghelab Street</p>
<span class="icon icon-envelope"></span>
<p class="span-text email-wrap">[email protected]</p>
</div>
<div class="colm-txt">
<h1>Follow Us</h1>
<p>Subscribe to our newsletter</p>
<input class="input-e" type="text" placeholder="Enter Your Email">
<input class="submit-b" type="submit" value="submit">
</div>
</div><!--text section-->
<div class="down-footer">
<div class="logo">
<img src="img/favicon.png" alt="WeProDev">
<span class="text-d">&copy; 2020 All rights reserved</span>
</div>
</div><!--down footer-->
</div><!--footer section-->
<!--end section footer-->



<?php include "footer.php"; ?>


</body><!--body-->
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/tiny-slider.js"></script>
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
$(".content").css("padding-top","5.5em");
}
else {
navbar.classList.remove("sticky");
$(".content").css("padding-top","0em");
}
}
</script>
<script>
$(document).ready(function(){
$("#search-btn").click(function(){

$("#input-search").addClass("click-search-txt");
$("#input-search-btn").addClass("click-search-btn");
});

$(document).on('click', function(e) {

if(! $(e.target).parent().hasClass('search-box')){
$("#input-search").removeClass("click-search-txt");
$("#input-search-btn").removeClass("click-search-btn");
}
});

//SLIDER ON PRODUCT-DETAILS PAGE
var slider = tns({
container: '.slider',
items: 3,
slideBy: 'page',
autoplay: true,
mouseDrag: true,
controls: false,
loop: true,
nav: false,
navAsThumbnails : false,
navPosition : "bottom",
touch: true,
gutter: 20,
responsive: {
1250: {
items: 3,
nav: true
},
850: {
// items: 3,
nav: true
},
700:{
items:2,
nav : true
},
230:{
items: 1,
nav : true
}
}
});


});

</script>
</html>






Loading

0 comments on commit c136575

Please sign in to comment.