Skip to content

Instantly share code, notes, and snippets.

View AakashRao-dev's full-sized avatar
🏃
Getting Cracked...

Aakash Rao AakashRao-dev

🏃
Getting Cracked...
View GitHub Profile
@AakashRao-dev
AakashRao-dev / index.html
Last active February 6, 2023 16:00
Spacing with column layout
<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>
@AakashRao-dev
AakashRao-dev / index.html
Last active February 6, 2023 15:56
Spacing with Text
<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">
@AakashRao-dev
AakashRao-dev / index.html
Created January 6, 2023 06:29
CSS Grid layout with Gap property
<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>
@AakashRao-dev
AakashRao-dev / index.html
Created January 6, 2023 05:39
Flexbox Gap vs Flexbox Margin Layout
<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>
@AakashRao-dev
AakashRao-dev / index.html
Last active February 6, 2023 15:54
External Spacing or Margin
<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>
@AakashRao-dev
AakashRao-dev / index.html
Created January 5, 2023 05:19
Internal Spacing or Padding
<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">

Keybase proof

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:

@AakashRao-dev
AakashRao-dev / style.css
Created September 4, 2022 04:23
Using the repeat() function for grid-template-columns values
.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);
@AakashRao-dev
AakashRao-dev / index.html
Last active September 3, 2022 15:51
Step-13 at conference building interface
<!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>
@AakashRao-dev
AakashRao-dev / style.css
Created September 3, 2022 15:47
Step-11 at conference building interface
: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);