kp11
/
Anime-friend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AnimeFriend</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-logo">
                <img src="image/header-logo.png" alt="">
            </div>
            <div class="header-navigation">
                <ul class="header-nav-list">
                    <li class="header-nav-item"><a href="#about-me">О нас</a></li>
                    <li class="header-nav-item"><a href="#rating">Рейтинг</a></li>
                    <li class="header-nav-item"><a href="#friend">Друзья</a></li>
                    <li class="header-nav-item"><a href="#merch">Мерч</a></li>
                    <li class="header-nav-item"><a href="#servis">Сервис</a></li>
                    <li class="header-nav-item"><a href="#contacts">Контакты</a></li>
                </ul>
            </div>
            <div class="header-profile">
                <a href="">Войти</a>
                <img src="image/profile.png" alt="">
            </div>
        </div>

        <div class="main">
            <div class="main-text">Привет, давай посмотрим<br>вместе аниме?</div>
        </div>

        <div class="line"><img src="image/line.png" alt=""></div>

        <div class="about-me">
            <h1>Почему тебе нужен аниме друг:</h1>
            <div class="about-me-subtext">
                <img src="image/volunteer.png" alt="">
                <p>С нами вы сможете хорошо провести время</p>
            </div>
            <div class="about-me-subtext">
                <img src="image/people.png" alt="">
                <p>Найти новых друзей по интересам</p>
            </div>
            <div class="about-me-subtext">
                <img src="image/support.png" alt="">
                <p>Вы можете рассказать все что угодно бзе риска быть осужденным</p>
            </div>
        </div>

        <div class="line"><img src="image/line.png" alt=""></div>

        <div class="rating">
            <h1>Лучшие аниме для совместного просмотра:</h1>
            <div class="rating-card-block">
                <div class="rating-card">
                    <img src="image/anime-one-piece.png" alt="" width="420px" height="650px">
                    <p class="rating-card-title">Ван Пис</p>
                    <p class="rating-card-subtext">ТВ Сериал<br>1997<br>Драма<br>Комедия</p>
                    <img src="image/stars.png" alt="">
                </div>
                <div class="rating-card">
                    <img src="image/anime-hanter.png" alt="" width="420px" height="650px">
                    <p class="rating-card-title">Хантер х Хантер</p>
                    <p class="rating-card-subtext">ТВ Сериал<br>1999<br>Приключения<br>Экшен</p>
                    <img src="image/stars.png" a lt="">
                </div>
                <div class="rating-card">
                    <img src="image/anime-you.png" alt="" width="420px" height="650px">
                    <p class="rating-card-title">Достучаться до тебя</p>
                    <p class="rating-card-subtext">ТВ Сериал<br>2009<br>Драма<br>Романтика</p>
                    <img src="image/stars.png" alt="">
                </div>
                <div class="rating-card">
                    <img src="image/anime-fairy.png" alt="" width="420px" height="650px">
                    <p class="rating-card-title">Фейри Тейл</p>
                    <p class="rating-card-subtext"> ТВ Сериал<br>2009<br>Комедия<br>Приключения</p>
                    <img src="image/stars.png" alt="">
                </div>
            </div>
        </div>

        <div class="line"><img src="image/line.png" alt=""></div>

        <div class="friend">
            <h1>Друзья</h1>
            <div class="friend-card-block">
                <div class="friend-card-one-piece">
                    <p class="friend-card-title">Юлия Куликова</p>
                    <p class="friend-card-subtext">27 лет<br>.....</p>
                </div>
                <div class="friend-card-hanter">
                    <p class="friend-card-title">Анатолий Варанюк</p>
                    <p class="friend-card-subtext">25 лет<br>.....</p>
                </div>
                <div class="friend-card-fairy">
                    <p class="friend-card-title">Николай Смирнов </p>
                    <p class="friend-card-subtext">23 лет<br>.....</p>
                </div>
            </div>
        </div>

        <div class="line"><img src="image/line.png" alt=""></div>

        <div class="merch">
            <h1>Мерч</h1>
            <div class="card-block">
                <div class="card">
                    <img src="image/T-shirt_hunter.png" alt="">
                    <div class="card-text">
                        <p><span>Мужское худи Oversize хлопок</span></p>
                        <p>Киллуа Золдик Хантер Hunter</p>
                        <p><span>Артикул:</span> 2832741</p>
                        <p>в наличии все размеры:</p>
                        <p><span>X, XS, M, L, XL, XXL</span></p>
                        <p>Цвет — черный</p>
                        <img src="image/colors-circles.png" alt="">
                        <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
                            хлопок</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/demon 1.png" alt="">
                    <div class="card-text">
                        <p><span>Мужское худи Oversize хлопок</span></p>
                        <p>Киллуа Золдик Хантер Hunter</p>
                        <p><span>Артикул:</span> 2832741</p>
                        <p>в наличии все размеры:</p>
                        <p><span>X, XS, M, L, XL, XXL</span></p>
                        <p>Цвет — черный</p>
                        <img src="image/colors-circles.png" alt="">
                        <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
                            хлопок</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/T-shirt_one-pice.png" alt="">
                    <div class="card-text">
                        <p><span>Мужское худи Oversize хлопок</span></p>
                        <p>Киллуа Золдик Хантер Hunter</p>
                        <p><span>Артикул:</span> 2832741</p>
                        <p>в наличии все размеры:</p>
                        <p><span>X, XS, M, L, XL, XXL</span></p>
                        <p>Цвет — черный</p>
                        <img src="image/colors-circles.png" alt="">
                        <p class="card-p-color">Состав: френч-терри — 70% хлопок, 30%<br> полиэстер. Мягкий теплый начес внутри —<br>100%
                            хлопок</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
            </div>

            <div class="card-block">
                <div class="card">
                    <img src="image/figure_nami.png" alt="">
                    <div class="card-text">
                        <p><span>Фигурка</span></p>
                        <p>Кошка воровка нами из аниме One-Piece</p>
                        <p><span>Артикул:</span> 28327543</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/figure_aice.png" alt="">
                    <div class="card-text">
                        <p><span>Фигурка</span></p>
                        <p>Огненый кулак Айс из аниме One-piece</p>
                        <p><span>Артикул:</span> 283345341</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/figure_michouk.png" alt="">
                    <div class="card-text">
                        <p><span>Фигурка</span></p>
                        <p>Соколиный глаз Михоук из аниме One Piece</p>
                        <p><span>Артикул:</span> 2823441</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
            </div>

            <div class="card-block">
                <div class="card">
                    <img src="image/cup-magik.png" alt="">
                    <div class="card-text">
                        <p><span>Бутылка спортивная</span></p>
                        <p>С изображением Саторо Годжо<br>из аниме Magic Battle</p>
                        <p><span>Артикул:</span> 28327543</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/cup-nezuko.png" alt="">
                    <div class="card-text">
                        <p><span>Бутылка спортивная</span></p>
                        <p>С изображением Незуко Комадо<br>из аниме Demon Slayer</p>
                        <p><span>Артикул:</span> 283345341</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
                <div class="card">
                    <img src="image/cup-inoske.png" alt="">
                    <div class="card-text">
                        <p><span>Бутылка спортивная</span></p>
                        <p>С изображением Иноске Хашибира<br>из аниме Demon Slayer</p>
                        <p><span>Артикул:</span> 282344133</p>
                        <p>Состав: ...</p>
                    </div>
                    <button>Добавить в корзину</button>
                </div>
            </div>
        </div>

        <div class="line"><img src="image/line.png" alt=""></div>

        <div class="contacts-and-servis">
            <div class="contacts">
                <h1>Контакты</h1>
                <p>Если у вас все еще есть<br>
                    какие-либо вопросы, вы<br>
                    можете связаться с нами...</p>
                <div class="contacts-info">
                    <div class="info">
                        <img src="image/phone.png" alt="">
                        <p>+ 7 977 777 99-99</p>
                    </div>
                    <div class="info">
                        <img src="image/mail.png" alt="">
                        <p>DjaaanSaaan@gmail.com</p>
                    </div>
                    <div class="info">
                        <img src="image/gps.png" alt="">
                        <p>Москва, Театральная 1</p>
                    </div>
                </div>
            </div>
            <div class="servis">
                <h1>Сервис</h1>
                <div class="servis-form">
                    <input type="text" placeholder="Имя" class="servis-input"></input>
                    <input type="text" placeholder="Фамилия" class="servis-input"></input>
                    <input type="text" placeholder="Телефон" class="servis-input"></input>
                    <input type="text" placeholder="Email" class="servis-input"></input>
                    <input type="text" placeholder="Сообщения" class="servis-input-big"></input>
                </div>
                <button>Отправить</button>
            </div>
        </div>
    </div>
    <div class="footer-bg">
        <div class="container">
            <div class="footer">
                <div class="footer-navigation">
                    <ul class="footer-nav-list">
                        <li class="footer-nav-item"><a href="#about-me">О нас</a></li>
                        <li class="footer-nav-item"><a href="#rating">Рейтинг</a></li>
                        <li class="footer-nav-item"><a href="#friend">Друзья</a></li>
                    </ul>
                    <ul class="footer-nav-list">
                        <li class="footer-nav-item"><a href="#merch">Мерч</a></li>
                        <li class="footer-nav-item"><a href="#servis">Сервис</a></li>
                        <li class="footer-nav-item"><a href="#contacts">Контакты</a></li>
                    </ul>
                </div>
                <div class="footer-logo">
                    <img src="image/big-logo.png" alt="">
                </div>
                <div class="social">
                    <h1>Контакты</h1>
                    <div class="social-image">
                        <img src="image/telegram.png" alt="">
                        <img src="image/vk.png" alt="">
                        <img src="image/whatsapp.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>