Проба пера

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Проба пера » welcome » html

html

Страница: 1
Ответить

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

1

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

ну типа хтмл.

0

2

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<style>@import url(https://forumstatic.ru/files/0016/01/4e/25137.css?v=15);</style>
<div id="instaprofile">
<div class="instaperson">
<div class="inner">
    <div class="instaface"><img src="https://forumupload.ru/uploads/001a/e1/7e/3/57685.png"></div>
    <div class="instabout">
    <div class="instaname">Damian Wayne</div>
    <div class="instabio">Люблю клинком, уважаю пинком!</div>
    </div>
</div>
</div>
<div class="instafollow">
<div class="instanick">@Batboy</div>
<div class="instafollowers"><span>followers </span>45,3k</div>
<div class="instafollowings"><span>followings </span>342</div>
</div>
<div class="instafeed">
<div>
    <div class="hover">
    <div class="likes">324</div>
    <div class="comms">31</div>
    </div>
    <img src="https://i.imgur.com/WZIugoL.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">424</div>
    <div class="comms">31</div>
    </div>
    <img src="https://i.imgur.com/e34K7iL.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">455</div>
    <div class="comms">45</div>
    </div>
    <img src="https://i.imgur.com/Yl3abws.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">342</div>
    <div class="comms">32</div>
    </div>
    <img src="https://i.imgur.com/N546bxc.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">324</div>
    <div class="comms">23</div>
    </div>
    <img src="https://i.imgur.com/A5kRPNS.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">765</div>
    <div class="comms">98</div>
    </div>
    <img src="https://i.imgur.com/UiwACeq.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">432</div>
    <div class="comms">19</div>
    </div>
    <img src="https://i.imgur.com/4mLPEVZ.jpg">
</div>
<div>
    <div class="hover">
    <div class="likes">654</div>
    <div class="comms">78</div>
    </div>
    <img src="https://i.imgur.com/EYdjpAu.png">
</div>
<div>
    <div class="hover">
    <div class="likes">341</div>
    <div class="comms">51</div>
    </div>
    <img src="https://i.imgur.com/483bNqU.jpg">
</div>
</div>
</div>[/html]

0

3

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<style>@import url(https://forumstatic.ru/files/0016/01/4e/25137.css?v=16);</style>
<div id="instapub">
<div class="instapost">
    <div class="instauthor">
    <div class="instaav"><img src="https://forumupload.ru/uploads/001a/e1/7e/3/57685.png"></div>
    <div class="instanick">@Batboy</div>
    </div>
    <div class="instaphoto" title="double click to edit"><img src="https://i.imgur.com/4mLPEVZ.jpg"></div>
</div>
<div class="instacts">
    <div class="tolike"><img src="https://forumstatic.ru/files/0016/01/4e/14201.svg"></div>
    <div class="tocomm"><img src="https://forumstatic.ru/files/0016/01/4e/53662.svg"></div>
</div>
<div class="instilikes">432</div>
<div class="instatags">
    <span class="instanick">Batboy</span>
    Hi! It's me and my best friend Jon. Jon is Superboy, but sometimes he prefers to be an idiot.
    <span class="instahash">#supersons #bestfriends #myfriendisidiot</span>
</div>
</div>[/html]

0

4

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<style>@import url(https://forumstatic.ru/files/0016/01/4e/28335.css?=v1);</style>
<div id="personal">
<div class="tabs">
    <div class="tab">
    <input type="radio" id="tab1" name="tab-group" checked>
    <label for="tab1" class="tab-title">Профиль</label>
    <section class="tab-content">
        <div class="socbuttons">
        <a class="fab fa-github" href=""></a>
        <a class="fas fa-paint-brush" href=""></a>
        <a class="fas fa-book" href=""></a>
        <a class="fas fa-camera" href=""></a>
        </div>
        <div class="dossier">
        <div class="name">Ji Chang-wook</div><!-- сюда пишем имя -->
        <div class="player">
            <div class="buttons">
            <i class="fas fa-backward"></i>
            <i class="fas fa-pause"></i>
            <i class="fas fa-forward"></i>
            </div>
            <div class="song">poets of the fall — carnival of rust</div><!-- тут песня -->
        </div>
        <div class="profile">
            <div class="photo"><img src="https://i.imgur.com/dFiO35Rm.jpg"></div><!-- фото персонажа -->
            <div class="data">
            <span>33 y.o.</span><!-- возраст -->
            <span>актёр, модель</span><!-- род деятельности -->
            <span>человек</span><!-- вид -->
            <span>make love, not war</span><!-- что-то своё -->
            <span>я знаю, что ничего не знаю</span><!-- что-то своё -->
            </div>
        </div>
        </div>
    </section>
    </div>
    <div class="tab">
    <input type="radio" id="tab2" name="tab-group">
    <label for="tab2" class="tab-title">Достижения</label>
    <section class="tab-content">
        <div class="achievements">
        <div class="inner">
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
            <div class="achieve">Достижение</div>
        </div>
        </div>
    </section>
    </div>
    <div class="tab">
    <input type="radio" id="tab3" name="tab-group">
    <label for="tab3" class="tab-title">Плашки</label>
    <section class="tab-content">
        <div class="planks">
        <div class="inner">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/71813.png">
        </div>
        </div>
    </section>
    </div>
    <div class="tab">
    <input type="radio" id="tab4" name="tab-group">
    <label for="tab4" class="tab-title">Фишки</label>
    <section class="tab-content">
        <div class="features">
        <div class="inner">
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
            <div class="feature">фишка</div>
        </div>
        </div>
    </section>
    </div>
    <div class="tab">
    <input type="radio" id="tab5" name="tab-group">
    <label for="tab5" class="tab-title">Подарки</label>
    <section class="tab-content">
        <div class="gifts">
        <div class="inner half up">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/76042.png">
        </div>
        <div class="inner half down">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
            <img src="https://forumstatic.ru/files/0016/01/4e/61660.png">
        </div>
        </div>
    </section>
    </div>
</div>
</div>[/html]

0

5

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<style>@import url(https://forumstatic.ru/files/0016/01/4e/25137.css?=v8);</style><!-- ссылка на стиль, не менять -->
<div id="instaprofile">
<div class="instaperson">
<div class="inner">
    <div class="instaface"><img src="https://i.imgur.com/dFiO35Rm.jpg"></div><!-- главное фото профиля -->
    <div class="instabout">
    <div class="instaname">Name Surname</div><!-- имя фамилия -->
    <div class="instabio">Make love, not war!</div><!-- цитата, слоган, мини-био -->
    </div>
</div>
</div>
<div class="instafollow">
<div class="instanick">@coolguy</div><!-- ник -->
<div class="instafollowers"><span>followers </span>89,7k</div><!-- подписчики -->
<div class="instafollowings"><span>followings </span>164</div><!-- подписки -->
</div>
<div class="instafeed">
<div><img src="https://i.mycdn.me/i?r=AzEPZsRbOZEKgBhR0XGMT1RkqRTdSHI5NFsnm2oWb2V196aKTM5SRkZCeTgDn6uOyic&fn=sqr_288"></div><!-- фото 1 -->
<div><img src="https://0.soompi.io/wp-content/uploads/2019/04/26185746/Ji-Chang-Wook-XPN-7.jpg"></div><!-- фото 2 -->
<div><img src="https://pbs.twimg.com/profile_images/1294929012154699776/mgsVcucy_400x400.jpg"></div><!-- фото 3 и т.д. -->
<div><img src="https://inkistyle.com/wp-content/uploads/2019/11/ji-chang-wook39s-outfit-at-incheon-airport-on-november-26-2019.jpg"></div>
<div><img src="https://apicms.thestar.com.my/uploads/images/2020/08/05/807270.jpg"></div>
<div><img src="https://www.unicef.org/lac/sites/unicef.org.lac/files/styles/hero_mobile/public/UN0237870_0.JPG?itok=MTaJJ1Kv"></div>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkd4gS-gPpKAVgaXs7-u36oEk6HcJJCTAW1A&usqp=CAU"></div>
<div><img src="https://asiapoisk.com/uploads/cache/people2/1486759292_BnrhYXfIcAAmD0M_zps3a3a44cb-465x600.jpg"></div>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQioNZIY5r3-IoWs6SxLjeVQceUMhT20qrVsQ&usqp=CAU"></div>
</div>
</div>[/html]

0

6

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<audio controls="controls"><source src="https://forumstatic.ru/files/001b/2e/4f/85504.mp3" type="audio/mp3">Ваш браузер не поддерживает тег audio</audio>[/html]

0

7

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html] <link rel="stylesheet" href="https://alexkolmar.github.io/vermishelkasmap/map.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<div class="map">
    <svg viewBox="0 0 1280 1031">
    <!--Маркеры на карте-->
    <a class="area" onclick="document.getElementById('location1'); return false;" title="локация 1">
        <circle class="place" r="35" cx="594" cy="610">
    </a>

    <a class="area" onclick="document.getElementById('location2'); return false;" title="локация 2">
        <circle class="place" r="35" cx="873" cy="641">
    </a>

    <a class="area" onclick="document.getElementById('location3'); return false;" title="локация 2">
        <circle class="place" r="35" cx="254" cy="789">
    </a>

    <a class="area" onclick="document.getElementById('location4'); return false;" title="локация 2">
        <circle class="place" r="35" cx="717" cy="859">
    </a>

    <a class="area" onclick="document.getElementById('location5'); return false;" title="локация 2">
        <circle class="place" r="35" cx="1044" cy="828">
    </a>

    <a class="area" onclick="document.getElementById('location6'); return false;" title="локация 1">
        <circle class="place" r="35" cx="1167" cy="612">
    </a>

    <a class="area" onclick="document.getElementById('location7'); return false;" title="локация 2">
        <circle class="place" r="35" cx="1077" cy="512">
    </a>

    <a class="area" onclick="document.getElementById('location8'); return false;" title="локация 2">
        <circle class="place" r="35" cx="815" cy="332">
    </a>

    <a class="area" onclick="document.getElementById('location9'); return false;" title="локация 2">
        <circle class="place" r="35" cx="397" cy="459">
    </a>

    <a class="area" onclick="document.getElementById('location10'); return false;" title="локация 2">
        <circle class="place" r="35" cx="204" cy="455">
    </a>

    <a class="area" onclick="document.getElementById('location11'); return false;" title="локация 1">
        <circle class="place" r="35" cx="374" cy="232">
    </a>

    <a class="area" onclick="document.getElementById('location12'); return false;" title="локация 2">
        <circle class="place" r="35" cx="106" cy="131">
    </a>

    <a class="area" onclick="document.getElementById('location13'); return false;" title="локация 2">
        <circle class="place" r="35" cx="570" cy="144">
    </a>

    <a class="area" onclick="document.getElementById('location14'); return false;" title="локация 2">
        <circle class="place" r="35" cx="775" cy="146">
    </a>

    <a class="area" onclick="document.getElementById('location15'); return false;" title="локация 2">
        <circle class="place" r="35" cx="1140" cy="107">
    </a>

    <a class="area" onclick="document.getElementById('location16'); return false;" title="локация 2">
        <circle class="place" r="35" cx="1100" cy="281">
    </a>

    <a class="area" onclick="document.getElementById('location17'); return false;" title="локация 2">
        <circle class="place" r="35" cx="1086" cy="964">
    </a>

    </svg>

    <!--Блоки описаний локаций-->
    <div id="location1" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия. Противоположная точка зрения подразумевает, что интерактивные прототипы, вне зависимости от их уровня, должны быть описаны максимально подробно. С другой стороны, консультация с широким активом напрямую зависит от приоретизации разума над эмоциями.</p>
        </div>
    </div>
    </div>

    <div id="location2" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия. Противоположная точка зрения подразумевает, что интерактивные прототипы, вне зависимости от их уровня, должны быть описаны максимально подробно. С другой стороны, консультация с широким активом напрямую зависит от приоретизации разума над эмоциями.</p>
        </div>
    </div>
    </div>

    <div id="location3" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия. Противоположная точка зрения подразумевает, что интерактивные прототипы, вне зависимости от их уровня, должны быть описаны максимально подробно. С другой стороны, консультация с широким активом напрямую зависит от приоретизации разума над эмоциями.</p>
        </div>
    </div>
    </div>

    <div id="location4" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия. Противоположная точка зрения подразумевает, что интерактивные прототипы, вне зависимости от их уровня, должны быть описаны максимально подробно. С другой стороны, консультация с широким активом напрямую зависит от приоретизации разума над эмоциями.</p>
        </div>
    </div>
    </div>

    <div id="location5" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия. Противоположная точка зрения подразумевает, что интерактивные прототипы, вне зависимости от их уровня, должны быть описаны максимально подробно. С другой стороны, консультация с широким активом напрямую зависит от приоретизации разума над эмоциями.</p>
        </div>
    </div>
    </div>

    <div id="location6" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location7" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location8" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location9" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location10" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location11" class="description right_d">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location12" class="description right_d">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location13" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location14" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location15" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location16" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <div id="location17" class="description">
    <div class="name"><h2>Очень длинное название</h2> <a class="close" title="закрыть">X</a></div>
    <div class="locs">
        <img src="https://free4kwallpapers.com/uploads/originals/2019/07/22/wide-minimalistic-landscape-wallpaper.jpg">
        <div class="inner">
        <p>Описание локации <a href="" target="_blank" title="пример ссылки в описании для наглядности">ссылка в описании</a>. Современные технологии достигли такого уровня, что современная методология разработки предоставляет широкие возможности для форм воздействия.</p>
        </div>
    </div>
    </div>

    <!--Конец блока описаний локаций-->

    <img src="https://alexkolmar.github.io/vermishelkasmap/map.jpg" alt="">
</div>

<!--[if lt IE 9]>
<script src="libs/html5shiv/es5-shim.min.js"></script>
<script src="libs/html5shiv/html5shiv.min.js"></script>
<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="libs/respond/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$('.area').click(function(){$('.description').eq($(this).index()).fadeIn(600).siblings('.description').fadeOut(600)})</script>
<script>$(function() {
  $('path, circle, .close').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
  });
});</script>
<script>$(document).ready(function(){
$('.close').click(function() {
    $('.description').fadeOut(600);
  });
});
</script>[/html]

0

8

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<div id="guestbook">
<div class="leftside">
    <h2>Заголовок гостевая</h2>
    <div class="hotlinks">
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    </div>
    <div class="greetings">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maece</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maece</p>
</div>
</div>
</div>[/html]

0

9

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345
саня написал(а):

- Ссылка на файл макета:
  https://www.figma.com/file/Ea4bVGKZ2sJYxv3YE28lTE/crosXXXs?node-id=1:2&amp;t=c4RvLxV4Ah9hYEmw-1
- Основной цвет ссылок: 586181
- Цвет ссылок при наведении курсора: 3E4459
- Эффекты ссылок: изменение цвета при наведении и подчеркивание при нажатии
- Цвета текста и фона выделенного текста (selection): цвет обычного текста 141414, цвет выделенного текста DDDCE3, цвет фона выделенного текста 84868E
- Цвета бегунка и дорожки полосы прокрутки: 586181
- Наличие html-тем (да/нет), их количество[1]: нет
- Эффекты при наведении на ссылки/картинки в шапке: при наведении на шапку название кроссовера плавно сменяется плашкой с изображением с фрейма "main_hover шапки"
- Список необходимых скриптов:
  скрипты аватара гостю и по умолчанию  - Каталог скриптов и кодов
  скрипт быстрого копирования - Каталог скриптов и кодов
  пиар-ход - Каталог скриптов и кодов
  загрузчик изображения в форме ответа - Каталог скриптов и кодов
  замена "активен" и "не активен" на картинки - Каталог скриптов и кодов
  замена слов Уважение, Сообщений на короткие для установки полей в ряд - Каталог скриптов и кодов
  кликабельность ника в постах Гостя - Каталог скриптов и кодов
  репутация без обновления страницы - Каталог скриптов и кодов
  тег ХТМЛ - Каталог скриптов и кодов
  тег абзаца - Каталог скриптов и кодов
  убрать "пожаловаться" - Каталог скриптов и кодов
  подсчет постов - $Скрипты и верстка by Deff
  поиск постов - $Скрипты и верстка by Deff
  быстрая смена аккаунтов - $Скрипты и верстка by Deff
  обтекание изображения - Каталог скриптов и кодов
  обычная загрузка картинок - Каталог скриптов и кодов
  скрипт смены имиджа - https://urchoice.su/viewtopic.php?id=55508
  счетчик символов - Каталог скриптов и кодов
  замена двойных кавычек на елочку в постах: Каталог скриптов и кодов
  индикатор активности пользователя: Каталог скриптов и кодов
  иключение из "цитировать" подписи "отредактировано": Каталог скриптов и кодов
  разделение важных и простых тем: Каталог скриптов и кодов
  регулировка размера шрифта в постах: Каталог скриптов и кодов
  скрыть "отредактировано" из сообщений: Каталог скриптов и кодов
  восстановление последнего поста при утере: Каталог скриптов и кодов
  чекбокс "Выбрать все" при модерировании темы и форума - Каталог скриптов и кодов
- Нужна мобильная/адаптивная версия? (да/нет)[2]: да (но просто подогнать под размеры мобильной версии, примерно как на https://kakbicross.ru, без изысков и изменения структуры)
- Прочие пожелания:
1. шрифт: Gilroy в различных начертаниях. в google fonts он не обнаружился, архив со шрифтом уже прикладывали
2. у нас вроде как планируются плашки в профиль, но они пока не задизайнены. необходимо представить их дизайн сразу с макетом или мы сможем добавить их в процессе/после верстки?

0

10

  • Последний визит:
    2025-05-31 14:14:36
  • detective comics
  • Автор: Damian Wayne
  • Администратор
  • Damian Wayne
  • building me up again, breathing me back to life just to curse my name
  • люблю клинком,
    уважаю пинком
  • насмотрено: 12345
  • Уважение: +0
  • заработано: 12345

[html]<style>
    * {
    padding: 0;
    margin: 0;
    border: none;
    }

    body {background: lightsteelblue;}

    .inst {
  display: block;
  background: url(https://forumstatic.ru/files/0016/01/4e/61805.png) no-repeat top center, url(https://forumstatic.ru/files/001a/ee/09/96712.png) no-repeat bottom center #fff;
  width: 550px;
  min-height: 750px;
  margin: 0 auto;
  font: normal 16px/20px roboto, sans-serif;
  box-sizing: border-box;
  padding-bottom: 70px;
}

.inname {
  display: flex;
  width: 100%;
  height: 65px;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
  font-weight: 500;
}

.inprofile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  padding: 15px 25px;
}

.inphoto {
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #dedede;
  display: block;
  width: 116px;
  height: 116px;
  padding: 8px;
  box-sizing: border-box;
}

.inphoto img {
  border-radius: 50%;
  display: block;
  height: 100px;
  width: 100px;
  object-fit: cover;
  object-position: center;
}

.infollow {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  margin-left: 25px;
  font: normal 20px/24px roboto, sans-serif;
}

.infollow div {text-align: center;}
.infollow b {display: block;}

.ininfo {
  width: 100%;
  margin: 10px 0;
}

.ininfo span {font-weight: bold;}
.ininfo p {font-size: 14px;}

.inbuttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inbuttons div {
  width: 245px;
  height: 30px;
  font-size: 14px;
  background: #dedede;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inposts {
  background: url(https://forumstatic.ru/files/0016/01/4e/24883.png) no-repeat top center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 45px 25px 0;
  align-items: center;
  justify-content: space-between;
}

.inposts img {
  margin-bottom: 4px;
  display: block;
  width: 164px;
  height: 164px;
  object-fit: cover;
  object-position: top center;
}
</style>
</head>
<body>

<div class="inst">
<div class="inname">@batboy</div>
<div class="inprofile">
    <div class="inphoto"><img src="https://forumupload.ru/uploads/001a/e1/7e/3/57685.png"></div>
    <div class="infollow">
    <div><b>22</b>Публикации</div>
    <div><b>29</b>Подписчиков</div>
    <div><b>36</b>Подписки</div>
    </div>
    <div class="ininfo">
    <span>Damian Wayne</span>
    <p>???</p>
    </div>
    <div class="inbuttons">
    <div>Редактировать профиль</div>
    <div>Поделиться профилем</div>
    </div>
</div>
<div class="inposts">
    <img src="https://i.imgur.com/N546bxc.jpg">
    <img src="https://via.placeholder.com/164x164">
    <img src="https://via.placeholder.com/164x164">
    <img src="https://via.placeholder.com/164x164">
    <img src="https://via.placeholder.com/164x164">
    <img src="https://via.placeholder.com/164x164">
</div>
</div>[/html]

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


Вы здесь » Проба пера » welcome » html

Рейтинг форумов | Создать форум бесплатно