шаблоны

Страница: 1

Сообщений 1 страница 11 из 11

Поделиться12023-10-23 20:31:03

Автор: renesmee

Поделиться22023-10-23 20:31:20

Автор: renesmee

[html]<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet"><style>/* shipovnik */
#ship13, #ship13h {
--bgw: 700px; /* максимальная ширина главного блока */
--bg1: #ececec; /* главный фон */
--clr1: #2f5865; /* ХРОНОЛОГИЯ цвет названия */
--clr2: #969696; /* цвет строки под хронологией */
--clr3: #000; /* цвет рамки */
--clr4: rgba(161,190,199, 0.35); /* полупрозрачная цифра */
--clr5: #116b96; /* цвет ссылок */
margin: auto; /* отступы от краев */
}

#ship13 {display:block; width:auto; box-sizing:border-box; padding:24px; max-width: var(--bgw); background: var(--bg1);}

/*** ХРОНОЛОГИЯ название ***/
#ship13h {display:block; box-sizing:border-box; width:auto; max-width: var(--bgw); padding: 14px 0 0 0; background:var(--bg1); color: var(--clr1); text-align:center;
font-weight:600;
font-size:24px;
font-family: 'Playfair Display', Georgia, serif;
}
#ship13h em {display:block; padding-top:4px; font-style:normal !important; color: var(--clr2); font-weight:400;
font-family: Arial, sans-serif;
font-size:10px;
}

boxf {display:block; position:relative; z-index:3; width: 50%; min-height:50px; background:transparent; border-right: 1px solid var(--clr3);}
boxf:nth-child(2n) {display:block; position:relative; margin-top: -40px; margin-bottom: -40px; margin-left:calc(0px + 50%); width:50%; min-height:50px; border-right: 0px none transparent; border-left: 1px solid var(--clr3);}
boxf:last-child {margin-bottom:0px;}

/* категория */
.boxcat {display:block; padding:0 10px 4px 10px; text-align:left; border-bottom: 1px solid var(--clr3);
text-transform:uppercase;
font-weight:600;
font-size:16px;
font-family: 'Playfair Display', Georgia, serif;
}
boxf:nth-child(2n) .boxcat {text-align:right;}
.boxcat::after {display: block; content: ""; height: 6px; width: 6px; float: right; margin: 23px -13px auto auto; background: var(--clr3); border-radius: 50%;}
boxf:nth-child(2n) .boxcat::after {float: left; margin: 23px auto auto -13px;}

/* цифры */
.numbrow {display: block; margin: auto auto -52px 25px !important; z-index: 2; width: auto; background: transparent; text-align: left; font-style: normal !important;
font-size: 76px;
letter-spacing: -3px;
font-family: 'Yeseva One', Arial, sans-serif;
color: var(--clr4);
}
boxf:nth-child(2n) .numbrow {text-align: right; margin: auto 25px -52px auto !important;}

/* текстовый блок */
textf {display:block; padding:20px; line-height:120%;
text-align:justify;
font-weight: 400;
font-size: 12px;
font-family:'PT Sans', Tahoma, sans-serif;
}
textf > p {margin:0px !important; padding: 0 0 16px 0 !important; line-height: 110% !important;}
textf > p:last-child {padding-bottom:0px !important;}
#ship13 a {color: var(--clr5); text-decoration: none;}
#ship13 a:hover {text-decoration: underline;}</style>

<div id="ship13h">История Магикса
<em>цитата, музыкальный трек или многозначительное замечание</em></div>
<div id="ship13">

<boxf><em class="numbrow">01</em><div class="boxcat">Январь</div>
<textf>
<p><a href="ссылка">Я - название эпизода</a> - а здесь небольшое его описание</p>
<p><a href="ссылка">"Второй эпизод"</a> - и разнообразные пояснения к нему</p>
<p><a href="ссылка"><s>Печальный незакрытый эпизод</s></a> - слова прощания</p>
</textf></boxf>

<boxf><em class="numbrow">02</em><div class="boxcat">Февраль</div>
<textf>Блок 2.
<p><a href="ссылка">Эпизод 1</a> - а здесь небольшое его описание</p>
<p><a href="ссылка">Эпизод 2</a> - и разнообразные пояснения к нему</p>
<p><a href="ссылка">Эпизод 3</a> - слова прощания</p>
</textf></boxf>

<boxf><em class="numbrow">03</em><div class="boxcat">Март</div>
<textf>
<p>Блок 3 - в отдельных тегах P. Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.</p>
</textf></boxf>

<boxf><em class="numbrow">04</em><div class="boxcat">Апрель</div>
<textf>
<p>Блок 4.1. И некоторый текст внутри него.</p>
<p>Блок 4.2. Следующий текст, может содержать почти что угодно, а не только сылку на эпизоды.</p>
</textf></boxf>

</div>[/html]

Поделиться32023-10-23 20:31:49

Автор: renesmee

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {display:block; padding:40px; margin: 1.2em 1em 1.2em 2.2em; background:#000; outline: 1px solid #000; outline-offset:10px; max-width:500px; box-sizing:border-box;} /* shipovnik */

/* БЛОК АВАТАРОК */
.shiprs {
display:block;
border-top: 1px solid #949494;
text-align:center;
margin: 35px auto auto;
}

/* АВАТАРКИ КАРТИНКИ */
.shiav {
display:inline-block;
width: 50px;
height: 50px;
border-radius:50%;
background:#000;
margin: auto 10% auto auto;
border: 1px solid #949494;
transform: translate(0%, -50%);
transition: all 0.3s ease;
background-position:50% 50%;
background-size:cover;
}
.shiav:last-child {margin-right:0px;}
.shiav:hover {transition: all 0.3s ease; transform: scale(1.2) translate(0%, -40%);}

/*** ЗАГОЛОВОК ***/
#ship1 > em {
display:block;
margin: -10px auto 8px auto;
text-align:center;
font-style: normal !important;
letter-spacing:3px;
color:#d6a271;
font-family: Oranienbaum, Georgia, sans-serif;
font-size: 40px;
}

/*** БЛОК ТЕКСТА ***/
#ship1 > .btext {
padding: 0 50px;
font-size:12px;
color:#949494;
font-family: Arial, Tahoma, sans-serif;
text-align:justify;
}

/*** ПЕРСОНАЖИ ***/
.btext > p {
margin:auto !important;
padding-bottom: 16px !important;
text-align:center;
font-style:normal;
font-size:11px !important;
color:#737373;
}
</style>

<em>Администрация</em>

Диаспро — Блум — Муза - Скай

</p>

Слишком инициативная девочка, потрясающий дизайнер, массовик-текстовик и немножечко ленивая лама собрались в одну команду крутых игроков и администраторов.

</div></div>
[/html]

Поделиться42023-10-23 20:32:09

Автор: renesmee

[html]<div class="postcolor"> <style type="text/css">
.ccletter { width: 600px; margin: auto; }
.ccletterti { width: 580px; padding: 10px; background-color: #fff; border-top: 5px solid #222; border-bottom: 5px solid #222; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 100%; font-size: 60px; color: #222; letter-spacing: -6px; text-align: center; word-spacing: -2px;}
.ccletteris a, .ccletteris { text-align: right; font-size: 10px; letter-spacing: 1px; word-spacing: 0px; line-height: 100%; font-weight: 400; text-decoration: none; color: #222; }
.cctabs { position: relative; clear: both; margin: 0px; width: 600px; height: 500px; overflow: hidden; }
.cctab { display: block; width: 100px; height: 50px; text-align: center;}
.cctab label { width: 90px; position: relative; top: 0px; left: 0px; padding: 5px; background-color: #fafafa; font-size: 8px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 100%; font-family: 'Roboto Condensed', sans-serif; top: 50px; border-bottom: 5px solid #fff;}
.cctab [type=radio] { display: none; }
.cccontent { padding: 20px; position: absolute; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; overflow: hidden; top: 400px; bottom: 0px; left: 100px; right: 0px; background-color: #fff; padding: 20px; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 11px; text-align: justify; line-height: 100%;}
[type=radio]:checked ~ label { border-bottom: 5px solid #222; z-index: 2; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
[type=radio]:checked ~ label ~ .cccontent { top: 0px; z-index: 1; }
.ccontents { width: 460px; height: 450px; padding-bottom: 10px; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; column-gap: 10px; -webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px; -o-column-gap: 10px; overflow: auto; }
.ccontents::-webkit-scrollbar { width: 5px; height: 5px; padding: 0px; border: 0px; }
.ccontents::-webkit-scrollbar-thumb { background-color: #222; padding: 0px; border: 0px; }
.ccontents::-webkit-scrollbar-track { background-color: #fff; padding: 0px; border: 0px; }
.ccontents h1 { margin: 0px; margin-top: 20px; margin-bottom: 0px; font-weight: 700; text-align: center; font-size: 30px; letter-spacing: -1px; line-height: 100%; font-family: 'Roboto Condensed', sans-serif; color: #222; text-transform: uppercase;}
.ccontents:first-letter, .ccontents>p:first-letter { float: left; margin-right: 5px; font-weight: 700; text-align: center; font-size: 30px; letter-spacing: -1px; line-height: 100%; font-family: 'Roboto Condensed', sans-serif; color: #222; text-transform: uppercase; }
.ccontents h1:first-letter { margin: 0px; }
.ccontents b { text-transform: uppercase; line-height: 100%; font-size: 14px; }
.ccontents span, .ccontents span a { font-size: 20px; text-transform: uppercase; font-weight: 700; color: #222; letter-spacing: -2px; line-height: 100%; text-decoration: none; text-align: center;}
</style>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet" type="text/css">

<div class="ccletter"><img src="http://ultraimg.com/images/Chronicle4.png"><div class="ccletterti"> the candyland chronicle <div class="ccletteris"><a href="http://candyland-couture.com/index.php?showuser=27"> volume 2 issue 2 23 february 16 </a></div></div><div style="width: 600px; background-color: #f0f0f0;"> <div class="cctabs"> <div class="cctab"> <input type="radio" id="cctab-1" name="cctab-group-1" checked=""> <label for="cctab-1" style="padding-right: 30px; padding-left: 30px;"> page i. </label> <div class="cccontent"><div class="ccontents"><div style="margin-top: -20px;"></div>

<h1> from your pink ladies! </h1><p>

Welcome to the Candyland Chronicle, your first stop place for all news on the site! From your pink ladies this month, we have a few special announcements that we would like to make. The first would be that we are officially <b>THREE YEARS OLD</b>! On February 14th, Valentine's Day, we celebrated our 3rd birthday open. As of today, we have a whopping <b>5,627 MEMBERS</b> and we couldn't be more proud of the progress we have made as a resource site over the past three years. Thank you to everyone who has put their heart and soul into this site and thank you to the members who keep us open! </p><p>

Our second announcement is in regards to the recent <b>Imgur Incident</b> involving Jcink. As some of you may know, Imgur has recently banned Jcink's domain from hotlinking their images. Whenever we put a direct link into an image code here on the site, we are hotlinking to their website, which uses their bandwidth. Due to the massive influx of these images on Jcink websites, and due to the fact that hotlinking is in breach of their Terms of Service, Imgur decided to ban Jcink domain names. What this means is that over time, you may notice that your images may stop working on the site. While we haven't seen this recent event affect Candyland yet, that doesn't mean it won't happen in the future, and we encourage you all to start hosting your graphics on a different hosting website. We suggest UltraImg, which allows you to hotlink to other sites, and/or Deviantart, which is a great place for hosting graphics. We mildly suggest not using Tinypic (which can sometimes change the link of your image altogether or delete it) or Photobucket (which will often erase images when their bandwidth is exceeded). We're sorry about this recent development, but unfortunately, it is out of our control!</p><p>

And finally, we wanted to welcome back a certain <b>JAKE</b> to staff, who has rejoined us a Writing Moderator! We're so happy with our staff team as of late, as all of them have been working very hard to keep the site and active and friendly place!</p><p>

</p><h1> staff search continued</h1><p>

Candyland Couture is desperately looking for Staff Members on several team! As you can tell, we are short on staff in almost every single category and we need YOUR help! Don't be afraid to apply. There is never someone who is not good enough to apply and we need all the help we can get. Please remember that in order to be a Graphics, Writing, Coding, or Awards Moderator, you must have a skill level of only <b>INTERMEDIATE</b> or above in order to obtain the position. This does not mean you have to be ranked already, just that you have to have the skill level already. The positions we are currently looking for are <b>2 GRAPHICS MODERATORS</b>, <b>2 COMMUNITY MODERATORS</b>, <b>2 CODING MODERATORS</b>, <b>2 CHALLENGE MODERATORS</b>, <b>2 AWARDS MODERATORS</b>, and <b>3 ADVERTISING MODERATORS</b>. If you are even the tiniest bit interested, please check out more about the duties and how you can apply <a href="/index.php?showtopic=20376">HERE</a>. We'd love to see some of you become a part of the Candyland Family!

</p><h1> current challenges </h1><blockquote>
<b>graphics</b><br>
▲ <a href="/index.php?showtopic=20849">SIMPLE AND CLEAN [BLEND]</a> <br>
▲ <a href="/index.php?showtopic=20865">DEADPOOL [SIGNATURE]</a> <br>
▲ <a href="/index.php?showtopic=20616">LOVE IN THE AIR [BANNER]</a> <br>
▲ <a href="/index.php?showtopic=20963">HIGH ON SUMMERTIME [SIGNATURE]</a> <br>
▲ <a href="/index.php?showtopic=20991">QUANTICO [ICONS]</a> <br>
▲ <a href="/index.php?showtopic=20660">BOWIE STYLE [COLORIZATION]</a> <br>
▲ <a href="/index.php?showtopic=20866">FLOWERS BLOOMING [RETOUCH]</a> <br>

<br>
<b>coding</b><br>
▲ <a href="/index.php?showtopic=20864">FLORAL TONES [IM TEMPLATE]</a><br>
▲ <a href="/index.php?showtopic=20940">GEOMETRIC SHAPES [THREAD]</a> <br>
▲ <a href="/index.php?showtopic=20699">HOVER TEXT [THREAD]</a> <br>
▲ <a href="/index.php?showtopic=20614">BE MY VALENTINE [TECH]</a> <br>
▲ <a href="/index.php?showtopic=20751">SPOTLIGHT [APPLICATION]</a> <br>

<br>
<b>writing</b><br>
▲ <a href="/index.php?showtopic=20863">SHEER COLD [RP POST]</a> <br>
▲ <a href="/index.php?showtopic=20690">WEAR IT WELL [SHORT STORY]</a> <br>
▲ <a href="/index.php?showtopic=20698">CITY STREETS [VIGNETTE]</a> <br>
▲ <a href="/index.php?showtopic=20611">LOVE AT FIRST SIGHT [NONFICTION]</a> <br>
▲ <a href="/index.php?showtopic=20609">SMOKE AND MIRRORS [POEM]</a> <br>
▲ <a href="/index.php?showtopic=20610">ANYTHING BUT ORDINARY [POEM]</a> <br>
▲ <a href="/index.php?showtopic=20607">LAND'S END [FANFICTION]</a> <br>
▲ <a href="/index.php?showtopic=20608">A DAY IN THE LIFE [MIXED]</a> <br>
</blockquote>

</div></div></div><div class="cctab"><input type="radio" id="cctab-2" name="cctab-group-1"> <label for="cctab-2" style="padding-left: 28px; padding-right: 29px;"> page ii. </label> <div class="cccontent"><div class="ccontents"><div style="margin-top: -20px;"></div>

<h1> birthday raffle </h1><p>

Happy Birthday Candyland! As a part of this month, we have a special Birthday Raffle going on. This month, we are raffling off five different candyland prizes, which includes the Willy Wonka and the Chocolate Factory movie, a bejeweled cupcake necklace, a cupcake plushie, a pack of fun-flavored lip smackers lip balm, and the original version of the Candyland board game. So far, we have had only one person enter for the drawing! Remember that any entries in any challenges, or referring friends, will count towards winning one of these awesome prizes! We would love to see more participation here, so please check out <a href="/index.php?showtopic=20651">THIS THREAD</a> which details how you can win one of our cool prizes. If you are interested, we welcome you to check out <a href="/index.php?showtopic=20664">THIS THREAD</a> as well, which details our Refer-A-Friend program. The drawing will start on March 1st, so we hope more people participate!

</p><h1> willy wonka's chocolate factory </h1><p>

Willy Wonka has invaded Candyland! As part of our 3rd year open, we wanted to bring a fun new event to the site that also re-designs the Candyland Adventure for those of you who want to challenge yourself further! In the Factory, we have three events for each specialty that allows you to complete a version of the Candyland Adventure that has been Wonka-fied! These events are the Wondrous Boat Ride (Graphics), the Bubble Machine (Writing), and the Wonkavator (Coding)! We encourage you to check out this adventure in <a href="/index.php?showforum=525">THIS BOARD</a>. We also have the Quest for the Golden Ticket occurring, created by three of our sweet moderators (Dee, Mia, & Mari), which is a Wonka Graphics Elimination challenge that should span the course of the next two months. While sign ups are closed, we encourage you to participate as a spectator and vote each week for who you think should continue on in the challenge.

</p><h1> resources & tips </h1><p>

Here are our resource and tip highlights for the month. We will start with <b>GRAPHICS</b>, which includes some awesome resources courtesy of <i>MIA</i>, one of the Graphics Moderators here on Candyland Couture. First up is Evey's <a href="http://www.deviantart.com/art/870-watchers-resources-pack-383991691" rel="nofollow" target="_blank">WATCHERS RESOURCE PACK</a>, including five beautiful PSDs, 10 varied textures and random screencaps for all your graphics needs. You can download the pack by clicking the link on the description and make sure to credit Evey if you use these! Next up we have <a href="http://www.deviantart.com/art/PSD-32-517321591" rel="nofollow" target="_blank">WHITE FOXES</a>, <a href="http://www.deviantart.com/art/PSD-27-513469649" rel="nofollow" target="_blank">SERPENT UNDERNEATH</a>, <a href="http://www.deviantart.com/art/PSD-33-521373426" rel="nofollow" target="_blank">BLUE BURNS</a> and <a href="http://raven-orlov.deviantart.com/art/PSD-51-574920815" rel="nofollow" target="_blank">THEATRICAL</a>, all color-specific, breathtakingly beautiful PSDs by DeviantArt user raven-orlov, which can be downloaded through the link in the description of each of them. Also by Raven, we have this fantastic <a href="http://raven-orlov.deviantart.com/art/1K-Watchers-Pack-556776428" rel="nofollow" target="_blank">WATCHERS PACK</a>, which includes six gorgeous textures and three coloring PSDs, download available by clicking the link in the description box. <a href="http://www.deviantart.com/art/PNG-pack-O4-163522569" rel="nofollow" target="_blank">THIS</a> PNG pack by DeviantArt user Perfectglamour contains several varied PNG files that are available for download by clicking the link in the description box. Last but not least, we have Carllton's <a href="http://www.deviantart.com/art/2-PSD-Signatures-I-410097519" rel="nofollow" target="_blank">GRAPHIC PSD PACK</a> containing two signature PSDs that are very helpful if you're just starting with graphics or looking to advance. Please remember that graphic PSDs are here always for learning purposes only. Make sure you credit all these amazing artists if you use their resources and have fun!</p><p>

Our <b>CODING</b> tips this month are brought to you by <i>SYDNEY</i>, our coding admin on Candyland Couture. The first is another coding resource for those wanting to learn how to code on their own. <a href="http://www.htmldog.com" rel="nofollow" target="_blank">HTMLDog</a> is a site that provides tutorials and techniques for various basic html styles. There’s something for everyone, and they offer three levels (beginner, intermediate, and advanced) on all three aspects of coding: html, css, and javascript. Beginner levels are step by step instructions and become less precise and more free-roam as you go through the levels. The other resource is <a href="http://subtlepatterns.com" rel="nofollow" target="_blank">SubtlePatterns</a>. This website provides you with simple, often seamless patterns that can be used as the main background to your codes, or as a simple and complementary addition to your codes to give them some more depth. I find adding simple backgrounds that have a barely-there pattern to be the most effective in adding an extra layer to codes, something you don’t notice right away, but once you do, it adds a whole new layer of interest to the code. If you’re making a skin, you might even want to add the seamless pattern into the background of the header and advertisement to complement the skin! This creates a connection between the site graphics and brings your site together in one little package, and nothing feels out of place!</p><p>

Finally, we have our <b>WRITING</b> resources and tips, provided by <i>AMBER</i>, one of the Writing Moderators. This time around, Amber wanted to discuss why she writes, as well as offer up some resources that she likes to use for writing. Why did I sign up to be a writing moderator? I get asked that question a lot, and the simple truth is, to teach others. At times, I do not even feel like the best person to teach other people. I'm not very good at it, the teaching I mean, and I get frustrated a lot. There's still that desire, however, to touch at least one person with not only my writing but my guidance. I did not even get into any form of creative writing until my Freshman year of high school. It was a dare by my journalism teacher. If anyone could get their valentines day poem chosen by the city paper to become published in their poetry section, we would get an instant pass for the class. No one in the last three years had managed it. <br>

I was the only one that managed to do it and since that day I've dived head first into creative writing and roleplaying. Over the years, I've picked up some tools and tips. For one, when I'm not writing in a notebook I use an online cloud system like Google Docs or Microsoft One Note. I've also used Evernote, which is easy to use and is free. Most of what I try to use are free versions. However, the best tool I have now is grammarly.com. Most of the features require a paid subscription but for basic editing, it is fantastic. Each of these items have allowed me to collaborate and grow as a writer. Also, having one place I can store my works and access from just about any device has saved me time and been mostly hassle free.

</p></div></div></div> <div class="cctab"> <input type="radio" id="cctab-3" name="cctab-group-1">
<label for="cctab-3" style="padding-left: 28px; padding-right: 28px;"> page iii. </label> <div class="cccontent"><div class="ccontents"><div style="margin-top: -20px;"></div>

<h1> member of the month </h1><br><br>
<center><span><a href="/index.php?showuser=5248"> V / Jesse</a></span></center> <p>
This month's featured member is V, or Jese, who goes by THE PUMPKIN KING. here. V is one of our newest members and while he isn't the most active on the site, he has posted some great writing pieces, and is hoping to learn more about Coding and Graphics by being a part of our community. Below, you can read a special interview, taken by Kathy, one of our Head Moderators:</p><p>

<b>1. What were your first impressions of Candyland Couture? Were they proven wrong? Right?</b><br><br>

<i> Well, I was a bit overwhelmed at first. I knew and had seen a little of what the site was and that was it. I did not really think much of the site. I did know that you were all writers and artists of your own way and of course that turned me away as well. I didn't really want to have some ideas, present them, then get shut down. I also wasn't thinking that there was going to be anyone friendly on the site. With that, I have been proved wrong by some people.
</i></p><p>

<b>2. As someone who is new to roleplaying and its many aspects, what drew you to want to join the roleplay community and become involved?</b><br><br>

<i>Now about that! Alice is the one that wanted me to join. Of course, a long time ago, I thought that I was never going to join, being that I was not open about the things that I write about. Of course, I thought, and still do, that I'm not good, but fair with my writing skills. What also got me to join besides Alice was the whole student/teacher aspect that you can get from this site. I do like how there is always someone online that will help when needed. A lot of sites fail with that part.
</i></p><p>

<b>3. What is your favorite thing about Candyland Couture?</b><br><br>

<i>I did really enjoy the whole schooling thing that was being tried in the beginning when I joined. Now I am trying to find something else to enjoy. I do like how I can just write away and post with the huge amounts of places to post. I still get lost in the site though, ha.
</i></p><p>

<b>4. Which of the three specialties (coding, writing, graphics) are you most drawn to and why?</b><br><br>

<i>All of them. This is partly why I came to join here so I can learn and share some ideas with others. I look to continue to grow in my writing and coding. Soon I want to learn how to graphic and dive just as deep into that as I did with writing and coding. </i></p><p>

<b>5. Are you currently dabbling in any of three specialties at the moment?</b><br><br>

<i>Now I am self teaching myself how to code better which is a lot to take in and a bit hard. I usually do this at work and for the most part I have learned a lot and surprised myself as well. As for my writing, I am trying to write a little story. It's not that bad but I'm at a complete wall with it and trying to get over it.</i><br></p><p>

<b>6. What do you like to do outside of Candyland and roleplaying?</b><br><br>

<i>I do way too much and nothing at all! Mostly I do play Video Games. Either on the Xbox One, Wii U, 3DS, PSVITA, PS3, PS4, PC, or on my phone. I have way too many that I need to finish. I also spend all my time with Alice. We always have something to do and every moment that we have is just as exciting as the last. Her and I will do something on our days off together which could either be going to the Zoo, going to the movies, possibly walking our dog Courage, playing our own games sitting side by side with our company. Although her and I have our days, =), I wouldn't ask for another soul to spend the rest of my life with.</i><br></p><p>

<b>Bonus: Tell us 4 unique facts about yourself (i.e. do you have pets? like sports? favorite foods?)</b><br><br>

<i>Well I have a dog named Courage. I saved him from worms, starvation, and abuse when he was a puppy. He is stupidly great! I used to be into sports when in high school and I long to play them again. I grew a love for Tennis when Alice was teaching me how to play, though she is way better then I am. I love all food and I'm sure a lot can agree with me that pizza is the god of all food. Of course again I am into video games like it's my life! I don't really think I have anything unique about myself to be honest, though people are always fascinated to know more about me.</i></p><p>

</p><h1> site of the month </h1><br><br>
<center><span><a href="http://dieyoung.jcink.net/"> If I Die Young</a></span></center> <p>
</p><center><img src="http://i.imgur.com/k2qMQjI.png"></center><br><br>
This month's site of the month is a site that we would like to help stay alive! Owned by our very own Writing Moderator, Amber, and Alice, one of the Administrators here, If I Die Young is a Au Covenant Roleplay chock full of supernatural creatures. They have werewolves, shifters, vampires, supernatural hunters, humans, and more! While the site has recently opened, and been opened many times before, the influx of members has been relatively small, and we wanted to give a shout out to this great site in the hopes that more people will join their ranks! We hope you all check out the site! The site plot can be read below: <p>

One year is enough to change everything. For the citizens of Ipswich, the change wasn't exactly expected. For so long Spenser Academy had been a private high school and boarding school but that was all about to change. No longer would it allow students under the age of seventeen. Now it was a college house. The courses taught here were the same that people would find at Harvard. In fact, the school had become a branch of Harvard and the first group of students it welcomed included the Sons of Ipswich.</p><p>

They had said that the goal was to turn the school into a remote access location from the larger school, but that was just the lie they spun. The true reason Spenser is no longer an Academy is buried deep within its historic location. The true test will be to see if they can succeed in their goal. But only time will tell. The first class year of the season is getting ready to start, and no one really knows what to expect.</p><p>

It's been almost a full year since Caleb, the leader of the Sons of Ipswich defeated Chase Collins and his evil plans. Chase, believed to be dead vanished and no one knows where he is. More people with magical and supernatural powers are flocking to the area, drawn by the unknown surge in power. Only time will tell if the new arrivals mean harm or not. It's partly why the Sons have stayed, they are unsure if this is a new threat to their home.</p><p>

Will everything survive or will they find out what answers that come along.. What's going to happen If I Die Young?</p><p>

</p><h1>video game of the month </h1><br><br>
<center><span>THE LONG DARK</span></center> <p>
Created by Hinterland Games, <b>THE LONG DARK</b> is a thoughtful exploration focused survival simulation set in the Northern Canadian wilderness in the aftermath of a geomagnetic disaster. Set in first person, you explore the frozen forests and lakes, struggling to survive as you find food, warmth, and fend off wild animals. The game contains a Story Mode, which has yet to be released for the Alpha version of the game and a Sandbox mode, where you can choose a landscape (different difficulties per landscape) and start your struggle to survive. The game is currently still set in Alpha mode, which means that glitches are common as the game is still in development, and things may change over time as they better the game. It is available on Steam for any PC or Mac, as well as Xbox One. A trail version is available to play for one hour, but we encourage you to help the developers and purchase the game for only $19.99 if you enjoy it. If you wish to watch a trailer of the game, head <a href="https://www.youtube.com/watch?v=ECHnqMklU1A" savefrom_lm_index="0" savefrom_lm="1">HERE</a><span style="padding: 0; margin: 0; margin-left: 5px;"><a href="http://savefrom.net/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DECHnqMklU1A&utm_source=opera-chromium&utm_medium=extensions&utm_campaign=link_modifier" target="_blank" title="Получи прямую ссылку" savefrom_lm="1" savefrom_lm_is_link="1" style="width: 16px; height: 16px; display: inline-block; border: none; text-decoration: none; padding: 0px; position: relative; background-image: url("data:image/gif;base64,R0lGODlhEAAQAOZ3APf39+Xl5fT09OPj4/Hx8evr6/3+/u7u7uDh4OPi497e3t7e3/z8/P79/X3GbuXl5ubl5eHg4WzFUfb39+Pj4lzGOV7LOPz7+/n6+vn5+ZTLj9/e387Ozt7f3/7+/vv7/ISbePn5+m/JV1nRKXmVbkCnKVrSLDqsCuDh4d/e3uDn3/z7/H6TdVeaV1uSW+bn5v39/eXm5eXm5kyHP/f39pzGmVy7J3yRd9/f3mLEKkXCHJbka2TVM5vaZn6Wdfn6+YG/c/r5+ZO/jeLi41aHTIeageLn4f39/vr6+kzNG2PVM5i+lomdf2CXYKHVmtzo2YXNeDqsBebl5uHh4HDKWN3g3kKqEH6WeZHTXIPKdnSPbv79/pfmbE7PHpe1l4O8dTO5DODg4VDLIlKUUtzo2J7SmEWsLlG4NJbFjkrJHP7+/VK5Nfz8+zmnC3KKa+Hg4OHh4Y63j/3+/eDg4Ojo6P///8DAwP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAHcALAAAAAAQABAAAAfWgHd2g4SFhYJzdYqLjIpzgx5bBgYwHg1Hk2oNDXKDFwwfDF5NLmMtcStsn4MhGT8YS04aGmU1QRhIGYMTADQAQlAODlloAMYTgwICRmRfVBISIkBPKsqDBAREZmcVFhYVayUz2IMHB1dWOmImI2lgUVrmgwUFLzdtXTxKSSduMfSD6Aik48MGlx05SAykM0gKhAAPAhTB0oNFABkPHg5KMIBCxzlMQFQZMGBIggSDpsCJgGDOmzkIUCAIM2dOhEEcNijQuQDHgg4KOqRYwMGOIENIB90JBAA7"); background-repeat: no-repeat;"></a></span> to watch the Sandbox trailer. (Warning: This game is addictive and Alice spent at least 8 hours in a row playing it. She out-survived her boyfriend. Win.)
</p><p>

</p><h1> ending remark </h1><p>
A big shoutout to everyone who helped make this issue of the Chronicle possible, including <b>ALICE</b> who wrote most of the article and created the header image, <b>KATHY</b> for interviewing our member of the month, and our contributors for resources, <b>MIA, AMBER, & SYDNEY</b>. A big thanks for <b>BECKY</b> once again for the code as well. Thank you again for all your support and we hope you enjoyed this issue of the Chronicle.
</p></div></div> </div> </div></div></div> </div>[/html]

Поделиться52023-10-23 20:32:59

Автор: renesmee

[html]<style>
#unb0 {
background: #000;
width: 640px;
padding: 20px;
outline: 1px solid #fff;
outline-offset: -5px;
}

#unb {
width: 540px;
background: #222;
height: auto;
padding: 20px 20px 55px 20px;
border: 1px solid #2f2f2f;
background-image: url(https://wallpaperaccess.com/full/3198713.jpg);
}

#unb h1 {
font: 50px georgia;
font-style: italic;
font-weight: 900;
color: #fff;
text-shadow: #252525 0px 1px 2px;
width: 450px;
text-align: right;
}

.unb1 {
font: 15px calibri;
color: #fff;
text-align: justify;
padding: 0px 30px;
}

.unb2 {
height: auto;
padding: 20px 20px;
background: #000;
}

.unb2 h2 {
font: 20px georgia;
font-style: italic;
font-weight: 900;
letter-spacing: 2px;
display: inline-block;
float: left;
margin: 10px 10px 5px 10px;
background: #2f2f2f;
padding: 15px;
border-bottom: 1px solid #fff;
}

.unb3 {
font: 10px calibri;
}

.unb3 a {
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
letter-spacing: 1px;
}
</style>

<center>
<div id="unb0"><div id="unb">
<h1>Сюжет</h1>
<div class="unb1">
<div class="unb2">
<h2>001.</h2>Огонь дракона не только пробуждает жизнь, но и порождает тьму. (с)[/font]
Их обгоревшие образы до сих пор являются в ночных кошмарах бывших врагов, а павшие товарищи предупреждают о будущей опасности. Шестнадцать лет назад они стали источником разрушения Домино, а магическое измерение Магикс было отравлено их существованием. Их становилось все больше, а фей все меньше.
Сожженные - зло. Они отравляли тела и души, захватывали разум и даровали вечную, но проклятую жизнь. Ими управляли словно марионетки, пока управление не вышло из-под контроля.
Они исчезли в тот самый момент, когда малолетняя принцесса Домино покинула волшебный мир. Ведьмы Астер Делла и Облачной башни считают, что она породила зло и вовсе не является феей, а феи не знают, что потерянная принцесса среди них. И пробуждение ее сил -
сигнал к тому, что зло возвращается.
Ведьмы Астер Делла и Облачной башни: долгие годы ведьмы вынуждены были опустить свои головы и смиренно копить силы, изучать совершенную магию и учить подрастающее поколение. Шестнадцать лет назад, когда сожженные напали на их деревню, многие мужчины пали в битве за нее, а женщины и дети спустились в холодные стены замка "Облачная башня". Живое существо обеспечивало их всем, помогая прожить, а полные книгами и артефактами сильнейших волшебников библиотеки позволили открыть школу для обучения подрастающего поколения ведьм. Однако они жаждут отмщения. Ведьмы знают, что не только сожженные виноваты в уничтожении их деревни, но и команда Света, которую возглавляла Розалинда. Юноши и девушки Облачной башни смелее покидают ее, посещают Землю, чтобы завербовать больше ведьм - потомков ведьм Салема - и готовятся показать себя миру.
Феи и специалисты: Начинается новый учебный год в школах Алфея и Красный фонтан. Феи и специалисты готовятся к первым совместным занятиям и уже сталкиваются с некоторыми трудностями обучения магии и боевых искусств. Принцессы и принцы решают внутренние дела своих планет, более приземленные пытаются выжить в условиях нападок от более состоятельных коллег. Учителя готовят новые подходы в обучении. Однако все омрачается пропажей нескольких учеников, которые без разрешения покидают школу и нахождением за территорией образовательных учреждений их трупов с неестественными травмами. По школе распространяются слухи, а родители начинают переживать за своих детей.
Магикс: На планете происходят странные аномалии: в городе пропадают феи, а на развалинах старого Астер Делла происходит движение. Кто возвращается, говорит о жутких встречах с сожженными. Кто получает травмы и раны, умирает в муках или теряет разум и превращается в подобных. Никто не знает, что делать,
Феи ищут способ, чтобы победить сожженных. Правительство Магикса обращается к школам, но даже школы тут бессильны, поэтому совместными силами над городом устанавливают магический купол. В городе начинается паника, а другие планеты постепенно отрезают связь с Магиксом. Никто не хочет, чтобы сожженные распространились по всему волшебному измерению.
Другие планеты [неиграбельно в основном сюжете]: На планетах происходят свои политические и магические распри. Многие планеты перекрывают поставку продовольствия и связи со столицей своего измерения - Магикс - и ищут способы, чтобы помочь планете. Однако они сами находятся в опасности, так как не только сожженные пробуждаются по всему измерению, но и на планеты совершаются постоянные набеги волшебником, который забирает их силу.<p>

<h2>002.</h2> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
<div class="unb3">

</div>
</center>
[/html]

Поделиться62023-10-23 20:33:13

Автор: renesmee

[html]<div class="bthteborder"><div class="bthteside"></div><div class="bthtelyr">

Сюжет
</div><div style="height: 8px;"></div><div class="bthtepic">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Sed elementum ipsum non nibh aliquam, vitae scelerisque metus ornare</b>. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla mattis, dolor in egestas porta, libero sem consectetur nibh, vel commodo turpis elit eget velit. Integer tincidunt velit sit amet neque ultrices, non porta lectus egestas. Donec ac scelerisque velit. <i>Curabitur tortor erat, malesuada quis mauris ut, iaculis auctor lacus</i>. Cras convallis ante ac nisi iaculis laoreet. Etiam accumsan, sem eu pulvinar aliquam, nibh arcu semper erat, non cursus nisi neque vitae ipsum.
<p>
Fusce tempus, odio sit amet sollicitudin finibus, mi orci rutrum erat, congue lobortis ex mi vitae orci. Maecenas sit amet odio et tortor cursus interdum egestas nec arcu. Sed eget lectus libero. Nullam nunc enim, feugiat eu metus sed, sagittis scelerisque massa. Nulla accumsan iaculis enim a interdum. Phasellus sed urna urna. Nunc congue tincidunt dolor, quis laoreet tellus consequat at. Morbi ipsum nunc, euismod quis varius vitae, tempor ac nibh. Vivamus luctus metus id enim vulputate, vestibulum finibus augue ullamcorper. Ut in luctus quam.
<p>
Maecenas eget risus ex. Nulla rhoncus, odio a feugiat sagittis, arcu risus vehicula nibh, vitae blandit nulla tellus in lacus. Donec ut enim ultrices nisi ullamcorper molestie. Proin porttitor laoreet ligula, a aliquam justo varius sed. Nam efficitur augue quis commodo vestibulum. Aenean bibendum dolor egestas lorem laoreet, non euismod velit volutpat. Maecenas at mattis mauris. Donec malesuada dapibus odio ac malesuada. Nulla eget urna ultrices, varius nisi id, consequat odio. Integer lobortis erat turpis, eu sodales libero maximus quis. Nullam non felis at velit convallis interdum non a eros. Maecenas et nunc nisi.
<p>
Etiam nisl ligula, scelerisque vitae vehicula in, sollicitudin ac velit. Aenean non ornare est. Nam finibus ut justo ut eleifend. Sed tempor non ipsum quis gravida. Sed id iaculis urna. Integer auctor velit vel lectus ultrices venenatis. Integer vel est nec nibh convallis blandit id eu nunc. Duis ac augue semper, eleifend purus a, blandit augue. Suspendisse erat ligula, lobortis id libero in, semper efficitur dui. Curabitur et odio id neque vestibulum lobortis in sit amet neque. Maecenas ultricies pharetra sapien, quis sollicitudin nulla laoreet et. Vestibulum interdum nisi eget condimentum feugiat. Morbi egestas semper augue, in accumsan erat facilisis vitae. Fusce sed ultrices lectus. Morbi varius commodo nunc, vel vehicula turpis egestas vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<p>
Vestibulum placerat enim scelerisque, lobortis dolor nec, mattis tellus. Quisque vitae lectus suscipit, aliquam lorem a, pretium massa. Nam tempus in odio eu molestie. Aliquam porta dictum elit a mollis. Phasellus id neque auctor, pretium tortor vel, ultrices nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec maximus purus a mattis cursus. Fusce convallis interdum tellus non egestas. Donec viverra lorem eu hendrerit bibendum. Aliquam quis molestie arcu, in ullamcorper dui. Nulla volutpat finibus dignissim. Etiam convallis molestie orci et consequat. Fusce ac quam a dui sollicitudin tincidunt. In non nibh dignissim, dictum dolor bibendum, consectetur magna. Donec eget metus id tellus volutpat semper quis nec arcu. Etiam orci risus, efficitur at interdum in, euismod eu dui.

</div></div>

.bthtetext::first-letter { margin-right: 8px; background-color: var(--accent); padding: 0px 12px 8px; line-height: 110%; text-transform: uppercase; font-size: 60px; font-family: playfair display sc; color: #FFF; float: left; }
.bthteborder p::first-letter { margin-right: 8px; background-color: var(--accent); padding: 0px 12px 8px; line-height: 110%; text-transform: uppercase; font-size: 60px; font-family: playfair display sc; color: #FFF; float: left; }
.bthtetext b { text-shadow: 1px 1px 2px #777; font-size: 14px; color: var(--accent); }
.bthtetext i { text-shadow: 1px 1px 2px var(--accent); font-size: 14px; color: #777; }

.bthtecpr { width: 598px; height: 50px; margin: -50px auto 0px; line-height: 50px; text-align: right; font-size: 30px; color: #000; opacity: 0; position: relative; z-index: 10; }
.bthtecpr:hover { opacity: 1; }
</style>[/html]

Поделиться72023-10-23 20:33:47

Автор: renesmee

[html]<div style="padding:25px 5px 10px 5px;"> <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600;1,700;1,800&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet" wfd-invisible="true">
<style wfd-invisible="true">

.moonsun {
position: relative;
background: var(--msbackground);
width: 600px;
height: 650px;
margin: 20px auto;
border: 1px solid var(--msborder);
--msbackground: #ac8b4c;
--msborder: #171f2c;
--mstext1: #242c3d;
--mstext2: #1c2633;
--mstext3: #cbc6b0;
--mstext4: #031baf;
overflow: hidden;
}

.ms-top {
position: relative;
font-family: old standard tt;
padding: 30px;
padding-right: 40px;
font-size: 100px;
line-height: 80%;
color: var(--mstext2);
font-weight: 700;
text-align: right;
border-bottom: 1px solid var(--msborder);
text-shadow: 1px 1px 1px #eee;
}

.ms-top span {
display: block;
font-style: italic;
color: var(--mstext1);
margin: -35px 60px -45px 0px;
z-index: 1;
position: relative;
font-family: eb garamond;
font-weight: 400;
}

.ms-top:before {
content:"";
position: absolute;
background: var(--msborder);
width: 1px;
height: calc(100% + 60px);
top: 0px;
left: 100px;
z-index: 1;
}

.ms-top div {
margin-right:40px;
}

.ms-top:after {
content: "";
position: absolute;
background: var(--mstext1);
height: 60px;
width: 60px;
border-radius: 100%;
left: 100px;
top: 110px;
}

.ms-top img {
height: 50px;
width: 50px;
border-radius: 100%;
object-fit: cover;
padding: 5px;
border: 1px solid var(--msborder);
float: left;
margin-left: 50px;
z-index: 2;
position: relative;
background: var(--msbackground);
}

.moonsun input {
display: none;
}

.moonsun label {
font-family: old standard tt;
font-weight: 700;
color: var(--mstext2);
text-shadow: 1px 1px #eee;
left: 120px;
position: relative;
top: 20px;
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
margin-right: 20px;
transition: 0.2s;
-webkit-transition: 0.2s;
z-index: 2;
}

#moontab1:checked+label, #moontab2:checked+label, #moontab3:checked+label, #moontab4:checked+label {
color: var(--mstext4);
text-shadow: 1px 1px 1px #fff;
}

.ms-contentbox {
position: relative;
border: 1px solid var(--msborder);
margin: 0 40px;
margin-top: 39px;
height: 230px;
box-sizing: border-box;
background: #eee;
padding: 20px;
overflow: hidden;
z-index: 2;
}

.ms-inner1, .ms-inner2, .ms-inner3, .ms-inner4 {
position: relative;
height: 190px;
width: 380px;
padding-right: 10px;
overflow: auto;
border: 10px solid #eee;
box-sizing: border-box;
font-family: open sans;
color: #222;
font-size: 11px;
line-height: 170%;
text-align: justify;
opacity: 1;
margin-bottom: 20px;
transition: 0.6s;
-webkit-transition: 0.6s;
}

#moontab2:checked ~ .ms-contentbox .ms-inner1 {
margin-top: -210px;
}

#moontab3:checked ~ .ms-contentbox .ms-inner1 {
margin-top: -420px;
}

#moontab4:checked ~ .ms-contentbox .ms-inner1 {
margin-top: -630px;
}

.ms-contentbox h1 {
font-family: old standard tt;
font-weight: 700;
font-size: 13px;
color: var(--mstext2);
margin: 0px;
margin-bottom: 10px;
line-height: 100%;
text-transform: uppercase;
}

.ms-contentbox b {
color: var(--mstext2);
}

.ms-risebox {
position: absolute;
background: var(--mstext1);
width: 100%;
height: 82px;
border-top: 1px solid var(--msborder);
bottom: 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
}

#moontab2:checked ~ .ms-risebox {
height: 165px;
}

#moontab3:checked ~ .ms-risebox {
height:247px;
}

#moontab4:checked ~ .ms-risebox {
height: 330px;
}

.ms-inner1::-webkit-scrollbar{width:5px!important}
.ms-inner1::-webkit-scrollbar-track{background:transparent!important;border:1px solid var(--msborder);!important}
.ms-inner1::-webkit-scrollbar-thumb{background: var(--mstext1);border: 1px solid var(--msborder);}

.ms-inner2::-webkit-scrollbar{width:5px!important}
.ms-inner2::-webkit-scrollbar-track{background:transparent!important;border:1px solid var(--msborder);!important}
.ms-inner2::-webkit-scrollbar-thumb{background: var(--mstext1);border: 1px solid var(--msborder);}

.ms-inner3::-webkit-scrollbar{width:5px!important}
.ms-inner3::-webkit-scrollbar-track{background:transparent!important;border:1px solid var(--msborder);!important}
.ms-inner3::-webkit-scrollbar-thumb{background: var(--mstext1);border: 1px solid var(--msborder);}

.ms-inner4::-webkit-scrollbar{width:5px!important}
.ms-inner4::-webkit-scrollbar-track{background:transparent!important;border:1px solid var(--msborder);!important}
.ms-inner4::-webkit-scrollbar-thumb{background: var(--mstext1);border: 1px solid var(--msborder);}

</style>
<div class="moonsun">
<div class="ms-top">
<div>Магия</div> <span>&</span> силы
<img src="https://static.tumblr.com/37a74072bfc4fff29c96b107cd8e2d57/w4cu4hs/45ao148p0/tumblr_static_tumblr_static__focused_v3.gif">
</div>

<input type="radio" id="moontab1" name="moonsun" checked="" wfd-invisible="true">
<label for="moontab1">001. </label>
<input type="radio" id="moontab2" name="moonsun" wfd-invisible="true">
<label for="moontab2">002. </label>
<input type="radio" id="moontab3" name="moonsun" wfd-invisible="true">
<label for="moontab3">003. </label>
<input type="radio" id="moontab4" name="moonsun" wfd-invisible="true">
<label for="moontab4">004. </label>

<div class="ms-contentbox">

<div class="ms-inner1">
<h1>Огонь</h1>

Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Mauris commodo tincidunt ante eu vestibulum. Pellentesque elementum libero at purus elementum pellentesque. Suspendisse potenti. Integer interdum justo sit amet diam molestie, non porttitor erat venenatis. Phasellus fermentum velit scelerisque lobortis eleifend. Donec eleifend venenatis sagittis. Integer lacus sem, venenatis quis tellus in, vehicula rhoncus lectus. Integer lobortis, dui nec feugiat fermentum, eros erat consectetur tellus, consectetur pulvinar ante metus eget nibh. Ut ac felis vel augue semper condimentum. Nam in sodales arcu. Ut malesuada nulla fermentum felis congue tincidunt. Duis tempus tellus ac tincidunt vestibulum. Sed molestie leo enim. Cras semper sodales nibh, id posuere lectus placerat vel. Integer pellentesque ut ante et dictum. Duis sed ipsum in erat gravida ullamcorper sed ut leo.<p>

Suspendisse in dolor non lacus fermentum tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut purus luctus, consectetur leo nec, porta diam. Fusce ultricies sollicitudin dui, ac rutrum lectus lobortis non. Aliquam ut urna nibh. Praesent luctus nisi nisi, vel gravida ex feugiat sit amet. Vestibulum tincidunt nunc sit amet sodales molestie. Morbi tincidunt dignissim ipsum in iaculis. Nunc molestie mauris id pharetra ornare. Nunc feugiat eros nisi, nec ullamcorper justo consequat sit amet. Aliquam erat volutpat. Maecenas pharetra non nisi ac elementum. Vestibulum nulla turpis, consectetur ac nisi nec, rutrum sollicitudin tortor.

</p></div>

<div class="ms-inner2">
<h1>Вода</h1>

Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Mauris commodo tincidunt ante eu vestibulum. Pellentesque elementum libero at purus elementum pellentesque. Suspendisse potenti. Integer interdum justo sit amet diam molestie, non porttitor erat venenatis. Phasellus fermentum velit scelerisque lobortis eleifend. Donec eleifend venenatis sagittis. Integer lacus sem, venenatis quis tellus in, vehicula rhoncus lectus. Integer lobortis, dui nec feugiat fermentum, eros erat consectetur tellus, consectetur pulvinar ante metus eget nibh. Ut ac felis vel augue semper condimentum. Nam in sodales arcu. Ut malesuada nulla fermentum felis congue tincidunt. Duis tempus tellus ac tincidunt vestibulum. Sed molestie leo enim. Cras semper sodales nibh, id posuere lectus placerat vel. Integer pellentesque ut ante et dictum. Duis sed ipsum in erat gravida ullamcorper sed ut leo.<p>

Suspendisse in dolor non lacus fermentum tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut purus luctus, consectetur leo nec, porta diam. Fusce ultricies sollicitudin dui, ac rutrum lectus lobortis non. Aliquam ut urna nibh. Praesent luctus nisi nisi, vel gravida ex feugiat sit amet. Vestibulum tincidunt nunc sit amet sodales molestie. Morbi tincidunt dignissim ipsum in iaculis. Nunc molestie mauris id pharetra ornare. Nunc feugiat eros nisi, nec ullamcorper justo consequat sit amet. Aliquam erat volutpat. Maecenas pharetra non nisi ac elementum. Vestibulum nulla turpis, consectetur ac nisi nec, rutrum sollicitudin tortor.

</p></div>

<div class="ms-inner3">
<h1>Земля</h1>

Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Mauris commodo tincidunt ante eu vestibulum. Pellentesque elementum libero at purus elementum pellentesque. Suspendisse potenti. Integer interdum justo sit amet diam molestie, non porttitor erat venenatis. Phasellus fermentum velit scelerisque lobortis eleifend. Donec eleifend venenatis sagittis. Integer lacus sem, venenatis quis tellus in, vehicula rhoncus lectus. Integer lobortis, dui nec feugiat fermentum, eros erat consectetur tellus, consectetur pulvinar ante metus eget nibh. Ut ac felis vel augue semper condimentum. Nam in sodales arcu. Ut malesuada nulla fermentum felis congue tincidunt. Duis tempus tellus ac tincidunt vestibulum. Sed molestie leo enim. Cras semper sodales nibh, id posuere lectus placerat vel. Integer pellentesque ut ante et dictum. Duis sed ipsum in erat gravida ullamcorper sed ut leo.<p>

Suspendisse in dolor non lacus fermentum tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut purus luctus, consectetur leo nec, porta diam. Fusce ultricies sollicitudin dui, ac rutrum lectus lobortis non. Aliquam ut urna nibh. Praesent luctus nisi nisi, vel gravida ex feugiat sit amet. Vestibulum tincidunt nunc sit amet sodales molestie. Morbi tincidunt dignissim ipsum in iaculis. Nunc molestie mauris id pharetra ornare. Nunc feugiat eros nisi, nec ullamcorper justo consequat sit amet. Aliquam erat volutpat. Maecenas pharetra non nisi ac elementum. Vestibulum nulla turpis, consectetur ac nisi nec, rutrum sollicitudin tortor.

</p></div>

<div class="ms-inner4">
<h1>Воздух</h1>

Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Mauris commodo tincidunt ante eu vestibulum. Pellentesque elementum libero at purus elementum pellentesque. Suspendisse potenti. Integer interdum justo sit amet diam molestie, non porttitor erat venenatis. Phasellus fermentum velit scelerisque lobortis eleifend. Donec eleifend venenatis sagittis. Integer lacus sem, venenatis quis tellus in, vehicula rhoncus lectus. Integer lobortis, dui nec feugiat fermentum, eros erat consectetur tellus, consectetur pulvinar ante metus eget nibh. Ut ac felis vel augue semper condimentum. Nam in sodales arcu. Ut malesuada nulla fermentum felis congue tincidunt. Duis tempus tellus ac tincidunt vestibulum. Sed molestie leo enim. Cras semper sodales nibh, id posuere lectus placerat vel. Integer pellentesque ut ante et dictum. Duis sed ipsum in erat gravida ullamcorper sed ut leo.<p>

Suspendisse in dolor non lacus fermentum tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut purus luctus, consectetur leo nec, porta diam. Fusce ultricies sollicitudin dui, ac rutrum lectus lobortis non. Aliquam ut urna nibh. Praesent luctus nisi nisi, vel gravida ex feugiat sit amet. Vestibulum tincidunt nunc sit amet sodales molestie. Morbi tincidunt dignissim ipsum in iaculis. Nunc molestie mauris id pharetra ornare. Nunc feugiat eros nisi, nec ullamcorper justo consequat sit amet. Aliquam erat volutpat. Maecenas pharetra non nisi ac elementum. Vestibulum nulla turpis, consectetur ac nisi nec, rutrum sollicitudin tortor.

</p></div>
<div class="ms-inner4">
<h1>Воздух</h1>

Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Mauris commodo tincidunt ante eu vestibulum. Pellentesque elementum libero at purus elementum pellentesque. Suspendisse potenti. Integer interdum justo sit amet diam molestie, non porttitor erat venenatis. Phasellus fermentum velit scelerisque lobortis eleifend. Donec eleifend venenatis sagittis. Integer lacus sem, venenatis quis tellus in, vehicula rhoncus lectus. Integer lobortis, dui nec feugiat fermentum, eros erat consectetur tellus, consectetur pulvinar ante metus eget nibh. Ut ac felis vel augue semper condimentum. Nam in sodales arcu. Ut malesuada nulla fermentum felis congue tincidunt. Duis tempus tellus ac tincidunt vestibulum. Sed molestie leo enim. Cras semper sodales nibh, id posuere lectus placerat vel. Integer pellentesque ut ante et dictum. Duis sed ipsum in erat gravida ullamcorper sed ut leo.<p>

Поделиться82023-10-23 20:34:44

Автор: renesmee

[html]<div class="postcolor"><div style="padding:25px 5px 10px 5px;"> <link href="https://fonts.googleapis.com/css?family=Istok+Web|Rozha+One" rel="stylesheet" wfd-invisible="true">
<style wfd-invisible="true">
.yerfall {
position: relative;
margin: 20px auto 0px;
height: 550px;
width: 500px;
overflow: hidden;
background: #eee;
}

.yerfall img {
height: 550px;
position: absolute;
width: 200px;
object-fit: cover;
outline: 1px solid #330314;
outline-offset: 10px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

.yfimgover {
height: 550px;
width: 200px;
position: absolute;
background: #330314;
mix-blend-mode: hard-light;
opacity: 0.7;
}

.ml {
font-family: Rozha One;
position: absolute;
color: #eee;
font-size: 45px;
-webkit-text-stroke: 0.5px #033322;
text-stroke: 0.5px #033322;
bottom: 30px;
left: 50px;
width: 10px;
line-height: 100%;
}

.ib {
position: absolute;
font-family: istok web;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 10px;
color: #fff;
text-align: center;
width: 550px;
bottom: 5px;
transform: rotate(90deg);
left: -255px;
height: 10px;
top: 275px;
}

.yftext {
position: absolute;
font-family: istok web;
color: #555;
width: 195px;
right: 50px;
text-align: justify;
height: 450px;
overflow: auto;
top: 50px;
font-size: 11px;
line-height: 180%;
padding-right: 5px;
}

.yftext::-webkit-scrollbar{width:1px}
.yftext::-webkit-scrollbar-track{background:transparent!important;border:none!important}
.yftext::-webkit-scrollbar-thumb{background: #033322}

.yftext b {
background: #330314;
color: #eee;
opacity: 0.7;
}

</style>
<div class="yerfall">
<img src="https://i.pinimg.com/564x/78/05/49/7805493c10657502c72f082b94479bfb.jpg">
<div class="yfimgover"></div>
<div class="ml">my love, my love is dead</div>
<div class="ib">I buried it. what a senseless thing</div>
<div class="yftext">
Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Congue nisi vitae suscipit tellus mauris. Leo a diam sollicitudin tempor id. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Arcu dui vivamus arcu felis bibendum ut tristique. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Et molestie ac feugiat sed lectus vestibulum mattis. Etiam sit amet nisl purus in mollis nunc sed.<p></p>

Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Ultrices in iaculis nunc sed augue. Nibh mauris cursus mattis molestie a. Ut placerat orci nulla pellentesque dignissim enim. Duis convallis convallis tellus id interdum velit laoreet id. At volutpat diam ut venenatis. Interdum velit laoreet id donec ultrices tincidunt arcu non sodales. Nibh cras pulvinar mattis nunc sed blandit. Et netus et malesuada fames ac turpis egestas integer eget. Sit amet nulla facilisi morbi tempus. Semper quis lectus nulla at volutpat diam.<p></p>

Diam sit amet nisl suscipit adipiscing bibendum est. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Eleifend donec pretium vulputate sapien nec sagittis. Nec feugiat nisl pretium fusce id velit. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Non arcu risus quis varius quam. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Amet commodo nulla facilisi nullam vehicula. Nec ullamcorper sit amet risus nullam. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Sed enim ut sem viverra aliquet eget sit amet. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Malesuada bibendum arcu vitae elementum curabitur. Blandit libero volutpat sed cras ornare arcu. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sit amet nulla facilisi morbi. Massa sed elementum tempus egestas sed sed risus.
</div>
</div> </div></div>[/html]

Поделиться92023-10-23 20:35:13

Автор: renesmee

[html]<div class="postcolor"><div style="padding:25px 5px 10px 5px;"> <link href="https://fonts.googleapis.com/css?family=Gupter|Ibarra+Real+Nova|Noto+Serif|Yeseva+One&display=swap" rel="stylesheet">
<style>

.holidays {
background: #1b2235;
position: relative;
padding: 50px;
width: 550px;
margin: 20px auto;
box-shadow: 2px 2px 4px #ccc;
border-bottom: 20px solid #1b2235;
}

.h-titlebox {
position: relative;
padding: 30px;
background: rgba(255,255,255,0.2);
border: 1px solid #eee;
font-family: yeseva one;
text-transform: uppercase;
text-align: center;
color: #fff;
z-index: 1;
line-height: 140%;
}

.h-titlebox i {
display: block;
font-family: ibarra real novo;
font-size: 10px;
font-style: italic;
text-transform: lowercase;
letter-spacing: 3px;
}

.h-titlebox span {
font-size: 30px;
letter-spacing: 5px;
display: block;
margin-top: 5px;
}

.h-within {
background: #eee;
padding: 50px;
margin: -50px;
margin-top: 80px;
font-family: noto serif;
font-size: 11px;
text-align: justify;
line-height: 160%;
color: #4d3535;
}

.h-piccontain{
position: relative;
width: 250px;
height: 300px;
object-fit: cover;
border: 5px solid #fff;
margin-top: -100px;
float: right;
margin-left:15px;
margin-bottom: 10px;
box-shadow: -1px 1px 4px #27351B;
}

.h-piccontain:after {
height: 300px;
width: 250px;
content:"";
position: absolute;
background: #780000;
left: 0px;
top: 0px;
mix-blend-mode: hue;
opacity: 0.8
}

.h-pic {
height: 300px;
width: 250px;
object-fit: cover;
filter: grayscale(50%) contrast(70%);
}

.h-tagline {
float: right;
padding: 5px;
background: #8c6261;
font-size: 10px;
color: #fff;
padding-right: 70px;
font-family: yeseva one;
text-transform: uppercase;
margin-right: -50px;
letter-spacing: 2px;
border: 2px solid #fff;
border-right: none;
}

.h-within::first-letter {
font-size: 50px;
font-family: yeseva one;
float: left;
margin: 15px;
color: #532424;
}

</style>
<div class="holidays">
<div class="h-titlebox">Сказание о феях и ведьмах<i>(aut. Clementine and Farah Dowling)</i> <span>A Tale of Magic </span></div>
<div class="h-within">

<div class="h-piccontain"><img src="https://64.media.tumblr.com/507c2d4595dade270c9b24c2d124f022/tumblr_pfdgj5nI2k1u02rwko1_640.gif" class="h-pic"></div>

<i> Об авторе: Клементина – одна из первых фей Магикса. Дочь Аркадии – первой феи, которая смогла подчинить магию. Рукописи первой феи передавались из поколения в поколение, а рассказывается в них история создания фей, появления ведьм и магического мира в целом. Рассказы Клементины дополнены археологическими находками, научными исследованиями в области Истории магического мира.</i><p></p>

<b>ОКОЛО 4,567 МЛРД ЛЕТ НАЗАД</b><p></p>

Великий дракон, образованный самой сильной магией, создал измерение Магикс. Измерение состоит из сотни волшебных планет, которые отличаются друг от друга специализацией. Магия дракона попала в отдаленные, темные уголки вселенной, породив тьму. Постепенно зарождались различные магические существа, а также ведьмы, маги, феи, паладины. Они прошли путь от низших существ к самым могущественным в измерении.<p></p>

<b>ОКОЛО СЕР. 4 ТЫС. ДО Н. Э.</b><p></p>

Самой первой феей, которая смогла полностью освоить и подчинить свои силы - Аркадия. Самыми первыми ведьмами, которые достигли могущества Лилис, Белладонна и Тхарма. Доподлинно они не являются первыми ведьмами и феей, но в исторических заметках это право закреплено за ними. В эти годы известно о первой войне между феями и ведьмами в Магиксе. Локальные войны происходили и на других планетах.<p></p>

<b>ОКОЛО СЕР. 1 ТЫС. ДО Н. Э.</b><p></p>

Первая магическая война, породившая отток ведьм на Землю. Благодаря заселению ведьм на территории Европы и Средиземноморья образовывается Римская Империя. В управлении – известные ведьмы Магикса, которые способствуют расцвету империи, тем не менее магия в Риме порицается, а неугодные режиму – репрессируются. Многие ведьмы через некоторое время иммигрируют обратно в Магикс.<p></p>

<b>РАСЦВЕТ МАГИЧЕСКОГО МИРА (0 век н.э.)</b><p></p>

Ведьмы и феи подписывают мирный договор «Тысячелетия», который способствовал совместному развитию культуры, изучения магии, совместной борьбе с монстрами и существами, разрушающими магическую систему. Договор был нарушен обоими сторонами в ходе использования магической силы. С VI века нашей эры начинаются темные времена.<p></p>

<b>СПАД РАСЦВЕТА МАГИЧЕСКОГО МИРА (VI век – XV век)</b><p></p>

Приходится на VI век нашей эры, когда магический мир захватывает неизвестная болезнь. Почти три сотни лет лучшие феи, паладины и ведьмы пытаются найти лекарство, но безуспешно. Говорят, что болезнь принесли ведьмы с планеты Земля и лекарство находится именно на планете без магии. Она отступает также неожиданно, как и пришла. Признаки болезни: высокая температура, волдыри по всему телу.
В XI веке ведьмы открывают путешествие между планетами. С помощью волшебного камня «араган», начинается массовое освоение различных планет. Открывается Солярия, Линфея, Андрос, Зенит и другие планеты. Время колонизация планет, основание первых королевских династий. На планетах появляются специализации: так, на Солярии рождаются феи со способностями черпать энергию из света и Солнца, на Андросе рождается больше всего фей воды, а на Линфеи – земли. Это связано с природной предрасположенностью самой планеты. Способности помогают выживать на территории. В 1021 году отрыли первую школу для фей – Алфея.<p></p>

В XIII – XV веках – раздел интересов монархий и борьба за магические колонии приводят к войнам между планетами. В это время активизируются магические притязания ведьм и фей по поводу методов борьбы. Радикализм ведьм проигрывает, начинается охота на ведьм. Многие ведьмы покидают Магикс и перебираются на землю, где повторяют свою судьбу в трагически известной земной охоте на ведьм. Многие ведьмы, которые иммигрировали на землю погибли, а другие предпочли не возвращаться в Магикс, где шла куда более сильная война.<p></p>

<b>РАСЦВЕТ КУЛЬТУРЫ И ПЛАНЕТ (XV-XIX век)</b><p></p>

Вековая нетерпимость ведьм и фей закончена новым тысячелетним пактом. Ведьм на территории многих планет истребили и для того, чтобы выжить им приходится забыть о своих конфликтах. В Магиксе им выделяют отдельную коммуну, где построили город Астер Делл рядом с древним замков ведьм-прародительниц. В замке Лилис, Белладонна и Тхарма собирали темные знания со всех миров в большую библиотеку, прежде, чем первые феи объединились против ведьм и лишили их телесных оболочек.<p></p>
Долгие годы замок в Астер Делл отпугивал фей негативной энергией и существами, что водились на его территории, однако со временем там поселилась группа исследователей темной магии. Они видели образы прародительниц и даже разговаривали с ними, а полученные темные знания использовали для воспитания нового поколения более сильных ведьм. Они проводили ритуалы, варили зелья, ежегодно собирались в Вальпургиеву ночь, где славили ведьм-прародительниц.<p></p>
Между тем, планеты воевали лишь локально. Многие ранее колонизированные планеты обретали свободу и своих правителей. Произошло реформирование системы монархии и бывшие колонии, как, к примеру, Зенит могли избирать своего независимого президента на определенный срок.
Женщины-феи обретали права и избавлялись от патриархата, на Солярии впервые королевой стала женщина.<p></p>

<b>ПАДЕНИЕ ВЕДЬМ И НОВОЕ ВРЕМЯ (XX-XXI век)</b><p></p>

В начале XX ведьмы стали искать способ увеличить свои силы, поэтому обратились к первоисточнику – огню дракона. Три древние ведьмы подарили народу Астер Делла Валтора созданного из искры дракона. Ведьмы вырастили его, с его помощью собирали магию со всего магического измерения, а также провозгласили Валтора своим правителем. Он создавал ужасных созданий, чтобы держать в страхе магическое измерение. Благодаря его вмешательству на солнечной Солярии шел дождь, а Линфея заросла ядовитыми растениями. Между тем, магические измерения предпочитали отдавать свои знания, а не бороться с Валтором, пока наиболее сильные феи планет не создали команду Света для борьбы с Валтором.
<p></p>2004 год - последней планетой мага и могилой его стараний стало Домино. Его противниками стала команда света, которая объединилась и заточила мага в измерении Омега. Однако, сама планета превратилась в холодное царство, король и королева исчезли, наследница трона Домино была проклята магами и стала одной из нимф, а младшую дочь и хранительницу огня дракона направили на Землю.
Наиболее важные события века:<p></p>
1910 год – планета Зенит открывает иллюминацию – использование одного источника магии для распространения магии на всей планеты. Открытие сердца планеты, от которого питаются все магические приспособления на планете без вмешательства феи. На Зените начинается век развития технологий.<p></p>
<p></p>1914-1918 год – Первая Мировая война на земле. Для ведьм делают безопасный коридор эвакуации обратно в измерение.
<p></p>1939-1945 год – фей, ведьмы и маги становятся свидетелями Второй Мировой войны на Земле. Для ведьм Земли делают безопасный коридор эвакуации в измерение. Некоторые ведьмы переселяются в Магикс, а другая половина остается на Земле.
<p></p>1970-1971 год – На Мелодии открывают новый вид музыки – электронная музыка.
<p></p>1980 год – активные нападения Валтора на планеты измерения. Крупное землетрясение в Линфеи, которое возникло в ходе магических электронных толчков. Оно унесло жизни 2000 фей. С этого дня в Линфее запретили любое использование электронных гаджетов, а нарушение этого закона полагалось долгое тюремное заключение.
<p></p>1991 год – стирание гендерных границ в образовательных учреждениях. Закрывается дополнительный корпус Алфеи для мужчин, а Красный фонтан начинает принимать женщин на обучение. В Красном фонтане открывают дополнительный курс для фей, которые хотят после обучения в школе для фей освоить курс школы, такой же курс открывают и в Алфее.
<p></p>1995 год – Зафиксирован еще один магический долгожитель. Ведьма Офелия прожила на этом свете 187 лет, обогнав 186-летнюю покойную фею Исидору. Офелия выглядит на все 60 лет и прекрасно помнит события 150-летней давности.
<p></p>1998 год – На Андросе открывается портал в измерение Омега. Два десятка опасных преступников покинули планету, их местонахождение до сих пор неизвестно. Портал закрыли спустя два дня силами команды Света.
<p></p>2004 год – уничтожение Домино и Астер Делла. Команда света, образованная в 1998 году для борьбы с преступностью. Валтора в специальной капсуле отправляют в измерение Омега.
<p></p>2016 год – 995-летний юбилей с момента открытия школы для фей – Алфеи.<p></p>

</div>
</div> </div></div>[/html]

Поделиться102023-10-23 20:40:09

Автор: renesmee

Код:

<!--HTML--><div class="prost">
<style>
.lt {    width: 455px;    height: 250px;    overflow-y: auto;    margin-left: 10px;    margin-top: 35px;    padding-right: 10px;}
.n {    font-family: bebasneueregular;    font-size: 18px;    padding-right: 9px;    text-transform: lowercase;margin-top: 24px;    color: #5b4971;    text-shadow: 0 0 3px #ffffff;    margin-left: 10px;}
.p {    background-image: url(https://forumupload.ru/uploads/001b/37/db/6/673971.png);    width: 69px;    height: 62px;    display: inline-block;    text-align: center;    background-repeat: no-repeat;}
.p0 {    background-image: url(https://forumupload.ru/uploads/001b/37/db/6/673971.png);    width: 69px;    height: 62px;    background-repeat: no-repeat;    display: inline-block;    text-align: center;    filter: grayscale(100%);    opacity: 0.2;}
</style>
<zag>лотерея</zag>
<center><text>Дабы подсластить для вас пилюлю ожидания чистовика, мы устроили небольшую развлекательную лотерею. Для того, чтобы принять в ней участие, необходимо зарегистрироваться на форуме и выбрать понравившийся лот. Один лот - в руки одному игроку. И пусть удача всегда будет... Ой, не так. Forward! The magic's in you!
</text>
<div class="lt">


<div class="p"><div class="n">01</div></div>  
<div class="p"><div class="n">02</div></div>  
<div class="p"><div class="n">03</div></div>  
<div class="p"><div class="n">04</div></div> 
<div class="p"><div class="n">05</div></div><br>

<div class="p"><div class="n">06</div></div>  
<div class="p"><div class="n">07</div></div>  
<div class="p"><div class="n">08</div></div>  
<div class="p"><div class="n">09</div></div>  
<div class="p"><div class="n">10</div></div><br>

<div class="p"><div class="n">11</div></div>  
<div class="p"><div class="n">12</div></div>  
<div class="p"><div class="n">13</div></div>  
<div class="p"><div class="n">14</div></div>  
<div class="p"><div class="n">15</div></div><br>

<div class="p"><div class="n">16</div></div>  
<div class="p"><div class="n">17</div></div>  
<div class="p"><div class="n">18</div></div>  
<div class="p"><div class="n">19</div></div>  
<div class="p"><div class="n">20</div></div><br>  

</div>

</div>

Поделиться112023-11-09 20:45:23

Автор: renesmee

[html]<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--shclr: #9fb1c3;
--shbg: rgba(255, 255, 255, 0.17);
}
#ship6 {
position: relative;
display: flex;
box-sizing: border-box;
padding: 8px 0 0 0;
max-width: 700px;/* ограничиваем ширину блока*/
flex-wrap: wrap;
flex-direction: row;
}

#ship6 .sh1 {margin: 18px auto 0px auto !important; padding:0px !important; display:grid; grid-template-columns: auto auto; align-items: start;}
#ship6 .sh1:nth-child(1) {margin-top: 0px !important;}

.content-item-2 sh2 {
display: flex;
flex-direction: row-reverse;
}

#ship6 sh2 {display:flex; grid-template-columns: min-content auto;}

#ship6 sh2 {order:1; min-width:250px; min-height:100px;}
/* блок текста */
#ship6 sh3 {order:2; box-sizing:border-box; text-align:justify; border: 1px solid var(--shclr); background:var(--shbg); padding:14px;
line-height: 120%;
font-size: 11px;
min-height:64px;
min-width:200px;
}
/* аватар */
#ship6 ava {order:1; display:block; background-color:var(--shclr); border: 1px solid var(--shclr); outline: 4px solid var(--shclr); background-position:50% 50%; background-size:cover;
outline-offset:5px;
margin:6px;
width: 200px;
height: 111px;
}
/* никнейм */
#ship6 ava2 {order:2; padding: 10px; box-sizing:border-box; min-width:90px; max-width:180px; font-size:10px;}
#ship6 ava2 em {display:block; position:relative; border-bottom: 1px solid var(--shclr); margin: 0px -10px 5px -10px; padding: 0 10px 5px 10px; font-style:normal !important; font-weight: 600;
font-size: 16px;
text-transform: uppercase;
font-family: 'Roboto Condensed', Tahoma, sans-serif;
}
#ship6 ava2 em:after {display:block; content:""; border-radius:50%; width:6px; height:6px; position: absolute; margin: 3px -3px auto auto !important; right: 0px;} /* shipovnik */
#ship6 .sh1:nth-child(2n) sh3 {order:-1;}
#ship6 .sh1:nth-child(2n) ava2 {order:-1; text-align:right;}
#ship6 .sh1:nth-child(2n) ava2 em:after {margin: 3px auto auto -3px !important; left: 0px;}
#ship6 .sh1:nth-child(2n) sh2 {grid-template-columns: auto min-content;}

.content-item, .content-item-2 {
margin: 10px 25px;
max-width: 300px;
}

.content-item p {
text-align: justify;
}

.content-item-2 p {
text-align: justify;
}

</style>
<div id="ship6">
<div class="content-item">


<div class="sh1">
<sh2>
<ava style="background-image:url(https://forumupload.ru/uploads/001b/37/db/2/797165.png);"></ava>
<ava2>
<em><a href="#">Айси</a></em>
Jenny Boyd, ведьма воды [льда]
</ava2>
</sh2>
</div>
<div class="text-content">
<p>
Холодный взгляд и белоснежный костюм. Она травит себя мятными сигаретами и постоянными мыслями о собственном величии. Ей бы быть принцессой холодной, как ее сердце планеты, но она мечтает о большем. Учится на выпускном курсе облачной башни и охотится на огонь дракона.
</p>
</div>
</div>

<div class="content-item-2">
<div class="sh1">
<sh2>
<ava2>
<em><a href="#">Дарси</a></em>
Liz Gillies, ведьма разума
</ava2>
<ava style="background-image:url(https://forumupload.ru/uploads/001b/37/db/2/553638.jpg);"></ava>
</sh2>
</div>
<div class="text-content">
<p>
Элегантные костюмы самых именитых модельеров земли. Дарси не скупится тратить денежные запасы своей матери, пока та отдавала всю себя чужим детям, девушка объявила неофициальный бойкот. И только Айси и Сторми разделяют ее безумные идеи.
</p>
</div>
</div>

<div>[/html]