Snippets Collections
<p class="centered-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, voluptas? Non voluptate esse suscipit? Eius eum sit dicta, totam amet ut, perferendis atque a error blanditiis molestias culpa minus inventore at? Natus, suscipit. Dolores dolore obcaecati voluptates pariatur? Sint exercitationem rem non. Quis aliquid impedit mollitia earum dicta saepe laborum!
</p>
 <p class="grey-text">Grey Text</p>
 <div class="avatar avatar-xx-lg">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-x-lg">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-lg">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-md">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-sm">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-x-sm">
     <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-xx-lg">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-x-lg">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-lg">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-md">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-sm">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
 <div class="avatar avatar-x-sm">
     <img class="square-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
 </div>
<div class="avatar circular-avatar text-avatar avatar-xx-lg">
    SK
</div>
<div class="avatar circular-avatar text-avatar avatar-x-lg">
    SK
</div>
<div class="avatar circular-avatar text-avatar avatar-lg">
    SK
</div>
<div class="avatar circular-avatar text-avatar avatar-md">
    SK
</div>
<div class="avatar circular-avatar text-avatar avatar-sm">
    SK
</div>
<div class="avatar circular-avatar text-avatar avatar-x-sm">
    SK
</div>
 <button class="btn btn-primary">Inbox<span class="btn-badge">8+</span> </button>
 <div class="badge-conatainer">
     <div class="avatar avatar-xx-lg">
         <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
     </div>
     <span class="profile-badge online"></span>
 </div>

 <div class="badge-conatainer">
     <div class="avatar avatar-x-lg">
         <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
     </div>
     <span class="profile-badge away"></span>
 </div>

 <div class="badge-conatainer">
     <div class="avatar avatar-lg">
         <img class="circular-avatar img" src="./Components/images/avatar/Avaatar.jpg" alt="avatar" />
     </div>
     <span class="profile-badge incall"></span>
 </div>
[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
<div class="card card-vertical card-basic">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
  <figure>
      <img src="./images/avatar-image.jpg" alt="avatar-img" class="avatar avatar-xl" />
  </figure>
  <figure>
      <img src="./images/avatar-image.jpg" alt="avatar-img" class="avatar avatar-lg" />
  </figure>
  <figure>
      <img src="./images/avatar-image.jpg" alt="avatar-img" class="avatar avatar-sm" />
  </figure>
  <figure>
      <img src="./images/avatar-image.jpg" alt="avatar-img" class="avatar avatar-xs" />
  </figure>
  <figure class="avatar-presence-wrapper">
      <img src="images/avatar-image.jpg" alt="avatar" class="avatar avatar-xl" />
      <span class="status bottom-right-lg online"></span>
  </figure>
  <figure class="avatar-presence-wrapper">
      <img src="images/avatar-image.jpg" alt="avatar" class="avatar avatar-sm" />
      <span class="status bottom-right-sm online"></span>
  </figure>
  <figure class="avatar-presence-wrapper">
      <img src="images/avatar-image.jpg" alt="avatar" class="avatar avatar-xl" />
      <span class="status bottom-right-lg offline"></span>
  </figure>
  <figure class="avatar-presence-wrapper">
      <img src="images/avatar-image.jpg" alt="avatar" class="avatar avatar-sm" />
      <span class="status bottom-right-sm offline"></span>
  </figure>
# Base
  – normalize.css
  – layout.css
  – typography.css

# Components
  – alerts.css
  – buttons.css
  – forms.css
  – list.css
  – nav.css
  – tables.css

# Modules
  – aside.css
  – footer.css
  – header.css
.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set:after {
  clear: both;
}
.box-set {
  *zoom: 1;
}
target ÷ context = result
e.g target is 10px width and the container width 100px, using the formula result is 0.1 and in percentage it becomes 10%
<!-- badge1-->
<div class="Badge-type">Text with a badge
    <span class="Badge-count txt-bdg">4</span>
</div>
<br />
<!-- badge2-->
<div class="Badge-type">Text with large badge
    <span class="Badge-count txt-lr-bdg ">1</span>
</div>
<br />
<!-- badge3-->
<div class="Badge-type">Button with a badge on the left
    <button class="badge-btn btn-left-bdg ">Action</button>
    <span class="Badge-count btn-bdg ">8</span>
</div>
<br />
<!-- badge4-->
<div class="Badge-type">Button toggles badge visibility
    <button class="badge-btn btn-hide-bdg ">Hide</button>
    <span class="Badge-count hide-bdg">9</span>
</div>
<br />
<!-- badge5 -->
<div class="Badge-type">Icon with a badge
    <span class="icon-badge ">
        <i class="fas fa-home home-icon"></i>
    </span>
    <span class="Badge-count icon-bdg-cnt">+15</span>
</div>
<div class="bdg-avatar avatar-sm-size ">
    <img loading="lazy " class="img-size img-round avatar-mobile" src=" " alt=" ">
    <i class="fas fa-mobile"></i>
</div>
<div class="bdg-avatar avatar-sm-size ">
    <img loading="lazy " class="img-size img-round avatar-busy" src=" " alt=" ">
    <i class="fas fa-minus-circle"></i>
</div>
<div class="bdg-avatar avatar-sm-size ">
    <img loading="lazy " class="img-size img-round avatar-avail" src=" " alt=" ">
    <i class="fas fa-circle"></i>
</div>
while 1:
    print("choose a name")
    print("1-Aymen;")
    print("2-Hasbulla;")
    name=input()
    if name == "1":
        print("you're not wrong")
    elif name == "2":
        print("You're the BEST")
    elif name == "stop":
        break    
    else:
        print("LOOSER")
while 2:
    print("Who are you")
    print("europhia")
    print("darkness")
    person=input()
    
    if person == "1":
        print("Anonymous")
        
    elif person == "2":
        print("The sultan")
    
    elif person == "wtf":
        break
    else:
        print("ERROR")
while 1:

	print("choose an option:")
	print("1 - area circulo")
	print("2 - area rectangulo")
    print("write stop to close")
	option = input()


	if option == "1":	
		radio= int(input("Enter the radius of the circle:"))
		pi=3.14
		area = pi*(radio**2)
		print("The area of the circle""is: ",area)
		
	elif option == "2":
		lado = int(input("Enter the length of the side:"))
		base = int(input("Enter the length of the other side:"))
		area = lado*base 
		print("The area of the rectangle is: ",area)
		
	elif option=="stop":
		break
	else:
		print("not a figure")
figura = "triangle"
if figura == "circle":
    radio= int(input("Enter the radius of the circle:"))
    pi=3.14
    area = pi*(radio**2)
    print("The area of the circle""is: ",area)
    
elif figura == "square":
    lado = int(input("Enter the length of the side:"))
    area = lado*lado
    print("The area of the square with side",lado,"is: ",area)
    
elif figura == "triangle":
    altura = int(input("Enter the height of the triangle:"))
    base = int(input("Enter the base of the triangle:"))
    area = (base*altura)/2
    print("The area of the triangle with height",altura,"and base ",base,    "is: ",area)
    
elif figura == "rectangle":
    altura = int(input("Enter the height of the rectangle:"))
    base = int(input("Enter the base of the rectangle:"))
    area = base*altura
    print("The area of the rectangle with height",altura,"and base",base,   "is: ",area)
else:
    print("failure")
<link rel="stylesheet" href="https://pixelcss.netlify.app/import.css" />
 <div class="xs-gutter bolder para-sm">Text Bolder</div>
 <div class="xs-gutter bold para-sm">Text Bold</div>
 <div class="xs-gutter semibold-weight para-sm">Text Semibold</div>
 <div class="xs-gutter regular-weight para-sm">Text Regular</div>
 <div class="xs-gutter light-weight para-sm">
     Text Light Weight
 </div>
 <div class="xs-gutter regular-weight para-sm grey semibold-weight">
     Text Grey
 </div>
<div class="xs-gutter bolder para-sm">Text Bolder</div>
<div class="xs-gutter bold para-sm">Text Bold</div>
<div class="xs-gutter semibold-weight para-sm">Text Semibold</div>
<div class="xs-gutter regular-weight para-sm">Text Regular</div>
<div class="xs-gutter light-weight para-sm">
    Text Light Weight
</div>
<div class="xs-gutter regular-weight para-sm grey semibold-weight">
    Text Grey
</div>
<div class="xs-gutter para-xl">Text size</div>
<div class="xs-gutter para-lg">Text size</div>
<div class="xs-gutter para-md">Text size</div>
<div class="xs-gutter para-sm">Text size</div>
<div class="xs-gutter para-sm-xs">Text size</div>
<div class="xs-gutter para-xs grey">Text-grey size</div>
<div class="xs-gutter img-xl para-sm-xs">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy
    text ever since the 1500s, when an unknown printer took a galley
    of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged.
</div>
 <div class="toast pos1 sm-gutter sm-brr">
     <div class="content xxs-padding para-sm-xs">
         Can't send photo retry in 5 seconds
     </div>
     <div class="toast_action xs-gutter para-sm-xs">
         <span class="xxs-padding"><a href="">Retry</a></span>
         <span class="toast-icon xxs-padding"><a href=""><i class="fas fa-window-close fa-2x"></i></a></span>
     </div>
 </div>
 <div class="toast pos1 light-v pos1 sm-gutter sm-brr">
     <div class="content xxs-padding para-sm-xs">
         Can't send photo retry in 5 seconds
     </div>
     <div class="toast_action xs-gutter para-sm-xs">
         <span class="xxs-padding"><a href="">Retry</a></span>
         <span class="toast-icon xxs-padding"><a href=""><i class="fas fa-window-close fa-2x"></i></a></span>
     </div>
 </div>
 <div class="toast pos1 success-v sm-gutter sm-brr">
     <div class="content xxs-padding para-sm-xs">
         Photo sent - SUCCESS
     </div>
     <div class="toast_action xs-gutter para-sm-xs">
         <span class="toast-icon xxs-padding"><a href=""><i class="far fa-check-circle fa-2x"></i></a></span>
     </div>
 </div>
<div class="toast pos1 error-v sm-gutter sm-brr">
    <div class="content xxs-padding para-sm-xs">
        Can't send photo - ERROR
    </div>
    <div class="toast_action xs-gutter para-sm-xs">
        <span class="toast-icon xxs-padding"><a href=""><i class="fas fa-exclamation-circle fa-2x"></i></a></span>
    </div>
</div>
 <div class="rating-container xs-gutter">
     <i class="far fa-star"></i>
     <i class="far fa-star"></i>
     <i class="far fa-star"></i>
     <i class="far fa-star"></i>
     <i class="far fa-star"></i>
 </div>
 <div class="backdrop"></div>
 <div class="modal sm-padding">
     <div class="content">
         <h2>Modal Title</h2>
         <p class="xs-padding para-sm-xs">
             Lorem Ipsum is simply dummy text of the printing and
             typesetting industry. Lorem Ipsum has been the industry's
             standard dummy text ever since the 1500s, when an unknown
             printer took a galley of type and scrambled it to make a type
             specimen book.
         </p>
         <div class="actions">
             <a class="xs-gutter para-sm bold">Ok</a>
             <a class="xs-gutter para-sm cancel-btn bold">Cancel</a>
         </div>
     </div>
 </div>
<ul class="sm-gutter spaced-list no-style">
    <li class="xs-gutter">Item 1</li>
    <li class="xs-gutter">Item 2</li>
    <li class="xs-gutter">Item 3</li>
    <li class="xs-gutter">Item 4</li>
</ul>
 <ul class="sm-gutter spaced-list no-style">
     <li class="xs-gutter list-border-bg sm-brr xs-padding">Item 1</li>
     <li class="xs-gutter list-border-bg sm-brr xs-padding">Item 2</li>
     <li class="xs-gutter list-border-bg sm-brr xs-padding">Item 3</li>
     <li class="xs-gutter list-border-bg sm-brr xs-padding">Item 4</li>
 </ul>
 <ul class="sm-gutter stacked-list no-style">
     <li class="xs-gutter sm-brr xs-padding">Item 1</li>
     <li class="xs-gutter sm-brr xs-padding">Item 2</li>
     <li class="xs-gutter sm-brr xs-padding">Item 3</li>
     <li class="xs-gutter sm-brr xs-padding">Item 4</li>
 </ul>
 <ul class="sm-gutter stacked-list no-style">
     <li class="xs-gutter sm-brr xs-padding list-border-bg">Item 1</li>
     <li class="xs-gutter sm-brr xs-padding list-border-bg">Item 2</li>
     <li class="xs-gutter sm-brr xs-padding list-border-bg">Item 3</li>
     <li class="xs-gutter sm-brr xs-padding list-border-bg">Item 4</li>
 </ul>
 <div class="sm-gutter">
     <label for="textbox" class="xxs-padding">Label</label>
     <input type="text" class="textbox img-md xxs-padding" />
 </div>
<div class="sm-gutter">
    <label for="textbox" class="xxs-padding">Label</label>
    <input type="text" placeholder="Placeholder" class="textbox img-md xxs-padding" />
</div>
<div class="sm-gutter">
    <label for="textbox" class="xxs-padding">Label</label>
    <input type="text" class="textbox validation-input img-md xxs-padding" placeholder="email" />
    <i class="fas fa-exclamation-triangle xs-gutter error para-sm"></i>
</div>
 <div class="sm-gutter checkbox-container">
     <label for="checkbox" class="checkbox para-sm xs-padding">Label</label>
     <input type="checkbox" name="input1" class="checkbox-input" />
 </div>
 <div class="sm-gutter checkbox-container">
     <label for="radio-btn" class="checkbox para-sm xs-padding">Label</label>
     <input type="radio" name="input1" class="radio-input" />
 </div>
<div class="images xs-gutter">
    <img class="img-md sm-brr" src="https://picsum.photos/200" alt="" />
</div>

<div class="images">
    <img class="img-lg sm-brr" src="https://picsum.photos/200" alt="" />
</div>

<div class="images">
    <img class="img-xl sm-brr" src="https://picsum.photos/200" alt="" />
</div>

<div class="images">
    <img class="img-xxxl sm-brr" src="https://picsum.photos/200" alt="" />
</div>

<div class="images">
    <img class="img-full sm-brr" src="https://picsum.photos/200" alt="" />
</div>
<div class="images">
    <img src="https://picsum.photos/200" alt="" class="xs-gutter img-lg full-brr" />
</div>

<div class="images">
    <img src="https://picsum.photos/200" alt="" class="xs-gutter img-xl full-brr" />
</div>

<div class="images">
    <img src="https://picsum.photos/200" alt="" class="xs-gutter img-xxl full-brr" />
</div>

<div class="images">
    <img src="https://picsum.photos/200" alt="" class="xs-gutter img-xxxl full-brr" />
</div>

<div class="images">
    <img src="https://picsum.photos/200" alt="" class="xs-gutter img-full full-brr" />
</div>
<div class="card-container sm-gutter sm-brr">
    <img class="img-full sm-brr" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
    <div class="card__content">
        <div class="card__heading xs-gutter para-md semibold-weight">
            Black Panther
        </div>
        <div class="card__author xs-gutter para-sm">
            by Kurt Wagner
        </div>
        <div class="card__info xs-gutter para-sm-xs">
            Visit ten places on our planet that are undergoing the
            biggest changes today.Lorem Ipsum is simply dummy text of
            the printing and typesetting industry.
        </div>
    </div>
    <div class="card__actions sm-gutter">
        <div class="card__read para-sm-xs semibold-weight">
            <a href="">READ</a>
        </div>
        <div class="card__bookmark para-sm-xs semibold-weight">
            <a href="">BOOKMARK</a>
        </div>
        <div class="card__like">
            <a href=""><i class="fas fa-share-alt para-sm"></i></a>
        </div>
        <div class="card__share">
            <a href=""><i class="far fa-heart para-sm"></i></a>
        </div>
        <div class="card__vert">
            <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
        </div>
    </div>
</div>
<div class="card-container sm-gutter sm-brr">
    <div class="card__content">
        <div class="card__heading xs-gutter para-md semibold-weight">
            Black Panther
        </div>
        <div class="card__author xs-gutter para-sm">
            by Kurt Wagner
        </div>
    </div>
    <img class="img__card-4 img-full" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
    <div class="card__info xs-gutter para-sm-xs">
        Visit ten places on our planet that are undergoing the biggest
        changes today.Lorem Ipsum is simply dummy text of the printing
        and typesetting industry.
    </div>
    <div class="card__actions sm-gutter">
        <div class="card__read para-sm-xs semibold-weight">
            <a href="">READ</a>
        </div>
        <div class="card__bookmark para-sm-xs semibold-weight">
            <a href="">BOOKMARK</a>
        </div>
        <div class="card__like">
            <a href=""><i class="fas fa-share-alt para-sm"></i></a>
        </div>
        <div class="card__share">
            <a href=""><i class="far fa-heart para-sm"></i></a>
        </div>
        <div class="card__vert">
            <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
        </div>
    </div>
</div>
<div class="card-container card_3-size sm-gutter sm-brr">
    <div class="card__media-title--card_3">
        <div class="card__media">
            <img class="img-card_3 sm-brr" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
        </div>
        <div class="card__content--card_3">
            <div class="card__heading para-md semibold-weight">
                Black Panther
            </div>
            <div class="card__author">by Kurt Wagner</div>
        </div>
    </div>
    <div class="card__actions sm-gutter">
        <div class="card__read para-sm-xs semibold-weight">
            <a href="">READ</a>
        </div>
        <div class="card__bookmark para-sm-xs semibold-weight">
            <a href="">BOOKMARK</a>
        </div>
        <div class="card__like">
            <a href=""><i class="fas fa-share-alt para-sm"></i></a>
        </div>
        <div class="card__share">
            <a href=""><i class="far fa-heart para-sm"></i></a>
        </div>
        <div class="card__vert">
            <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
        </div>
    </div>
</div>
<div class="card-container sm-gutter sm-brr">
    <div class="card__media">
        <img class="img__card-2 img-full sm-brr" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
        <div class="card__content--card_2">
            <div class="card__heading card_2 xs-gutter para-md semibold-weight">
                Black Panther
            </div>
            <div class="card__author card_2 xs-gutter para-sm">
                by Kurt Wagner
            </div>
        </div>
    </div>
<div class="card-container sm-gutter sm-brr">
    <div class="card__media">
        <img class="img__card-2 img-full sm-brr" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
        <div class="card__content--card_2">
            <div class="card__heading card_2 xs-gutter para-md semibold-weight">
                Black Panther
            </div>
            <div class="card__author card_2 xs-gutter para-sm">
                by Kurt Wagner
            </div>
        </div>
    </div>

    <div class="card__info sm-gutter para-sm-xs">
        Visit ten places on our planet that are undergoing the biggest
        changes today.Lorem Ipsum is simply dummy text of the printing
        and typesetting industry.
    </div>
    <div class="card__actions sm-gutter">
        <div class="card__read para-sm-xs semibold-weight">
            <a href="">READ</a>
        </div>
        <div class="card__bookmark para-sm-xs semibold-weight">
            <a href="">BOOKMARK</a>
        </div>
        <div class="card__like">
            <a href=""><i class="fas fa-share-alt para-sm"></i></a>
        </div>
        <div class="card__share">
            <a href=""><i class="far fa-heart para-sm"></i></a>
        </div>
        <div class="card__vert">
            <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
        </div>
    </div>
</div>
 <div class="card-container sm-gutter sm-brr">
     <div class="card__content">
         <div class="card__heading xs-gutter para-md semibold-weight">
             Black Panther
         </div>
         <div class="card__author xs-gutter para-sm">by Kurt Wagner</div>
     </div>
     <div class="card__info sm-gutter para-sm-xs">
         Visit ten places on our planet that are undergoing the biggest
         changes today.Lorem Ipsum is simply dummy text of the printing
         and typesetting industry.
     </div>
     <div class="card__actions sm-gutter">
         <div class="card__read para-sm-xs semibold-weight">
             <a href="">READ</a>
         </div>
         <div class="card__bookmark para-sm-xs semibold-weight">
             <a href="">BOOKMARK</a>
         </div>
         <div class="card__like">
             <a href=""><i class="fas fa-share-alt para-sm"></i></a>
         </div>
         <div class="card__share">
             <a href=""><i class="far fa-heart para-sm"></i></a>
         </div>
         <div class="card__vert">
             <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
         </div>
     </div>
 </div>
 <div class="card-container sm-gutter sm-brr">
     <div class="card__content">
         <div class="card__heading xs-gutter para-md semibold-weight">
             Black Panther
         </div>
         <div class="card__author xs-gutter para-sm">by Kurt Wagner</div>
     </div>
     <img class="img__card-4 img-full" src="https://cdn.wallpapersafari.com/52/47/VKjh5B.jpg" alt="" />
     <div class="card__info xs-gutter para-sm-xs">
         Visit ten places on our planet that are undergoing the biggest
         changes today.Lorem Ipsum is simply dummy text of the printing
         and typesetting industry.
     </div>
     <div class="card__actions sm-gutter">
         <div class="card__read para-sm-xs semibold-weight">
             <a href="">CANCEL</a>
         </div>
     </div>
 </div>
star

Tue Feb 01 2022 16:30:41 GMT+0000 (Coordinated Universal Time)

@rakshapawar10

star

Tue Feb 01 2022 16:34:12 GMT+0000 (Coordinated Universal Time)

@rakshapawar10

star

Tue Feb 01 2022 16:41:56 GMT+0000 (Coordinated Universal Time)

@shikha

star

Tue Feb 01 2022 16:43:30 GMT+0000 (Coordinated Universal Time)

@shikha

star

Tue Feb 01 2022 16:44:59 GMT+0000 (Coordinated Universal Time)

@shikha

star

Tue Feb 01 2022 16:46:33 GMT+0000 (Coordinated Universal Time)

@shikha

star

Tue Feb 01 2022 16:48:46 GMT+0000 (Coordinated Universal Time)

@shikha

star

Tue Feb 01 2022 16:53:53 GMT+0000 (Coordinated Universal Time) https://code.visualstudio.com/docs/editor/versioncontrol

@jpalbright31

star

Tue Feb 01 2022 17:29:52 GMT+0000 (Coordinated Universal Time) https://harshita-crypto-ui.netlify.app/

@harshitadaswani

star

Tue Feb 01 2022 17:51:33 GMT+0000 (Coordinated Universal Time)

@harshitadaswani

star

Tue Feb 01 2022 18:40:21 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

star

Tue Feb 01 2022 18:52:00 GMT+0000 (Coordinated Universal Time)

@Shrushti

star

Tue Feb 01 2022 18:56:27 GMT+0000 (Coordinated Universal Time)

@Shrushti

star

Tue Feb 01 2022 19:43:25 GMT+0000 (Coordinated Universal Time) https://learn.shayhowe.com/advanced-html-css/performance-organization/

@tolanisirius

star

Tue Feb 01 2022 20:33:31 GMT+0000 (Coordinated Universal Time) https://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

@tolanisirius

star

Tue Feb 01 2022 21:56:33 GMT+0000 (Coordinated Universal Time) https://learn.shayhowe.com/advanced-html-css/responsive-web-design/

@tolanisirius

star

Tue Feb 01 2022 22:00:30 GMT+0000 (Coordinated Universal Time)

@Manjushree

star

Tue Feb 01 2022 22:41:43 GMT+0000 (Coordinated Universal Time)

@Manjushree

star

Wed Feb 02 2022 00:21:26 GMT+0000 (Coordinated Universal Time)

@aymenben99

star

Wed Feb 02 2022 00:23:21 GMT+0000 (Coordinated Universal Time)

@aymenben99

star

Wed Feb 02 2022 00:24:36 GMT+0000 (Coordinated Universal Time)

@aymenben99

star

Wed Feb 02 2022 03:31:54 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:34:57 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:36:08 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:36:58 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:37:45 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:39:35 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:40:38 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:41:26 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:42:05 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:44:02 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:45:11 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:47:12 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:47:53 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:48:30 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:49:09 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:50:36 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:51:22 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:51:59 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:52:50 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:53:34 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:55:23 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 03:56:13 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:01:39 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:02:23 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:03:16 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:04:04 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:05:02 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:05:44 GMT+0000 (Coordinated Universal Time)

@AnishJakka

star

Wed Feb 02 2022 04:06:24 GMT+0000 (Coordinated Universal Time)

@AnishJakka

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension