SHARE
TWEET

MINIMALCLASSY - Reszponzív klasszikus elegáns kinézet #3

cyberthea Jul 8th, 2017 (edited) 99 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- a témát készítette: Thea (http://themesbythea.blogspot.hu ÉS http://mindenurlfoglalt.blogspot.hu) -->
  2.  
  3. <html>
  4. <head>
  5.  
  6. <!-- a linkek új ablakban nyílnak meg -->
  7. <base target="_blank">
  8.  
  9. <!-- emiatt a sorocska miatt működnek az ikonok (ne töröld) -->
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  11.  
  12. <!-- emiatt a sorocska miatt működnek a betűtípusok (ne töröld) -->
  13. <link href="https://fonts.googleapis.com/css?family=Clicker+Script|Francois+One|Raleway&amp;subset=latin-ext" rel="stylesheet">
  14.  
  15. <!-- favicon (a href=" " közötti linket cseréld ki a saját faviconodra-->
  16. <link href="https://goo.gl/Gt25wW" rel="icon" type="image/x-icon"/>
  17.  
  18. <title><$blogpagetitle$></title>
  19.  
  20. <style type="text/css">
  21.  
  22. /* mindenegyben, például linkek, félkövér, kijelölés stb. kinézete
  23. ----------------------------------------------- */
  24. body {
  25. background-color: #f5f5f5;
  26. font-family: 'Raleway', sans-serif;
  27. font-size: 13px;
  28. color: #444444;
  29. letter-spacing: 1px;
  30. overflow-x: hidden;
  31. oveflow-y: scroll;
  32. text-align: justify;
  33. cursor:url("https://goo.gl/af3Xy3"),default;
  34. }
  35.  
  36. a:link, a:visited {
  37. color: #d4c0a7;
  38. text-decoration: none;
  39. -webkit-transition: all 0.5s ease-in-out;
  40. -moz-transition: all 0.5s ease-in-out;
  41. -o-transition: all 0.5s ease-in-out;
  42. -ms-transition: all 0.5s ease-in-out;
  43. transition: all 0.5s ease-in-out;
  44. }
  45.  
  46. a:hover {
  47. color: #ede0d4;
  48. border-bottom: 1px dashed #d4c0a7;
  49. cursor:url("https://goo.gl/xHy9Js"),text;
  50. }
  51.  
  52. b {
  53. color: #d4c0a7;
  54. text-shadow: #a8a8a8 1px 1px 2px;
  55. }
  56.  
  57. i {
  58. font-style: italic;
  59. color: #d4c0a7;
  60. }
  61.  
  62. u {
  63. text-decoration: none;
  64. border-bottom: 2px dashed #d4c0a7;
  65. }
  66.  
  67. u:hover {
  68. border-bottom: 2px dashed transparent;
  69. -webkit-transition: 0.5s;
  70. }
  71.  
  72. s {
  73. color: #cccccc;
  74. padding: 1px;
  75. }
  76.  
  77. blockquote {
  78. background: #fefcfb;
  79. border-left: 10px solid #eee5e0;
  80. margin: 1.5em 10px;
  81. padding: 0.5em 10px;
  82. quotes: "\201C""\201D""\2018""\2019";
  83. }
  84.  
  85. blockquote:before {
  86. color: #eee5e0;
  87. content: open-quote;
  88. font-size: 4em;
  89. line-height: 0.1em;
  90. margin-right: 0.25em;
  91. vertical-align: -0.4em;
  92. }
  93.  
  94. blockquote p {
  95.   display: inline;
  96. }
  97.  
  98. ::-moz-selection {
  99. color: #d4c0a7; }
  100. ::selection {
  101. color: #d4c0a7; }
  102.  
  103. ::-webkit-scrollbar {
  104. background: #eee5e0;
  105. width: 3px;
  106. height: 5px;
  107. }
  108.  
  109. ::-webkit-scrollbar-thumb:vertical {
  110. background: #d4c0a7;
  111. }
  112.  
  113.  
  114. /* navigáció kinézete
  115. ----------------------------------------------- */
  116. .nav {
  117. text-align: center;
  118. width: 100%
  119. }
  120.  
  121. a.nav-classy {
  122. color: #d4c0a7;
  123. text-shadow: #a8a8a8 1px 1px 2px;
  124. font-size: 10px;
  125. text-transform: uppercase;
  126. letter-spacing: 2px;
  127. margin-left: 2px;
  128. margin-bottom: 6px;
  129. text-align: center;
  130. width: 42%;
  131. padding:6px;
  132. border: 1px solid #d4c0a7;
  133. display: inline-block;
  134. filter: alpha(opacity = 80);
  135. opacity:.8;
  136. -moz-transition-duration: 1s;-
  137. webkit-transition-duration: 1s;
  138. }
  139.  
  140. a.nav-classy:hover {
  141. color: #ede0d4;
  142. background-color: transparent;
  143. -webkit-transition: all 0.5s ease-in-out;
  144. -moz-transition: all 0.5s ease-in-out;
  145. -o-transition: all 0.5s ease-in-out;
  146. -ms-transition: all 0.5s ease-in-out;
  147. transition: all 0.5s ease-in-out;
  148. }
  149.  
  150.  
  151. /* blog
  152. ----------------------------------------------- */
  153. .blog-body {
  154. width: 90%;
  155. padding: 10px;
  156. background-color: #fff;
  157. margin-top: 15px;
  158. color: #444444;
  159. }
  160.  
  161. .article {
  162. padding: 1%;
  163. width: 65%;
  164. float: right;
  165. text-align: justify;
  166. color: #444444;
  167. }
  168.  
  169. .post-title {
  170. color: #d4c0a7;
  171. font-size: 25px;
  172. font-family: 'Clicker Script', cursive;
  173. margin-bottom: 15px;
  174. text-align: center;
  175. font-weight: 100;
  176. }
  177.  
  178. .h4 {
  179. font-family: 'Raleway', sans-serif;
  180. color: #fff;
  181. font-weight: bold;
  182. font-size: 12px;
  183. }
  184.  
  185. .ar {
  186. margin: 0 auto;
  187. width: 0;
  188. height: 0;
  189. margin-top: -25px;
  190. border-left: 7px solid transparent;
  191. border-right: 7px solid transparent;
  192. border-bottom: 7px solid #eee5e0;
  193. }
  194.  
  195. .info {
  196. width: 180px;
  197. padding: 5px;
  198. background-color: #eee5e0;
  199. z-index: 100;
  200. text-align: justify;
  201. border-radius: 2px;
  202. -ms-border-radius: 2px;
  203. -moz-border-radius: 2px;
  204. -webkit-border-radius: 2px;
  205. -khtml-border-radius: 2px;
  206. margin-bottom:20px;
  207. }
  208.  
  209. .blog-entry {
  210. font-family: 'Raleway', sans-serif;
  211. font-size: 13px;
  212. color: #444444;
  213. letter-spacing: 1px;
  214. margin-top: 5px;
  215. }
  216.  
  217. .blog-entry img {
  218. max-width: 100%;
  219. padding: 5px;
  220. }
  221.  
  222. .blogger-labels {
  223. font-size: 0px;
  224. margin-top: 10px;
  225. }
  226.  
  227. .blogger-labels a {
  228. font-family: 'Arimo', sans-serif;
  229. color: #d4c0a7;
  230. font-size: 10px;
  231. font-weight: 100;
  232. text-transform: uppercase;
  233. padding: 3px;
  234. margin-right: 5px;
  235. text-decoration: none!important;
  236. }
  237.  
  238. .blogger-labels a:before {
  239. font-family: FontAwesome;
  240. font-size: 10px;
  241. color: #d4c0a7;
  242. content: '\f02b';}
  243.  
  244. #me {
  245. background: #d0d0d0;
  246. bottom: 10px;
  247. right: 10px;
  248. position: fixed;
  249. padding: 2px;
  250. text-transform: uppercase;
  251. letter-spacing: 2px;
  252. -webkit-opacity: .8;
  253. opacity:0.8;
  254. filter:alpha(opacity=80);
  255. moz-opacity: .8;
  256. }
  257.  
  258. #me a {
  259. color: #fff;
  260. }
  261.  
  262. #me a:hover {
  263. color: #fff;
  264. }
  265.  
  266. /* fejléc
  267. ----------------------------------------------- */
  268. .name {
  269. margin-top: -15px;
  270. margin-bottom: 8px;
  271. font-family: 'Francois One', sans-serif;
  272. font-size: 25px;
  273. color: #d4c0a7;
  274. background-color: #d4c0a7;
  275. opacity:.80;
  276. -webkit-background-clip: text;
  277. -webkit-text-fill-color: transparent;
  278. font-weight: bold;
  279. }
  280.  
  281. .lace {
  282. width: 100%;
  283. height: 18px;
  284. left: 0;
  285. top: 0;
  286. background-image:url('https://goo.gl/mHRVMq');
  287. repeat: repeat-x;
  288. }
  289.  
  290. .top {
  291. width: 100%;
  292. left: 0;
  293. top: 0px;
  294. position: fixed;
  295. z-index:999999;
  296. }
  297.  
  298. .bg {
  299. background-color: #fff;
  300. }
  301.  
  302. /* oldalsáv
  303. ----------------------------------------------- */
  304. .sidebar {
  305. padding: 2%;
  306. width: 28%;
  307. float: left;
  308. text-align: justify;
  309. margin-top: -20px;
  310. margin-bottom: -20px;
  311. border-right: 10px solid #f5f5f5;
  312. }
  313.  
  314. h2 {
  315. color: #d4c0a7;
  316. font-size: 25px;
  317. font-family: 'Clicker Script', cursive;
  318. margin-bottom: 5px;
  319. text-align: center;
  320. font-weight: 100;
  321. }
  322.  
  323. .label a {
  324. text-transform: uppercase;
  325. padding-left: 10px;
  326. padding-right: 10px;
  327. background: #fbdfec;
  328. padding: 10px;
  329. width: 42%;
  330. margin-bottom: 4px;
  331. display: inline-block;
  332. font-size: 11px;
  333. }
  334.  
  335. a.affies {
  336. color: #d4c0b2;
  337. text-shadow: #a8a8a8 1px 1px 2px;
  338. font-size: 10px;
  339. text-transform: uppercase;
  340. letter-spacing: 2px;
  341. margin-left: 2px;
  342. margin-bottom: 6px;
  343. text-align: center;
  344. width: 42%;
  345. padding:6px;
  346. border: 1px solid #d4c0b2;
  347. display: inline-block;
  348. filter: alpha(opacity = 80);
  349. opacity:.8;
  350. -moz-transition-duration: 1s;-
  351. webkit-transition-duration: 1s;
  352. }
  353.  
  354. a.affies:hover {
  355. color: #ede0d4;
  356. background-color: transparent;
  357. -webkit-transition: all 0.5s ease-in-out;
  358. -moz-transition: all 0.5s ease-in-out;
  359. -o-transition: all 0.5s ease-in-out;
  360. -ms-transition: all 0.5s ease-in-out;
  361. transition: all 0.5s ease-in-out;
  362. }
  363.  
  364.  
  365. /* mobil kinézet
  366. ----------------------------------------------- */
  367. @media only screen and (max-width: 800px) {
  368. a.nav-classy{
  369. font-size: 90%;
  370. width: 12%;
  371. }
  372.  
  373. .label a{
  374. width: 90%;
  375. }
  376.  
  377. }
  378.  
  379. @media only screen and (max-width: 500px) {
  380.  
  381. .nav{
  382. margin-bottom: 30px;
  383. }
  384.  
  385. a.nav-classy{
  386. width: 40%;
  387. font-size: 100%;
  388. display: inline-block;
  389. background: transparent;
  390. }
  391.  
  392. .blog-body {
  393. width: 95%;
  394. backround: transparent;
  395. shadow: none;
  396. border: none;
  397. padding: 0px;
  398. margin-top: 15px;
  399. }
  400.  
  401. .article {
  402. width: 95%;
  403. }
  404.  
  405. .blog-entry img {
  406. width: 100%;
  407. height: auto;
  408. align: center;
  409. }
  410.  
  411. .sidebar {
  412. width: 95%;
  413. border-left: none
  414. }
  415.  
  416. .name {
  417. color: #dcccb8;
  418. }
  419.  
  420. }
  421. </style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  422.  
  423. <br>
  424. </head><body>
  425.  
  426. <!--- ez itt a fejléc, az alábbi kódban csak a MINIMALCLASSY feliratot írd át! (a helyére megy az oldalad címe) ---!>
  427. <div class="top"><div class="bg"><br>
  428.     <center><div class="name"><div style="margin-bottom: -11px; margin-top: -10px;"><img src='https://goo.gl/HGoHge'>
  429.  MINIMALCLASSY <img src='https://goo.gl/okfvbw'></div>
  430.     </div></center>
  431.     </div><div class="lace"></div>
  432. </div>
  433. <br>
  434.  
  435. <center>
  436. <div class="blog-body">
  437.  
  438. <!--- bejegyzések - ehhez itt ne nyúlj ---!>
  439. <div id="me">
  440. <a href="http://themesbythea.blogspot.hu/" target="_blank">©</a>
  441. </div>
  442. <div id="main" class="article">
  443. <blogger>
  444. <div class="post-title">
  445. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  446. <br>
  447. <center><div class="ar"></div></center>
  448. <center><div class="info">
  449. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$>; <$BlogItemAuthor$>; <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> komment</a>
  450. </center></div>
  451. </div></center>
  452. <div class="blog-entry">
  453.  <$BlogItemBody$>
  454. </div><br>
  455. </blogger>
  456.  
  457. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  458. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"> <span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  459. </div>
  460.  
  461.  
  462. <!-- oldalsáv -->
  463. <div class="sidebar">
  464.  
  465. <!--- ha le szeretnéd cserélni az oldalsávban elsőként megjelenő képet, a src=" " közötti linket írd át ---!>
  466. <br><center><img src="https://goo.gl/KC1yg7" width="100%"></center><br>
  467.  
  468.  
  469. <center><img src="https://goo.gl/fb7jtq"></center>
  470.  
  471. <!-- első modul -->
  472. <h2> prológus </h2>
  473. Az oldalad leírásának helye. Ide jöhet például egy rövidke kis üdvözlőszöveg, amivel köszöntöd a látogatókat, vagy éppen pár szó rólad, tehát bármi, ami a fejedben motoszkál. <br>
  474. <center> <b>félkövér,</b> <i>dőlt,</i> <u>aláhúzott,</u> <s>áthúzott</s>
  475. <br><br>
  476. <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </center>
  477. <br>
  478.  
  479. <!-- menü - itt csak a menüpontok neveit írhatod át! -->
  480. <div class="nav"><center>
  481. <a class="nav-classy" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title=""><i class="fa fa-home" aria-hidden="true"></i> blog</a>
  482. <a class="nav-classy" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title=""><i class="fa fa-pencil" aria-hidden="true"></i> rólam</a><a class="nav-classy" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title=""><i class="fa fa-star-o" aria-hidden="true"></i> extrák</a> <a class="nav-classy" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" title=""><i class="fa fa-plus" aria-hidden="true"></i> kövess</a></center>
  483. </div>
  484.  
  485. <!-- második modul -->
  486. <h2> első fejezet </h2>
  487. <center><i>tennivalók, kívánságok, jóságok</i></center>
  488. ☑ megalkotni a blogom<br>
  489. ☐ sorozatmaratont tartani<br>
  490. ☐ scrapbookot készíteni<br>
  491. ☑ fánkpárnát készíteni<br>
  492. ☐ megtanulni gitározni<br>
  493. <br>
  494.  
  495. <!-- harmadik modul -->
  496. <h2> második fejezet </h2>
  497. Ezek itt a cserék. Rakd ki ide azokat az oldalakat, blogokat amiket szívesen látogatsz, kedvenc bloggereid, vagy akivel cserét kezdeményeztél. Nem árt ide írnod pár szót, hogy kit raksz ki, s kit nem, hogy elkerüld az esetleges félreértéseket.
  498.  
  499. <br><br><center>
  500. <a class="affies" href="IDE JÖN A LINK">Gizi</a>
  501. <a class="affies" href="IDE JÖN A LINK">Pista</a>
  502. <a class="affies" href="IDE JÖN A LINK">Józsi</a>
  503. <a class="affies" href="IDE JÖN A LINK">Erzsi</a>
  504. <a class="affies" href="IDE JÖN A LINK">Magdi</a>
  505. <a class="affies" href="IDE JÖN A LINK">Béla</a>
  506. <a class="affies" href="IDE JÖN A LINK">Mari</a>
  507. <a class="affies" href="IDE JÖN A LINK">Géza</a>
  508. </center>
  509.  
  510. <!-- negyedik modul -->
  511. <h2> harmadik fejezet </h2>
  512. <blockquote>If the world was blind, how many people would you impress?</blockquote>
  513.  
  514. <!-- ötödik modul -->
  515. <!-- kedvedre átírhatod a "múlt ▲▼▲▼", a "mostanában" és a "havonta" szavakat, a többihez ne nyúlj -->
  516. <h2> epilógus </h2>
  517. <center>
  518. <form name="jump" id="jump">
  519. <select name="menu" onchange="location=document.jump.menu.options
  520. [document.jump.menu.selectedIndex].value;" value="GO" style="font-family: raleway; font-size: 12px; text-transform: lowercase; color: #777777; width: 100%; border: 1px solid #DDDDDD; background-color: #FFFFFF; padding: 1px;">
  521. <option selected="selected">a múlt ▲▼▲▼</option>
  522. <optgroup label="mostanában" style="font:bold 11px raleway;">
  523. <BloggerPreviousItems>
  524. <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
  525. </BloggerPreviousItems>
  526. <optgroup label="havonta" style="font:bold 11px raleway;">
  527. <BloggerArchives>
  528. <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
  529. </BloggerArchives>
  530. </select></form></center>
  531.  
  532. <!-- hatodik modul -->
  533. <h2> köszönetnyilvánítás </h2>
  534. A kinézetet <a href="http://themesbythea.blogspot.hu/">Thea</a> készítette, de nem jöhetett volna létre <a href="http://wanaseoby.com/">Wana</a> és <a href="http://minimalclassy.tumblr.com/">MClassy</a> nélkül sem, az inspirációért pedig hatalmas köszönet jár <a href="http://www.blogskins.com/me/xx-rin"> xx-rinnek</a> és <a href="http://www.blogskins.com/me/evangrace98">Evangracenek.<br><br></a>
  535.  
  536. <center><img src="https://goo.gl/G7bWP4"></center>
  537. <br>
  538.  
  539. </div>
  540. <div style="clear:both"></div>
  541. <div style="clear:both"></div>
  542.  
  543. </div></div>
  544.  
  545. <!------- OLDALAK TARTALMA ------->
  546. <!------------------- OLDAL: KEZDŐLAP (BLOG) - ehhez itt ne nyúlj! ------------------>
  547. <div id="home" style="display: none;">
  548. <blogger>
  549. <div class="post-title">
  550. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  551. <br>
  552. <center><div class="ar"></div></center>
  553. <center><div class="info">
  554. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$>; <$BlogItemAuthor$>; <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> komment</a>
  555. </center></div>
  556. </div></center>
  557. <div class="blog-entry">
  558.  <$BlogItemBody$>
  559. </div><br>
  560. </blogger>
  561.  
  562. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  563. <span style="float:rleft;"><Newerposts><a href=<$NewerPosts$> target="_self"> <span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  564. </div>
  565.  
  566. <!------------------- OLDAL: RÓLAM ------------------>
  567. <div id="about" style="display: none;">
  568. <div class="post-title"> ki rejtőzik monitor mögött? </div>
  569. <br>
  570. Töltsd ki ezt az ürességet itt egy frappáns bemutatkozóval. Alapadataid, mióta blogolsz, miket szeretsz, miket utálsz, stb. Írhatsz összefüggő mondatokat, de akár pontokba is szedheted bemutatkozódat.<br>
  571. <div align="left">
  572. <p><img align="left" src="https://goo.gl/jSxLR6" width="40%">
  573. ◦ becses nevem ... de szólíts csak ...<br>
  574. ◦ ... éves vagyok<br>
  575. ◦ szeretem ...<br>
  576. ◦ utálom ...<br>
  577. ◦ kedvenc ...<br>
  578. ◦ álmaim ...<br>
  579. ◦ szeretnék eljutni ...<br>
  580. ◦ megtalálhatsz itt és itt is ...<br>
  581. </p>
  582.  
  583. <!------------------- OLDAL: EXTRÁK ------------------>
  584. <div id="stuff" style="display: none;">
  585. <div class="post-title"> extra menüpont </div>
  586. <br>
  587. Írj ide, amit csak akarsz. Példának okáért itt egy linklista, de ha szeretnéd, lecserélheted másra.
  588. <br><br>
  589. <div style='float:left; width:40%'>
  590. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  591.  
  592. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  593.  
  594. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  595.  
  596. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  597.  
  598. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  599. </div>
  600.  
  601. <div style='float:left; width:40%; margin-left:50px'>
  602. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  603.  
  604. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  605.  
  606. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  607.  
  608. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  609.  
  610. <img src="https://goo.gl/HHnFLb"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  611. </div>
  612. <br><br>
  613. </div>
  614.  
  615. <!------------------- OLDALAK TARTALMÁNAK VÉGE ------------------>
  616.  
  617. </body>
  618. </html>
  619.  
  620. <!---------------------- legyen szép napod! ♡ -------------------!>
RAW Paste Data
Top