Daniel3996

style.css

Dec 9th, 2023
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.62 KB | None | 0 0
  1. *{
  2. box-sizing: border-box;
  3. padding: 12px;
  4. width: auto;
  5. }
  6.  
  7. body span{
  8. position: fixed !important;
  9. }
  10. .sidenav {
  11. height: 100%;
  12. width: 0;
  13. position: fixed !important;
  14. z-index: 6;
  15. top: 0;
  16. left: 0;
  17. background-color: #111;
  18. overflow-x: hidden;
  19. overflow-y: hidden;
  20. transition: 0.5s;
  21. padding-top: 60px;
  22. padding-left: 0;
  23. padding-right: 0;
  24. }
  25.  
  26. .sidenav a {
  27. padding: 8px 8px 8px 32px;
  28. text-decoration: none;
  29. font-size: 25px;
  30. color: #818181;
  31. display: block;
  32. transition: 0.3s;
  33. }
  34.  
  35. .sidenav a:hover {
  36. color: #f1f1f1;
  37. }
  38.  
  39. .sidenav .closebtn {
  40. position: absolute;
  41. top: 0;
  42. right: 25px;
  43. font-size: 36px;
  44. margin-left: 50px;
  45. }
  46.  
  47. body
  48. {
  49. background-color: bisque;
  50. }
  51. header{
  52. display: flex;
  53. justify-content: space-between;
  54. align-items: center;
  55. font-family: 'Alkatra';
  56. font-size: 22px;
  57. background-color: rgb(219, 200, 200);
  58. }
  59.  
  60. header .logo{
  61. width: 20%;
  62. height: auto;
  63. padding-right: 10px;
  64. }
  65.  
  66. header .header-content{
  67. display: flex;
  68. flex-direction: column;
  69. align-items: flex-start;
  70. }
  71.  
  72. header .header-content h1, header .header-content p{
  73. font-style: italic;
  74. color: rgb(129, 79, 79);
  75. padding-right: 192px;
  76. }
  77.  
  78. header .header-content h1{
  79. padding-top: .01em;
  80. }
  81.  
  82. body h2{
  83. font-family: 'Alkatra','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  84. font-style: italic;
  85. font-size: 40px;
  86. }
  87. body p{
  88. font-family: 'Alkatra','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  89. font-style: italic;
  90. font-size: 20px;
  91. }
  92. main {
  93. display: flex;
  94. flex-direction: row;
  95. }
  96. main .item-details{
  97. font-style:oblique;
  98. text-align: center;
  99. color: rgb(138, 23, 23);
  100. border: 2px solid white;
  101. }
  102. .item-details h3{
  103. font-size: 25px;
  104. }
  105. main ul.scroll-container {
  106. list-style: none;
  107. background-color: #d1a5a5;
  108. overflow-x: auto;
  109. display: flex;
  110. padding: 30px;
  111. max-width: 100%;
  112. border: 12px solid white;
  113. }
  114.  
  115. main ul.scroll-container li {
  116. flex-grow: 1;
  117. }
  118.  
  119. main ul.scroll-container li img {
  120. padding: 5px;
  121. max-width: 300px;
  122. }
  123.  
  124. footer {
  125. background-color: #e0f5bd;
  126. padding: 20px;
  127. text-align: left;
  128. }
  129.  
  130. h3 {
  131. font-size: 24px;
  132. margin-bottom: 10px;
  133. }
  134.  
  135. p {
  136. font-size: 18px;
  137. margin-bottom: 10px;
  138. }
  139.  
  140. h5 {
  141. font-size: 16px;
  142. margin-bottom: 10px;
  143. }
  144.  
  145. b {
  146. font-weight: bold;
  147. }
  148.  
  149. footer p:last-child {
  150. margin-bottom: 0;
  151. }
  152.  
  153. .scroll-container {
  154. flex: 1;
  155. }
  156.  
  157. .scroll-buttons{
  158. position: absolute;
  159. display: flex;
  160. width: 50px;
  161. justify-content: space-between;
  162. gap: 1139px;
  163. left:45px;
  164. top: 180%;
  165. }
  166. .scroll-buttons button{
  167. padding: 26%;
  168. background-color:bisque;
  169. width:60px;
  170. border-radius: 60%;
  171. border: 1px solid transparent;
  172. height:45px;
  173. justify-content: center;
  174. text-align: center;
  175. font-size: 100%;
  176. font-style: bold;
  177. }
  178. .telephone {
  179. position: fixed;
  180. bottom: 20px;
  181. left: 20px;
  182. z-index: 2;
  183. padding: 8px;
  184. border: 10px solid blue;
  185. border-radius: 30px;
  186.  
  187. background-color: blue;
  188. color: white;
  189. font-size: 12vp;
  190. text-decoration: none;
  191. max-width: 100%;
  192. height: auto;
  193. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  194.  
  195. }
  196. .Email {
  197. position: fixed;
  198. bottom: 20px;
  199. left: 120px;
  200. z-index: 3;
  201. padding: 8px;
  202. border: 10px solid rgb(255, 0, 0);
  203. background-color: rgb(255, 0, 0);
  204. border-radius: 30px;
  205. color: white;
  206. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  207. font-size: 12vp;
  208. text-decoration: none;
  209. max-width: 100%;
  210. height: auto;
  211. }
  212. .whatsapp {
  213. position: absolute;
  214. border: 6px solid green;
  215. max-width: 5%;
  216. height: 10%;
  217. border-radius: 6%;
  218. background-color: green;
  219. color: white;
  220. position: fixed;
  221. bottom: 20px;
  222. right: 20px;
  223. z-index: 5;
  224. padding: 8px;
  225. }
  226.  
  227. .whatsapp .fab {
  228. position: relative;
  229. font-size: 4em;
  230. top: -20px;
  231. left: -12px;
  232. }
  233. @media only screen and (max-width: 600px) {
  234. header {
  235. display: flex;
  236. flex-direction: column;
  237. align-items: center;
  238. font-family: 'Alkatra';
  239. background-color: rgb(219, 200, 200);
  240. }
  241.  
  242. header .logo {
  243. width: 50%;
  244. height: auto;
  245. padding-right: 10px;
  246. }
  247.  
  248. header .header-content {
  249. display: flex;
  250. flex-direction: column;
  251. align-items: center;
  252. text-align: center;
  253. }
  254.  
  255. header .header-content h1, header .header-content p {
  256. font-style: italic;
  257. color: rgb(129, 79, 79);
  258. padding: 0; /* Remove padding-right */
  259. }
  260.  
  261. header .header-content h1 {
  262. padding-top: .01em;
  263. }
  264. main {
  265. display: flex;
  266. flex-direction: row;
  267. }
  268. main .item-details{
  269. font-style:oblique;
  270. text-align: center;
  271. color: rgb(138, 23, 23);
  272. border: 2px solid white;
  273. padding: 0px;
  274. }
  275. .item-details h3{
  276. font-size: 15px;
  277. }
  278. .item-details p{
  279. font-size: 17px;
  280. }
  281. main ul.scroll-container {
  282. list-style: none;
  283. background-color: #d1a5a5;
  284. overflow-x: auto;
  285. display: flex;
  286. padding: 10px;
  287. max-width: 100%;
  288. height: auto;
  289. border: 10px solid white;
  290. }
  291.  
  292. main ul.scroll-container li {
  293. flex-grow: 1;
  294. }
  295.  
  296. main ul.scroll-container li img {
  297. padding: 5px;
  298. max-width: 200px;
  299. }
  300.  
  301. .scroll-buttons{
  302. position: absolute;
  303. display: flex;
  304. width: 50px;
  305. justify-content: space-between;
  306. gap: 240px;
  307. left:10px;
  308. top: 198%;
  309. }
  310. .scroll-buttons button{
  311. padding: 46%;
  312. background-color:bisque;
  313. width:60px;
  314. border-radius: 60%;
  315. border: 1px solid black;
  316. height:45px;
  317. justify-content: center;
  318. text-align: center;
  319. font-size: 100%;
  320. font-style: bold;
  321. }
  322.  
  323. .whatsapp {
  324. position: absolute;
  325. border: 6px solid green;
  326. max-width: 17%;
  327. height: 7.6%;
  328. border-radius: 6%;
  329. background-color: green;
  330. color: white;
  331. position: fixed;
  332. bottom: 20px;
  333. right: 20px;
  334. z-index: 5;
  335. padding: 8px;
  336. }
  337.  
  338. .whatsapp .fab {
  339. position: relative;
  340. font-size: 4em;
  341. top: -20px;
  342. left: -12px;
  343. }
  344. }
Advertisement
Add Comment
Please, Sign In to add comment