daily pastebin goal
91%
SHARE
TWEET

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

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