I hereby claim:
- I am Aakashrao-dev on github.
- I am aakash_codes (https://keybase.io/aakash_codes) on keybase.
- I have a public key whose fingerprint is 829D BF89 FEF6 5B6F 11D4 4649 46F3 65EB B732 B56D
To claim this, I am signing this object:
<section class="container"> | |
<h1>Spacing with column layout</h1> | |
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure ratione dolor et quas modi aut aperiam accusantium, | |
commodi nisi facere libero reprehenderit ducimus nemo amet dolores recusandae harum architecto. Minima et explicabo similique. | |
Qui itaque praesentium dignissimos aperiam tenetur quod ex natus modi, possimus voluptatem exercitationem iste non dolorum at | |
corporis nostrum beatae debitis fugiat? Beatae, ducimus! Omnis consequuntur, quos officiis doloribus assumenda libero debitis | |
impedit pariatur cupiditate quasi amet aspernatur incidunt nihil suscipit possimus similique sed dolore veniam deserunt molestiae | |
facilis ipsam eius tempore. Tenetur iste atque assumenda eos similique a ipsam. Molestias nihil officiis necessitatibus temporibus | |
harum eos? | |
</article> |
<div class="container"> | |
<h1>Spacing with Text</h1> | |
<div class="normal-text"> | |
<h2>Normal text</h2> | |
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p> | |
</div> | |
<!-- LINE HEIGHT --> | |
<div class="line__height--with"> |
<div class="section"> | |
<h1>CSS Grid Layout with Gap</h1> | |
<div class="grid-container"> | |
<div class="grid-item">1</div> | |
<div class="grid-item">2</div> | |
<div class="grid-item">3</div> | |
<div class="grid-item">4</div> | |
<div class="grid-item">5</div> | |
<div class="grid-item">6</div> | |
</div> |
<section class="section"> | |
<h2>Flexbox with gap!</h2> | |
<!-- Start flexbox layout --> | |
<div class="flex flex-gap"> | |
<div class="item content">Item</div> | |
<div class="item content">Longer Item</div> | |
<div class="item content">Even Longer Item</div> | |
<div class="item content">Item</div> | |
<div class="item content">Longer Item</div> |
<div class="container"> | |
<h1>External Spacing or Margin</h1> | |
<div class="box"> | |
<div class="m-top"> | |
<div></div> | |
<div></div> | |
<p>margin-top: 60px;</p> | |
</div> |
<div class="container"> | |
<h1>Internal Spacing or Padding</h1> | |
<div class="box"> | |
<div class="p-top"> | |
<div></div> | |
<p>padding-top: 30px;</p> | |
</div> | |
<div class="p-right"> |
I hereby claim:
To claim this, I am signing this object:
.grid-container { | |
display: grid; | |
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; | |
/* Using repeat function to rewrite the template columns */ | |
grid-template-columns: repeat(12, 1fr); |
<!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>Conference Scheduler interface using CSS Grid</title> | |
</head> | |
<body> |
:root { | |
--main-bg: rgb(238, 238, 238); | |
--stage-time-bg: rgba(217, 217, 217); | |
--blue-slot-bg: rgba(52, 129, 174, 0.3); | |
--blue-slot-text: rgba(52, 129, 174, 1); | |
--green-slot-bg: rgba(49, 223, 118, 0.42); | |
--green-slot-text: rgba(40, 188, 99, 1); |