A Pen by mp_graphic

Developer
Mp_graphic
Size
5,900 Kb
Views
74,888
  1. A Pen by mp_graphic Previews
  2. A Pen by mp_graphic HTML Codes
  3. A Pen by mp_graphic CSS Codes

How do I make an a pen by mp_graphic?

What is a a pen by mp_graphic? How do you make a a pen by mp_graphic? This script and codes were developed by Mp_graphic on 06 August 2022, Saturday.

A Pen by mp_graphic Previews
IQ Test

A Pen by mp_graphic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by mp_graphic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div id="wrapper">
<ul class="accordion">
<li id="contents-1">	<a href="#contents-1" class="open"><span>アプロディーテー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/NAMA_Aphrodite_Syracuse.jpg/276px-NAMA_Aphrodite_Syracuse.jpg">	<figcaption>紀元前4世紀のギリシアの原物を紀元2世紀にローマが複製したアプロディーテー像</figcaption>	</figure>	<h1 class="bg1">アプロディーテー</h1>	<p>アプロディーテー（古典ギリシア語：ΑΦΡΟΔΙΤΗ, Ἀφροδίτη, Aphrodītē）またはアプロディタ（アイオリス方言：ΑΦΡΟΔΙΤΑ, Ἀφροδιτα, Aphrodita）は、愛と美と性を司るギリシア神話の女神で、オリュンポス十二神の一柱である。美において誇り高く、パリスによる三美神の審判で、最高の美神として選ばれている。また、戦の女神としての側面も持つ。<a href="http://ja.wikipedia.org/wiki/アプロディーテー‎">アプロディーテー - Wikipedia</a></p>	</section>
</li>
<li id="contents-2">	<a href="#contents-2" class="open"><span>プシュケー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/a/ad/Psyche-Waterhouse.jpg">	<figcaption>黄金の箱を開けるプシューケー。ジョン・W・ウォーターハウス画</figcaption>	</figure>	<h1 class="bg1">プシュケー</h1>	<p>プシューケー（古希: Ψυχή, Psȳchē）とは、ギリシア神話に登場する人間の娘の名で、この言葉は古代ギリシア語で心・魂を意味する。 <br>日本語では、長母音を省略してプシュケ、または俗ラテン語読みでプシケーとも言う。児童向けの本では英語読みでサイキと表記される事もある。 アプレイウスのラテン小説「黄金のろば」の中の挿話として登場する。<a href="http://ja.wikipedia.org/wiki/プシュケー">プシュケー - Wikipedia</a></p>	</section>
</li>
<li id="contents-3">	<a href="#contents-3" class="open"><span>ヘレネー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Helene_Paris_David.jpg/452px-Helene_Paris_David.jpg">	<figcaption>ヘレネーとパリス、ジャック＝ルイ・ダヴィッド(1788)</figcaption>	</figure>	<h1 class="bg1">ヘレネー</h1>	<p>ヘレネー（古希: Ἑλένη, Helenē, ラテン語: Helena, 英語: Helen）は、ギリシア神話に登場する女性である。長母音を省略してヘレネとも表記される。元来はスパルタで信仰された樹木崇拝に関わる女神だったと考えられている。<br>	表向きはスパルタ王テュンダレオースと王妃レーダーの娘であるが、実父はゼウスであり、実母はネメシスともされる。兄にディオスクーロイ（カストールとポリュデウケース）兄弟、姉にクリュタイムネーストラーがいる。<a href="http://ja.wikipedia.org/wiki/ヘレネー">ヘレネー - Wikipedia</a></p>	</section>
</li>
<li id="contents-4">	<a href="#contents-4" class="open"><span>パンドーラー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Pandora.jpg/355px-Pandora.jpg">	<figcaption>「パンドーラー」 ジュール・ジョゼフ・ルフェーブル (1882)</figcaption>	</figure>	<h1 class="bg1">パンドーラー</h1>	<p>パンドーラー（古希: Πανδώρα, Pandōrā）は、ギリシア神話に登場する女性で、神々によって作られ人類の災いとして地上に送り込まれた。人類最初の女性とされる。パン（Παν）は「全てのもの」であり、パンドーラーは「全ての贈り物」を意味する。<br>	かつては地母神であり、冥界の相を強く打ち出した地下に住む太女神だったとされる。<a href="http://ja.wikipedia.org/wiki/パンドーラー">パンドーラー - Wikipedia</a></p>	</section>
</li>
<li id="contents-5">	<a href="#contents-5" class="open"><span>ペルセポネー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/AMI_-_Isis-Persephone.jpg/450px-AMI_-_Isis-Persephone.jpg">	<figcaption>ペルセポネー女神</figcaption>	</figure>	<h1 class="bg1">ペルセポネー</h1>	<p>ペルセポネー（古希: ΠΕΡΣΕΦΟΝΗ, Περσεφόνη, Persephonē）は、ギリシア神話に登場する女神で冥界の女王である。<br>	ゼウスとデーメーテールの娘で、ハーデースの妻として傍らに座しているとされる。しばしばコレー（「乙女」の意）とも言及される（地上にいる間はコレーと呼ばれ、冥界に入るとペルセポネーと呼ばれることもある）。<a href="http://ja.wikipedia.org/wiki/ペルセポネー‎">ペルセポネー - Wikipedia</a></p>	</section>
</li>
<li id="contents-6">	<a href="#contents-6" class="open"><span>アルテミス</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Diane_de_Versailles_Leochares.jpg/390px-Diane_de_Versailles_Leochares.jpg">	<figcaption>ヴェルサイユのアルテミス像</figcaption>	</figure>	<h1 class="bg1">アルテミス</h1>	<p>アルテミス（古希: ΑΡΤΕΜΙΣ, Ἄρτεμις, Artemis）は、ギリシア神話に登場する狩猟・純潔の女神である。のちに月の女神ともなった。セレーネーなどとは同一視される。	神話によれば、ゼウスとレートーの娘でアポローンの双生児。また、デーメーテールの娘とする説もある。オリュムポス十二神の一柱とされるが、本来のヘレーネス（古代ギリシア人）固有の神ではない。<a href="http://ja.wikipedia.org/wiki/アルテミス">アルテミス - Wikipedia</a></p>	</section>
</li>
<li id="contents-7">	<a href="#contents-7" class="open"><span>ヘーラー</span></a>	<a href="#" class="close" title="閉じる"></a>	<section>	<figure>	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Hera_Campana_Louvre_Ma2283.jpg/358px-Hera_Campana_Louvre_Ma2283.jpg">	<figcaption>ヘレニズム時代の原物を摸したローマのヘーラー像 (ルーヴル美術館蔵)</figcaption>	</figure>	<h1 class="bg1">ヘーラー</h1>	<p>ヘーラー（古希: ΗΡΑ, Ἥρα, Hērā）は、ギリシア神話に登場する最高位の女神である。長母音を省略してヘラとも表記される。その名は古典ギリシア語で「貴婦人、女主人」を意味し、結婚と母性、貞節を司る。沿え名はガメイラ（結婚の）、ズュギア（縁結びの）、アルカディアではまた女性の一生涯を表すパイス（乙女）、テレイア（成人の女性、妻）、ケーラー（寡婦）の三つの名で呼ばれた。『イーリアス』より牝牛の眼のヘーラー（ox-eyed Hera）という特有の形容語を持っている。<a href="http://ja.wikipedia.org/wiki/ヘーラー">ヘーラー - Wikipedia</a></p>	</section>
</li>
</ul>
</div>
</body>
</html>
</body>
</html>

A Pen by mp_graphic - Script Codes CSS Codes

/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
/* CSS Animation sample */
body { font-family: "Heiti SC";
}
header,
footer,
.qun article { box-sizing: border-box; -moz-box-sizing: border-box;
}
a { color: lightseagreen; transition: color .3s;
}
a:hover { color: lightcoral;
}
/* ------------------------------------------------------------ やさしい気持ちで対峙できる、フルスクリーンアコーディオン。 ------------------------------------------------------------ */
.accordion { z-index: 1; display: table; position: absolute; width: 100%; height: 100%; margin: 0; padding: 0;
}
.accordion li { display: table-cell; position: relative; overflow: hidden; width: 3%; transition: width 1s;
}
.accordion li:hover { width: 5%;
}
/* :::::: open :::::: */
.accordion li a.open { z-index: 1; cursor: pointer; display: block; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; width: 100%; height: 100%; color: white; background-color: mediumaquamarine; opacity: .9; transition: opacity .6s;
}
.accordion li:not(:last-child) a.open { border-right: 1px solid rgba(255,255,255,.3);
}
.accordion li:hover a.open { opacity: .6;
}
.accordion li a.open span { position: absolute; top: 50%; left: 50%; width: 9em; text-align: center; transform: translate(-50%,-50%) rotate(90deg); -webkit-transform: translate(-50%,-50%) rotate(90deg);
}
/* :::::: close :::::: */
.accordion li a.close { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* :::::: mechanism :::::: */
.accordion li:target { width: 80%; overflow: auto;
}
.accordion li:target a.open { pointer-events: none; opacity: 0;
}
.accordion li:target a.close { pointer-events: auto;
}
/* :::::: contents :::::: */
.accordion section { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; top: 0; left: 50%; width: 90%; min-width: 400px; max-width: 600px; padding: 20px 0; transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.accordion section figure { float: left; width: 30%; margin-right: 2em;
}
.accordion section figure img { width: 100%; height: auto;
}
.accordion section figcaption { margin: .5em 0; font-size: .65em;
}
.accordion section h1,
.accordion section p { overflow: hidden; margin: 0;
}
.accordion section h1 { padding: 10px; color: white; font-size: 1em; font-weight: normal;
}
.accordion section p { font-size: .8em; line-height: 1.8; padding: 2em; box-shadow: 0 0 20px -5px rgba(0,0,0,.1);
}
/* smart phone */
@media screen and (max-width: 479px) { .accordion section { min-width: 260px; } .accordion section figure { margin-right: 1em; } .accordion section figcaption { font-size: .6em; } .accordion section h1 { font-size: .9em; } .accordion section p { overflow: visible; padding: 10px 0; font-size: .7em; box-shadow: none; }
}
A Pen by mp_graphic - Script Codes
A Pen by mp_graphic - Script Codes
Home Page Home
Developer Mp_graphic
Username mp_graphic
Uploaded August 06, 2022
Rating 3
Size 5,900 Kb
Views 74,888
Do you need developer help for A Pen by mp_graphic?

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!

Mp_graphic (mp_graphic) Script Codes
Name
Scroll menu
Menu
Facebook
Animation
Animation
Vertical Scrollbars
SlideDown FixedMenu
MatchHeight
Animated Scroll Up Button
Img hover
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!