Senin, 26 September 2022

CSS

 

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4. margin:0px;
  5. padding: 0px;
  6. }
  7. *{
  8. box-sizing: border-box;
  9. font-family: myriad pro;
  10.  
  11. }
  12. a{
  13. text-decoration:none;
  14. }
  15. ul{
  16. list-style:none;
  17. }
  18. .main{
  19. width:100%;
  20. height: 100vh;
  21. background-image: url("../images/poduct%20bg.png");
  22. background-size:800px;
  23. background-position: center;
  24. position: relative;
  25. }
  26. .logo{
  27. position: absolute;
  28. left: 90px;
  29. top: 50px;
  30. }
  31. .logo a{
  32. font-family:poppins;
  33. font-weight: bold;
  34. color: #2f2e41;
  35. font-size:2rem;
  36. text-shadow: 2px 2px 30px rgba(0,0,0,0.2);
  37. letter-spacing: 1px;
  38. }
  39. .logo font{
  40. color:#7A72FF;
  41. }
  42. .side-box{
  43. position: fixed;
  44. right: 90px;
  45. top: 50px;
  46. width:170px;
  47. height: 45px;
  48. background-color: #FFFFFF;
  49. display: flex;
  50. justify-content:center;
  51. align-items: center;
  52. border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  53. box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
  54. box-sizing: border-box;
  55. z-index: 1;
  56. border:1px solid rgba(167, 158, 245, 0.1);
  57. }
  58. .search input{
  59. width: 90px;
  60. height: 20px;
  61. border: none;
  62. outline: none;
  63. background-color: transparent;
  64. color: #1F1F1F;
  65. font-family: calibri;
  66. font-size: 1rem;
  67. padding: 0px 10px;
  68. }
  69.  
  70. .search input::placeholder{
  71. color: #1D1D1D;
  72. font-weight:400;
  73. letter-spacing: 2px;
  74. font-size: 0.8rem;
  75. font-family: poppins;
  76. }
  77. .search i{
  78. margin: 0px auto;
  79. }
  80. .m-img{
  81. position:absolute;
  82. left:15%;
  83. top: 50%;
  84. transform: translate(-15%,-50%);
  85. }
  86. .m-img img{
  87. height:450px;
  88. }
  89. .m-text{
  90. position: absolute;
  91. top: 50%;
  92. left:90%;
  93. transform: translate(-90%,-50%);
  94. }
  95. .m-text h1,h2{
  96. font-family:Roboto;
  97. font-weight: bold;
  98. margin: 0px;
  99. line-height: 60px;
  100. font-size: 4rem;
  101. text-shadow: 2px 2px 10px rgba(0,0,0,0.08);
  102. letter-spacing: 3px;
  103. color:#3D3D4A;
  104. text-transform: uppercase;
  105. }.m-text h1{
  106. letter-spacing:28px;
  107. }
  108. .m-text h1 font,
  109. .m-text h2 font{
  110. color:#7A72FF;
  111. }
  112. .m-btn{
  113. width:150px;
  114. height: 40px;
  115. background-color: #2f2e41;
  116. box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
  117. display: flex;
  118. justify-content: center;
  119. align-items: center;
  120. border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  121. margin-top: 20px;
  122. color:#fff;
  123. font-family: calibri;
  124. font-weight: 600;
  125. letter-spacing: 0.5px;
  126. font-size: 1rem;
  127. }
  128. .m-btn:hover{
  129. color:#FFFFFF;
  130. background-color: #6e64ff;
  131. transition: all ease 0.5s;
  132. }
  133. .social a{
  134. display: flex;
  135. flex-direction: column;
  136. justify-content: center;
  137. align-items: center;
  138. padding: 20px 15px;
  139. }
  140. .social{
  141. position:fixed;
  142. left: 30px;
  143. top: 50%;
  144. transform: translateY(-50%);
  145. border-radius: 20px;
  146. background-color: #FFFFFF;
  147. box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
  148. padding: 5px 0px;
  149. z-index: 1;
  150. }
  151. .social a i{
  152. color:rgba(39,39,39,0.80);
  153. }
  154.  
  155. .social a:hover .fa-facebook-f{
  156. color: #3b5998;
  157. }
  158. .social a:hover .fa-twitter{
  159. color: #00acee ;
  160. }
  161. .social a:hover .fa-instagram{
  162. color: #3f729b ;
  163. }
  164. .social a:hover .fa-youtube{
  165.  
  166. color: #FF0000;}
  167.  
  168. .product{
  169. width: 85%;
  170. background-color: #FFFFFF;
  171. box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
  172. display: flex;
  173. margin:30px auto;
  174. flex-direction: column;
  175. align-items: center;
  176. padding:40px 20px;
  177. margin-top: -60px;
  178. position: relative;
  179. background-image: url("../images/poduct bg.png");
  180. background-size:1000px;
  181. background-position: center;
  182. border-radius: 10px;
  183.  
  184. }
  185.  
  186.  
  187. .p-heading{
  188. margin:20px;
  189. text-shadow: 2px 2px 10px rgba(0,0,0,0.05);
  190. }
  191. .p-heading h3{
  192. font-family: myriad pro;
  193. font-weight: 700;
  194. letter-spacing: 2px;
  195. text-align: center;
  196. font-size:2rem;
  197. color:#323543;
  198.  
  199. }
  200. .p-heading h3 font{
  201. color:#8c84f9;
  202. }
  203. .product-container{
  204. display: flex;
  205. justify-content: center;
  206. align-items: center;
  207. flex-wrap: wrap;
  208. margin: 10px 0px;
  209. width:100%;
  210. }
  211. .p-box{
  212. width:250px;
  213. height: 330px;
  214. display: flex;
  215. justify-content: center;
  216. align-items: center;
  217. flex-direction: column;
  218. border-radius: 4px;
  219. position: relative;
  220. margin: 10px 30px;
  221. }
  222. .p-box img{
  223. height:180px;
  224. }
  225. .p-box p{
  226. color:#4d4d4d70;
  227. font-family: myriad pro;
  228. font-size: 0.9rem;
  229. letter-spacing: 0.5;
  230. }
  231. .price{
  232. color:#2c2c2c;
  233. font-family: poppins;
  234. font-size: 1rem;;
  235. }
  236. .buy-btn{
  237. position: absolute;
  238. width:140px;
  239. height: 40px;
  240. display: flex;
  241. justify-content: center;
  242. align-items: center;
  243. font-family:calibri;
  244. left: 50%;
  245. bottom: -20px;
  246. transform: translateX(-50%);
  247. border-radius: 15% 15% 15% 15% / 50% 50% 50% 50%;
  248. background:linear-gradient(120deg,#6b60ec 20%,#a166f4);
  249. color:#FFFFFF;
  250. display: none;
  251. animation: fade 0.2s;
  252. }
  253. .p-box:hover .buy-btn{
  254. display: flex;
  255. }
  256. .p-box:hover{
  257. box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
  258. background-color:#FFFFFF;
  259. }
  260. .p-box:hover .price{
  261. color:#6b60ec;
  262. transition: all ease 0.2s;
  263. }
  264.  
  265. @keyframes fade{
  266. 0%{
  267. opacity: 0;
  268. }
  269. 100%{
  270. opacity: 1;
  271. }
  272. }
  273.  
  274. .our-brand{
  275. display: flex;
  276. width: 85%;
  277. margin:30px auto;
  278. justify-content: space-around;
  279. align-items: center;
  280. padding:30px;
  281. }
  282. .brand-text{
  283. width:40%;
  284. font-family:myriad pro;}
  285. .brand-img{
  286. height: 500px;
  287. width: 50%;
  288. box-sizing: border-box;
  289. }
  290. .brand-img img{
  291. width:100%;
  292. height: 100%;
  293. object-fit:contain;
  294. }
  295. .brand-text h3{
  296. color:#333333;
  297. font-weight: 700;
  298. font-size:3rem;
  299. margin:0px;
  300. }
  301. .brand-text h4{
  302. color: #333333;
  303. font-weight: 400;
  304. font-size:2rem;
  305. margin:0px;
  306. }
  307. .brand-text font{
  308. color:#8d83f9;
  309. }
  310. .brand-text p{
  311. font-size: 1rem;
  312. color:#bdbdbd;
  313. letter-spacing: 0.5px;
  314. }
  315. .subcribe-container{
  316. width:100%;
  317. height:250px;
  318. margin-bottom:30px;
  319. display: flex;
  320. flex-direction: column;
  321. justify-content: center;
  322. align-items: center;
  323. border-bottom: 2px solid rgba(0,0,0,0.03);
  324. }
  325. .subcribe-container h3{
  326. font-size: 2rem;
  327. color: rgb(56, 56, 56);
  328. }
  329. .subcribe-input{
  330. width:500px;
  331. background-color: #fff;
  332. border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
  333. height: 60px;
  334. display: flex;
  335. justify-content: center;
  336. align-items: center;
  337. padding:20px;
  338. box-shadow: 2px 5px 30px rgba(0,0,0,0.1);
  339. }
  340. .subcribe-input input{
  341. width:100%;
  342. height: 40px;
  343. border: none;
  344. outline: none;
  345. background-color: transparent;
  346. }
  347. .subcribe-btn{
  348. width:120px;
  349. height: 40px;
  350. background-color: #202020;
  351. border-radius: 20px;
  352. color: #fff;
  353. display: flex;
  354. justify-content: center;
  355. align-items: center;
  356. text-transform: uppercase;
  357. font-weight: bold;
  358. box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
  359. font-size: 1rem;
  360. }
  361. .subcribe-btn:hover{
  362. background-color:#6b60ec;
  363. transition: all ease 0.5s;
  364. }
  365. footer{
  366. display: flex;
  367. flex-direction: column;
  368. justify-content: center;
  369. align-items: center;
  370. padding: 40px;
  371. background-image: url("../images/poduct bg.png");
  372. background-size:400px;
  373. background-position: center;
  374. border-radius: 10px;
  375. }
  376. footer h3{
  377. font-size: 2.5rem;
  378. color: #202020;
  379. margin:0px;
  380. }
  381. .footer-menu{
  382. display: flex;
  383. box-shadow: 2px 5px 30px rgba(0,0,0,0.1);
  384. background-color: #fff;
  385. border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
  386. justify-content: center;
  387. align-items: center;
  388. padding:5px 40px;
  389. }
  390. .footer-menu li a{
  391. padding:5px 20px;
  392. margin: 10px;
  393. display: flex;
  394. color:#202020;
  395. }
  396. .footer-menu li a:hover{
  397. color:#6b60ec;
  398. }
  399. .copyright{
  400. color:#e7e7e7;
  401. background-color: #141414;
  402. display: flex;
  403. justify-content: center;
  404. align-items: center;
  405. padding: 15px;
  406. }
  407. @media(max-width:1230px){
  408. .m-img img{
  409. height: 350px;
  410. }
  411. .m-text h1,h2{
  412. font-size:3.5rem;
  413. }
  414. }
  415. @media(max-width:1045px){
  416. .main{
  417. background-size: 600px;
  418. }
  419. .m-img{
  420. display:none;
  421. }
  422. .m-text{
  423. left:50%;
  424. top:50%;
  425. transform: translate(-50%,-50%);
  426.  
  427. }
  428. .our-brand{
  429. flex-direction:column-reverse;
  430. }
  431. .brand-text,.brand-img{
  432. width:100%;
  433. }
  434. .brand-img{
  435. height:300px;
  436. margin:20px;
  437. }
  438. }
  439. @media(max-width:600px){
  440. .social{
  441. display: none;
  442. }
  443. .logo{
  444. left: 30px;
  445. top:30px;
  446. }
  447. .logo a{
  448. font-size: 1.4rem;;
  449. }
  450. .side-box{
  451. right:30px;
  452. top:30px;
  453. }
  454. .m-text{
  455. overflow-wrap: break-word;
  456. display: flex;
  457. flex-direction: column;
  458. margin:auto;
  459. }
  460. .m-text h1,h2{
  461. font-size: 2.5rem;
  462. line-height:40px;
  463. margin:0px 20px;
  464. letter-spacing: 10px;
  465. }
  466. .m-text h2{
  467. font-size: 1.2rem;
  468. }
  469. .m-btn{
  470. margin:0px 20px;
  471. }
  472. .product{
  473. width:88%;
  474. }
  475. .p-box{
  476. margin:20px 10px;
  477. padding:10px 20px;
  478. width:100%;
  479. text-align: center;
  480. }
  481. .subcribe-input{
  482. width:95%;
  483. }
  484. .subcribe-container h3{
  485. font-size:1.4rem;
  486. text-align: center;
  487. }
  488. .footer-menu{
  489. width:100%;
  490. margin:20px;
  491. flex-wrap: wrap;
  492. background-color:none;
  493. box-shadow: none;
  494. }
  495. .footer-menu li a{
  496. background-color:#fff;
  497. border-radius: 20px;
  498. box-shadow:2px 2px 30px rgba(0, 0, 0, 0.1) ;
  499. padding:10px 30px !important;
  500. }
  501. .copyright {
  502. text-align: center;
  503. }
  504.  
  505. }

Tidak ada komentar:

Posting Komentar