API tools faq
paste
Advertisement
greekish24

practice gram

greekish24
Feb 8th, 2022
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.34 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <style>
  3.  
  4. /*BEGIN OF INSTRAGRAM PROF*/
  5. :root {
  6. font-size: 10px;
  7. }
  8.  
  9. img {
  10. display: block;
  11. }
  12.  
  13. .container {
  14. max-width: 37rem;
  15. margin: 0 auto;
  16. padding:10px 10px 10px 10px;
  17.  
  18. }
  19.  
  20. .btn {
  21. display: inline-block;
  22. font-size:9px;
  23. line-height:10px;
  24. font-family:serif;
  25. padding:2px 2px;
  26. background: none;
  27. border: none;
  28. color: inherit;
  29. padding: 0;
  30. }
  31.  
  32. .btn:focus {
  33. outline: 2rem auto #4d90fe;
  34. }
  35.  
  36. .visually-hidden {
  37. position: absolute !important;
  38. height: 1px;
  39. width: 1px;
  40. overflow: hidden;
  41. clip: rect(1px, 1px, 1px, 1px);
  42. }
  43.  
  44. /* Profile Section */
  45.  
  46. .profile {
  47. padding: 10px 10px;
  48. }
  49.  
  50. .profile::after {
  51. content: "";
  52. display: block;
  53. clear: both;
  54. }
  55.  
  56. .profile-image {
  57. float: left;
  58. width: 300px;
  59. height: 150px;
  60. display: flex;
  61. justify-content: center;
  62. align-items: center;
  63. margin:2px 2px;
  64. }
  65.  
  66. .profile-image img {
  67. border-radius: 50%;
  68. }
  69.  
  70. .profile-user-settings,
  71. .profile-stats,
  72. .profile-bio {
  73. float: left;
  74. /*width: calc(66.666% - 1rem);*/
  75. }
  76.  
  77. .profile-user-settings {
  78. margin-top: 1.1rem;
  79. }
  80.  
  81. .profile-user-name {
  82. display: inline-block;
  83. font-size: 3.2rem;
  84. font-weight: 300;
  85. }
  86.  
  87. .profile-edit-btn {
  88. font-size: 12px;
  89. line-height:12px;
  90. border: 1px solid #000;
  91. border-radius: 3%;
  92. padding:3px;
  93. margin-left: 2px;
  94. }
  95.  
  96. .profile-settings-btn {
  97. font-size: 9px;
  98. line-height:11px;
  99. margin-left: 3px;
  100. }
  101.  
  102. .profile-stats {
  103. margin-top: 3px;
  104. }
  105.  
  106. .profile-stats li {
  107. display: inline-block;
  108. font-size: 9px;
  109. line-height: 11px;
  110. margin-right: 4rem;
  111. cursor: pointer;
  112. }
  113.  
  114. .profile-stats li:last-of-type {
  115. margin-right: 0;
  116. }
  117.  
  118. .profile-bio {
  119. font-size: 1rem;
  120. font-weight: 400;
  121. line-height: 1.5;
  122. margin-top: 1rem;
  123. }
  124.  
  125. .profile-real-name,
  126. .profile-stat-count,
  127. .profile-edit-btn {
  128. width:250px;
  129. font-weight: 600;
  130. }
  131.  
  132. /* Gallery Section */
  133.  
  134. .gallery {
  135. display: flex;
  136. flex-wrap: wrap;
  137. margin: -1rem -1rem;
  138. padding-bottom: 3rem;
  139. }
  140.  
  141. .gallery-item {
  142. position: relative;
  143. flex: 1 0 10rem;
  144. margin: 1rem;
  145. color: #fff;
  146. cursor: pointer;
  147. }
  148.  
  149. .gallery-item:hover .gallery-item-info,
  150. .gallery-item:focus .gallery-item-info {
  151. display: flex;
  152. justify-content: center;
  153. align-items: center;
  154. position: absolute;
  155. top: 0;
  156. width: 100%;
  157. height: 100%;
  158. background-color: rgba(0, 0, 0, 0.3);
  159. }
  160.  
  161. .gallery-item-info {
  162. display: none;
  163. }
  164.  
  165. .gallery-item-info li {
  166. display: inline-block;
  167. font-size: 1rem;
  168. font-weight: lighter;
  169. }
  170.  
  171. .gallery-item-likes {
  172. margin-right: 2.2rem;
  173. }
  174.  
  175. .gallery-item-type {
  176. position: absolute;
  177. top: 1rem;
  178. right: 1rem;
  179. font-size: 2.5rem;
  180. text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
  181. }
  182.  
  183. .fa-clone,
  184. .fa-comment {
  185. transform: rotateY(180deg);
  186. }
  187.  
  188. /*changes the image width and height*/
  189. .gallery-image {
  190. width: 120px;
  191. height: 120px;
  192. object-fit: cover;
  193. }
  194.  
  195. /* Media Query */
  196.  
  197. @media screen and (max-width: 30rem) {
  198. .profile {
  199. display: flex;
  200. flex-wrap: wrap;
  201. padding: .5rem 0;
  202. }
  203.  
  204. .profile::after {
  205. display: none;
  206. }
  207.  
  208. .profile-image,
  209. .profile-user-settings,
  210. .profile-bio,
  211. .profile-stats {
  212. float: none;
  213. width: auto;
  214. }
  215.  
  216. .profile-image img {
  217. width: 120px;
  218. height:120px;
  219. margin-left:-5px;
  220. }
  221.  
  222. .profile-user-settings {
  223. flex-basis: calc(100% - 5.7rem);
  224. display: flex;
  225. flex-wrap: wrap;
  226. margin-top: 1rem;
  227. }
  228.  
  229. .profile-user-name {
  230. font-size: 10px;
  231. line-height:9px;
  232. }
  233.  
  234. .profile-edit-btn {
  235. order: 1;
  236. padding: 0;
  237. text-align: center;
  238. margin-top: 1rem;
  239. }
  240.  
  241. .profile-edit-btn {
  242. margin-left: 0;
  243. }
  244.  
  245. .profile-bio {
  246. font-size: 9px;
  247. line-height:11px;
  248. margin-top:5px;
  249. }
  250.  
  251. .profile-edit-btn,
  252. .profile-bio,
  253. .profile-stats {
  254. flex-basis: 25%;
  255. }
  256.  
  257. .profile-stats {
  258. order: 1;
  259. margin-top:5px;
  260. }
  261.  
  262. .profile-stats ul {
  263. /* display: flex;*/
  264. width:135px;
  265. display:inline-block;
  266. float:left;
  267. text-align: center;
  268. padding: 2px 2px;
  269. border-top:1px solid #dadada;
  270. border-bottom:1px solid #dadada;
  271. }
  272.  
  273. .profile-stats li {
  274. font-size: 9px;
  275. line-height:11px;
  276. flex: 1;
  277. margin: 0;
  278. }
  279.  
  280. .profile-stat-count {
  281. display: inline-block;
  282. float:left
  283. font-family:serif;
  284. font-size:8px;
  285. line-height:8px;
  286. }
  287. }
  288.  
  289.  
  290.  
  291. @supports (display: grid) {
  292. .profile {
  293. display: grid;
  294. grid-template-columns: 1fr 1fr;
  295. grid-template-rows: repeat(5, auto);
  296. grid-column-gap:10px;
  297. align-items: center;
  298. }
  299.  
  300. .profile-image {
  301. grid-row: 1 / -1;
  302. }
  303.  
  304. .gallery {
  305. display: grid;
  306. grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  307. grid-gap:10px;
  308. }
  309.  
  310. .profile-image,
  311. .profile-user-settings,
  312. .profile-stats,
  313. .profile-bio,
  314. .gallery-item,
  315. .gallery {
  316. width: auto;
  317. margin: 0;
  318. }
  319.  
  320. @media (max-width: 30rem) {
  321. .profile {
  322. grid-template-columns: auto 1fr;
  323. grid-row-gap: 2px;
  324. }
  325.  
  326. .profile-image {
  327. grid-row: 1 / 1;
  328. }
  329.  
  330. .profile-user-settings {
  331. display: grid;
  332. grid-template-columns: auto 1fr;
  333. grid-gap: 1px;
  334. }
  335.  
  336. .profile-edit-btn,
  337. .profile-stats,
  338. .profile-bio {
  339. grid-column: 1 / -1;
  340. }
  341.  
  342. .profile-user-settings,
  343. .profile-edit-btn,
  344. .profile-settings-btn,
  345. .profile-bio,
  346. .profile-stats {
  347. margin: 10px;
  348. }
  349. }
  350.  
  351. }
  352.  
  353.  
  354. </style>
  355.  
  356. <div class="container">
  357.  
  358. <div class="profile">
  359.  
  360. <div class="profile-image">
  361.  
  362. <img src="https://via.placeholder.com/120x120" alt="">
  363.  
  364. </div>
  365.  
  366. <div class="profile-user-settings">
  367.  
  368. <div class="profile-user-name">display name here</div>
  369.  
  370. <button class="btn profile-edit-btn">Edit Profile</button>
  371.  
  372. <button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button>
  373.  
  374. </div>
  375.  
  376. <div class="profile-stats">
  377.  
  378. <ul>
  379. <li><span class="profile-stat-count">2k</span> posts</li>
  380. <li><span class="profile-stat-count">2.1k</span> followers</li>
  381. <li><span class="profile-stat-count">5</span> following</li>
  382. </ul>
  383.  
  384. </div>
  385.  
  386. <div class="profile-bio">
  387.  
  388. <p><span class="profile-real-name">Jane Doe</span> Lorem ipsum dolor sit, amet consectetur adipisicing elit 📷✈️🏕️</p>
  389.  
  390. </div>
  391.  
  392. </div>
  393. <!-- End of profile section -->
  394.  
  395. </div>
  396. <!-- End of container -->
  397.  
  398. </header>
  399.  
  400. <main>
  401.  
  402. <div class="container">
  403.  
  404. <div class="gallery">
  405.  
  406. <div class="gallery-item" tabindex="0">
  407.  
  408. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  409.  
  410. <div class="gallery-item-info">
  411.  
  412. <ul>
  413. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 56</li>
  414. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
  415. </ul>
  416.  
  417. </div>
  418.  
  419. </div>
  420.  
  421. <div class="gallery-item" tabindex="0">
  422.  
  423. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  424.  
  425. <div class="gallery-item-info">
  426.  
  427. <ul>
  428. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 89</li>
  429. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 5</li>
  430. </ul>
  431.  
  432. </div>
  433.  
  434. </div>
  435.  
  436. <div class="gallery-item" tabindex="0">
  437.  
  438. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  439.  
  440. <div class="gallery-item-type">
  441.  
  442. <span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>
  443.  
  444. </div>
  445.  
  446. <div class="gallery-item-info">
  447.  
  448. <ul>
  449. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 42</li>
  450. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 1</li>
  451. </ul>
  452.  
  453. </div>
  454.  
  455. </div>
  456.  
  457. <div class="gallery-item" tabindex="0">
  458.  
  459. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  460.  
  461. <div class="gallery-item-type">
  462.  
  463. <span class="visually-hidden">Video</span><i class="fas fa-video" aria-hidden="true"></i>
  464.  
  465. </div>
  466.  
  467. <div class="gallery-item-info">
  468.  
  469. <ul>
  470. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 38</li>
  471. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 0</li>
  472. </ul>
  473.  
  474. </div>
  475.  
  476. </div>
  477.  
  478. <div class="gallery-item" tabindex="0">
  479.  
  480. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  481.  
  482. <div class="gallery-item-type">
  483.  
  484. <span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>
  485.  
  486. </div>
  487.  
  488. <div class="gallery-item-info">
  489.  
  490. <ul>
  491. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 47</li>
  492. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 1</li>
  493. </ul>
  494.  
  495. </div>
  496.  
  497. </div>
  498.  
  499. <div class="gallery-item" tabindex="0">
  500.  
  501. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  502.  
  503. <div class="gallery-item-info">
  504.  
  505. <ul>
  506. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 94</li>
  507. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 3</li>
  508. </ul>
  509.  
  510. </div>
  511.  
  512. </div>
  513.  
  514. <div class="gallery-item" tabindex="0">
  515.  
  516. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  517.  
  518. <div class="gallery-item-type">
  519.  
  520. <span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>
  521.  
  522. </div>
  523.  
  524. <div class="gallery-item-info">
  525.  
  526. <ul>
  527. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 52</li>
  528. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 4</li>
  529. </ul>
  530.  
  531. </div>
  532.  
  533. </div>
  534.  
  535. <div class="gallery-item" tabindex="0">
  536.  
  537. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  538.  
  539. <div class="gallery-item-info">
  540.  
  541. <ul>
  542. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 66</li>
  543. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
  544. </ul>
  545.  
  546. </div>
  547.  
  548. </div>
  549.  
  550. <div class="gallery-item" tabindex="0">
  551.  
  552. <img src="https://via.placeholder.com/100x100" class="gallery-image" alt="">
  553.  
  554. <div class="gallery-item-type">
  555.  
  556. <span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>
  557.  
  558. </div>
  559.  
  560. <div class="gallery-item-info">
  561.  
  562. <ul>
  563. <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 45</li>
  564. <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 0</li>
  565. </ul>
  566.  
  567. </div>
  568.  
  569. </div>
  570.  
  571. </div>
  572. <!-- End of gallery -->
  573.  
  574.  
  575.  
  576. </div>
  577. <!-- End of container -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!