Wordpress theme Simplicity eye-catch image idea

Developer
Hidekichi
Size
3,364 Kb
Views
48,576
  1. Wordpress theme Simplicity eye-catch image idea Previews
  2. Wordpress theme Simplicity eye-catch image idea HTML Codes
  3. Wordpress theme Simplicity eye-catch image idea CSS Codes
  4. Wordpress theme Simplicity eye-catch image idea JS Codes

How do I make an wordpress theme simplicity eye-catch image idea?

What is a wordpress theme simplicity eye-catch image idea? How do you make a wordpress theme simplicity eye-catch image idea? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.

Wordpress theme Simplicity eye-catch image idea Previews
IQ Test

Wordpress theme Simplicity eye-catch image idea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wordpress theme Simplicity eye-catch image idea</title> <link rel='stylesheet prefetch' href='https://saburoku.top/wp-content/themes/simplicity-child/style.css'>
<link rel='stylesheet prefetch' href='http://saburoku.top/wp-content/themes/simplicity/css/responsive-pc.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"> <div id="breadcrumb" class="breadcrumb-category"> <div itemtype="//data-vocabulary.org/Breadcrumb" itemscope="" class="breadcrumb-home">	<span class="fa fa-home fa-fw"></span>	<a href="//saburoku.top" itemprop="url">	<span itemprop="title">ホーム</span>	</a>	<span class="sp">	<span class="fa fa-angle-right"></span>	</span> </div> <div itemtype="//data-vocabulary.org/Breadcrumb" itemscope=""><span class="fa fa-folder fa-fw"></span><a href="//saburoku.top/index.php/category/%e6%9c%aa%e5%88%86%e9%a1%9e/" itemprop="url"><span itemprop="title">未分類</span></a> </div> </div> <!-- /#breadcrumb --> <div id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-1"> <div class="article"> <div class="eye-catch"> <img src="//wp-simplicity.com/wp-content/uploads/2016/02/52E91D0C67.jpg" class="attachment-large wp-post-image" alt="photo-1427501482951-3da9b725be23" height="453" width="680"> </div> <h1 class="entry-title"> Hello world! </h1> <p class="post-meta"> <span class="post-date"><span class="fa fa-clock-o fa-fw"></span> <time class="entry-date date published" datetime="2015-09-09T11:23:27+00:00">2015/9/9</time> </span> <span class="post-update"><span class="fa fa-history fa-fw"></span><span class="entry-date date updated">2015/9/12</span></span> <span class="category"><span class="fa fa-folder fa-fw"></span><a href="//saburoku.top/index.php/category/%e6%9c%aa%e5%88%86%e9%a1%9e/" rel="category tag">未分類</a> </span> </p> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wordpress theme Simplicity eye-catch image idea - Script Codes CSS Codes

@charset "UTF-8";
#breadcrumb { position: absolute; /*#mainにposition:relative追加*/ z-index: 1; width: 100%; left: 0; box-sizing: border-box; background: rgba(255, 100, 255, 0.6); padding: 4px;
}
#breadcrumb a { color: #fff;
}
.eye-catch { position: relative; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transform-origin: top center; transform-origin: top center; box-sizing: border-box; z-index: 0; margin-bottom: 30px;
}
.eye-catch img { width: 100%; height: auto;
}
/*調整用*/
#main { margin: 0 auto; float: none; max-width: 100%; position: relative;
}
body { padding: 4px; min-width: 320px;
}
/*
*, *::before, *::after { box-sizing: border-box;
}*/

Wordpress theme Simplicity eye-catch image idea - Script Codes JS Codes

(function($) {	//リサイズ対応しています。コードとresultの境界を動かすことでリサイズできます。	function scaleup() {	var ew = $(".article").outerWidth(),	mw = $("#main").outerWidth(),	sl = mw / ew;	console.log("bcFont: ", sl);	$(".eye-catch").css({	transform: "scale(" + sl + ")"	});	}	var timer;	$(window).on("resize", function() {	if (timer) clearTimeout(timer);	timer = setTimeout(function() {	scaleup();	}, 100);	});	$(function() {	scaleup();	});
})(jQuery);
Wordpress theme Simplicity eye-catch image idea - Script Codes
Wordpress theme Simplicity eye-catch image idea - Script Codes
Home Page Home
Developer Hidekichi
Username Hidekichi
Uploaded July 10, 2022
Rating 3
Size 3,364 Kb
Views 48,576
Do you need developer help for Wordpress theme Simplicity eye-catch image idea?

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!

Hidekichi (Hidekichi) Script Codes
Name
A Pen by Hidekichi
Wordpress theme Simplicity list style flex
WordpressThemeSimplicity SNS button applied to Simplicity
WordpressTheme Simplicity title position fixed
WordpressTheme Simplicity 1column idea
WordpressTheme Simplicity sns button setting
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS
WordpressTheme Simplicity menu idea
Create amazing art & images 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!