style.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. @font-face {
  2. font-family: "Anime Ace";
  3. src: url("./fonts/Anime Ace.ttf");
  4. }
  5. html{
  6. scroll-behavior: smooth;
  7. }
  8. *{
  9. font-family: "Anime Ace";
  10. }
  11. body{
  12. margin: 0;
  13. height: 9400px;
  14. background: linear-gradient(to top, black 30%, rgba(32, 116, 182, 1) 60%);
  15. color: white;
  16. }
  17. .container{
  18. margin: 0 auto;
  19. width: 1920px;
  20. }
  21. .line{
  22. margin-top: 100px;
  23. display: flex;
  24. justify-content: center;
  25. }
  26. /* START HEADER*/
  27. .header {
  28. display: flex;
  29. justify-content: space-between;
  30. align-items: center;
  31. margin-top: 50px;
  32. }
  33. .header-nav-list {
  34. display: flex;
  35. column-gap: 40px;
  36. }
  37. .header-nav-item {
  38. list-style: none;
  39. font-size: 36px;
  40. }
  41. .header-nav-item a:hover {
  42. color: #F4A434;
  43. transition: 0.3s;
  44. }
  45. .header-nav-item a{
  46. text-decoration: none;
  47. color: white;
  48. font-family: "Anime Ace";
  49. }
  50. .header-profile {
  51. display: flex;
  52. align-items: center;
  53. column-gap: 10px;
  54. }
  55. .header-profile a{
  56. text-decoration: none;
  57. color: #F4A434;
  58. font-size: 36px;
  59. }
  60. /* END HEADER*/
  61. /* START MAIN*/
  62. .main{
  63. margin-top: 100px ;
  64. background-image: url(image/main-gerl.png);
  65. background-repeat: no-repeat;
  66. background-size: cover;
  67. height: 1200px;
  68. width: 1960px;
  69. }
  70. .main-text{
  71. float: right;
  72. margin-top: 250px;
  73. margin-right: 150px;
  74. font-size: 45px;
  75. }
  76. /* END HEADER*/
  77. /* START ABOUT-ME*/
  78. .about-me h1{
  79. font-size: 55px;
  80. }
  81. .about-me-subtext {
  82. display: flex;
  83. align-items: center;
  84. column-gap: 30px;
  85. margin-top: 60px;
  86. }
  87. .about-me-subtext p{
  88. font-size: 40px;
  89. }
  90. /* END ABOU-ME*/
  91. /* START RATIMG*/
  92. .rating {
  93. margin-top: 100px;
  94. }
  95. .rating h1{
  96. font-size: 55px;
  97. }
  98. .rating-card-block {
  99. display: flex;
  100. justify-content: space-between;
  101. margin-top: 100px;
  102. }
  103. .rating-card-title {
  104. font-size: 24px;
  105. }
  106. .rating-card-subtext {
  107. margin-top: 0px;
  108. font-size: 22px;
  109. color: #899299;
  110. }
  111. /* END RATING*/
  112. /* START FRIEND*/
  113. .friend {
  114. margin-top: 100px;
  115. }
  116. .friend h1{
  117. font-size: 55px;
  118. }
  119. .friend-card-block {
  120. display: flex;
  121. justify-content: space-between;
  122. }
  123. .friend-card-one-piece {
  124. background-image: url(image/one-pice-gerl.png);
  125. background-repeat: no-repeat;
  126. background-size: cover;
  127. height: 1195px;
  128. width: 500px;
  129. }
  130. .friend-card-hanter{
  131. background-image: url(image/hanter-x-man.png);
  132. background-repeat: no-repeat;
  133. background-size: cover;
  134. height: 1195px;
  135. width: 500px;
  136. }
  137. .friend-card-fairy{
  138. background-image: url(image/fairy-taill-man.png);
  139. background-repeat: no-repeat;
  140. background-size: cover;
  141. height: 1195px;
  142. width: 500px;
  143. }
  144. .friend-card-title {
  145. font-size: 30px;
  146. margin-top: 800px;
  147. margin-left: 30px;
  148. }
  149. .friend-card-subtext {
  150. font-size: 30px;
  151. margin-left: 30px;
  152. color: #899299;
  153. }
  154. /* END FRIEND*/
  155. /* START MERCH*/
  156. .merch {
  157. margin-top: 100px;
  158. }
  159. .merch h1{
  160. font-size: 55px;
  161. }
  162. .card-block {
  163. display: flex;
  164. justify-content: space-between;
  165. }
  166. .card {
  167. margin-top: 90px;
  168. background-image: url(image/square.png);
  169. background-repeat: no-repeat;
  170. background-size: cover;
  171. height: 880px;
  172. width: 450px;
  173. display: flex;
  174. flex-direction: column;
  175. align-items: center;
  176. }
  177. .card img{
  178. margin-top: 30px;
  179. }
  180. .card-text{
  181. display: flex;
  182. flex-direction: column;
  183. align-items: center;
  184. }
  185. .card-text img{
  186. margin-top: 10px;
  187. margin-bottom: 10px;
  188. }
  189. .card-text span{
  190. margin: 0px;
  191. font-size: 18px;
  192. font-family: none;
  193. color: #F4A434;
  194. }
  195. .card-text p{
  196. margin: 0px;
  197. font-size: 20px;
  198. font-family: none;
  199. }
  200. .card-p-color{
  201. font-size: 13px;
  202. }
  203. .card button{
  204. margin-top: 20px;
  205. color: white;
  206. background-color: #F4A434;
  207. padding: 20px 20px;
  208. border-radius: 30px;
  209. border: solid 0px;
  210. transition: all 0.3s;
  211. cursor: pointer;
  212. }
  213. .card button:hover{
  214. background-color: #8a632c;
  215. }
  216. /* END MERCH*/
  217. /* STRAT contacts-and-servis*/
  218. .contacts-and-servis{
  219. display: flex;
  220. justify-content: space-between;
  221. margin-top: 100px;
  222. }
  223. .contacts h1{
  224. font-size: 55px;
  225. color: #F4A434;
  226. }
  227. .contacts p{
  228. font-size: 40px;
  229. }
  230. .contacts-info{
  231. margin-top: 70px;
  232. }
  233. .info{
  234. display: flex;
  235. align-items: center;
  236. gap: 50px;
  237. }
  238. .info img{
  239. width: 80px;
  240. height: 80px;
  241. }
  242. .servis{
  243. display: flex;
  244. flex-direction: column;
  245. align-items: center;
  246. }
  247. .servis h1{
  248. margin-left: -580px;
  249. font-size: 55px;
  250. color: #F4A434;
  251. }
  252. .servis-form{
  253. width: 750px;
  254. display: flex;
  255. flex-wrap: wrap;
  256. justify-content: space-between;
  257. }
  258. .servis-input{
  259. color: white;
  260. border: 1px solid white;
  261. background: transparent;
  262. font-family: none;
  263. font-size: 30px;
  264. margin-top: 40px;
  265. width: 300px;
  266. height: 10px;
  267. padding: 30px;
  268. }
  269. .servis-input-big{
  270. color: white;
  271. border: 1px solid white;
  272. background: transparent;
  273. font-family: none;
  274. font-size: 30px;
  275. margin-top: 40px;
  276. width: 750px;
  277. padding: 30px 30px 150px 30px;
  278. }
  279. .servis button{
  280. font-size: 30px;
  281. color: white;
  282. border: 1px solid white;
  283. background: transparent;
  284. padding: 20px 20px;
  285. margin-top: 40px;
  286. width: 400px;
  287. transition: all 0.3s;
  288. cursor: pointer;
  289. }
  290. .servis button:hover{
  291. background-color: #F4A434;
  292. }
  293. /* END contacts-and-servis*/
  294. /* START FOOTER*/
  295. .footer-bg{
  296. background: linear-gradient(black 20%, rgba(32, 116, 182, 1) );
  297. height: 600px;
  298. }
  299. .footer{
  300. padding-top: 300px;
  301. display: flex;
  302. justify-content: space-around;
  303. align-items: center;
  304. }
  305. .footer-navigation{
  306. display: flex;
  307. gap: 50px;
  308. }
  309. .footer-nav-list{
  310. display: flex;
  311. flex-direction: column;
  312. align-items: center;
  313. justify-content: center;
  314. }
  315. .footer-nav-item{
  316. list-style: none;
  317. }
  318. .footer-nav-item a{
  319. text-decoration: none;
  320. color: #F4A434;
  321. font-size: 50px;
  322. }
  323. .footer-nav-item a:hover {
  324. color: white;
  325. transition: 0.3s;
  326. }
  327. .social{
  328. display: flex;
  329. flex-direction: column;
  330. justify-content: center;
  331. align-items: center;
  332. }
  333. .social h1{
  334. font-size: 55px;
  335. color: #F4A434;
  336. }
  337. .social-image{
  338. display: flex;
  339. gap: 60px;
  340. }
  341. /* END FOOTER*/