Snippets Collections
border-radius: ArI ArD AbD AbI;
a {
  font-size: 2em;
  transition: transform .3s ease-out;
  display: inline-block;
}
a:hover {
  transform: translate(0, -5px);
}
image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';
/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
}
ul {
  max-width: 400px;
  margin: 0 auto;
  list-style-type: none;
  counter-reset: steps;
  margin: 0;
  font-family: sans-serif;
}
ul li {
  padding: 0 0 20px 50px;
  position: relative;
  margin: 0;
}
ul li:after {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(steps);
  counter-increment: steps;
  border: 2px solid #000;
  border-radius: 50%;
  display: inline-block;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  background: #fff;
}
ul li:before {
  position: absolute;
  left: 13px;
  top: 0;
  content: "";
  height: 100%;
  width: 0;
  border-left: 2px dashed #000;
}
ul li:last-of-type:before {
  border: none;
}
<!DOCTYPE html>
<html>
<head>
<style>
p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
​
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
​
</body>
</html>
​
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop)

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.
3- Font-size Handling: Use em and rems instead of pixels.
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.
img {
  shape-outside: polygon(0.23% 2px, 17.11% 0.84%, 61.14% 21.01%, 69.91% 20.17%, 86.88% 27.73%, 90.64% 36.09%, 86.53% 50.56%, 80.07% 79.29%, 86.55% 99.48%, 0px 100%);
  shape-margin: 20px;
  float: left;
  display: inline-block;
}
<style>
th, td {
    padding: 22px;}
    h2 {color:orange}
      body {background-color:White }
    legend   {color:orange}
    fieldset   {border: 2px solid green;}
    /*input {background-color: orange}*/
    /*input{ color: green }*/
    #place_order{
        float: right;
        background-color: orange;
        color: #ffffff;
        border-color: green;
    }
</style>

<table style="width:100%"></table>
	  <h2>Dado tea lunch special</h2>
	 <rt>
	  	<th>Monday to friday</th>
	</rt>	
	  <br>11am - 2pm
	 <br>$9.95 plus tax<br>
	 <rt>
	 	<th></th>
	 </rt>
	 <br>Include sandwich,snack,and drink<br>
	<fieldset>
        <legend>Order Information:</legend>
        Name:<input type="text"name="order_name"> <br>
        Here<input type="radio" name="order_option"><br>
        To go<input type="radio"name="order_option"><br>
  </fieldset>

  <fieldset>
            <legend>Sandwiches:</legend>
             <b>Monday</b>
             <br>
            Tommato<input type="radio" name="option1">
            <br>
             Chicken salad<input type="radio"name="option1">
             <br>
             <b>Tuesday</b>
             <br>
            Greak salad wrap<input type="radio" name="option2">
            <br>
            Toto wrap<input type="radio"name="option2">
            <br>
            <b>wednesday</b>
            <br>
            Red pepper hummas<input type="radio" name="option3">
            <br>
            Rosted turkey<input type="radio"name="option3">
            <br>
             <b>Thusday</b>
             <br>
            Carrot-ginger hummas wrap<input type="radio" name="option4">
            <br>
            Chicken salad<input type="radio"name="option4">
            <br>
            <b>Friday</b>
            <br>
             Dado Wrap<input type="radio" name="option5"> <br>
             Tuna salad<input type="radio"name="option5"> <br>
  </fieldset>


  <fieldset>
  	<legend>Snack:</legend>
    <b>Snack</b><br>
    Apple<input type="radio" name="order_option1"><br>
    Bannana<input type="radio"name="order_option1"><br>
    Potato chips<input type="radio"name="order_option1"><br>
  </fieldset>
<fieldset>
	<legend>Drinks:</legend>
	<b>Drinks</b><br>
	<select name="items" id="items">
	  <option value="Hot black tea-keemun">Hot black tea-keemun</option>
	  <option value="salad">salad</option>
	  <option value="burgar">burgar</option>
	  <option value="pizza">pizza</option>
	</select><br>
<input type="submit" id="place_order" value="Place Order"> 
body{
	margin-top: 50px;
	background-color: #0191C8;
}
.comment-main{
	background-color: #74C2E1;
	box-shadow: 1px 2px 6px 2px #005B9A;
}
.comment-main ul{
	list-style: none;
}
.sub-cmt-img{
	width: 55px !important;
    height: 55px !important;
    border-radius: 50%;
} 
.main-cmt-img{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.border-bottom{
	font-size: 13px;
	border-bottom: 1px solid #d3d3d3;
}
.user-comment{
	background-color: #f3f3f3 !important;
    box-shadow: 0px 5px 8px -4px #c1c1c1;
}
.user-comment-desc, .user-comment span{
	color: #a0a0a0;
}
.user-comment-desc p{
	font-size: 12px;
	display: inline-block;
	float: left;
}
.send-icon i{
	font-size: 20px;
	background: #f3f3f3;
	padding: 6px 5px;
	border-radius: 50%;
	color: #74C2E1;
	height: 35px;
	width: 35px;
}
.user-comment:before{
    content: "";
    height: 0;
    width: 0;
    top: 0;
    left: -10px;
    position: absolute;
    border-style: solid;
    border-width: 13px 0 0 13px;
	border-color: #f3f3f3 transparent transparent transparent; 
}
#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>				
<picture>
<source media='(max-width: 1024px)' srcset='<?php echo get_template_directory_uri()?>/images/demo/work-image-bg--mobile.jpg' class="project__bg--mobile" alt="">
<img src="<?php echo get_template_directory_uri()?>/images/demo/work-image-bg.jpg" class="project__bg--desktop" alt="" />
</picture>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
​
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>
​
<h2>Padding and element width - with box-sizing</h2>
​
<div class="ex1">This div is 300px wide.</div>
<br>
​
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
​
</body>
</html>
​
input[type="text"]:focus {
  outline: none;
}
.wrapper:after {
    content: '';
    display: block;
    clear: both;
}
@media only screen and (min-width: 768px){
    .img-banner{
        display: block;
        width: 100%;
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
<div class="login-wrap">

  <div class="login-html">

    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>

    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>

    <div class="login-form">

      <div class="sign-in-htm">

        <div class="group">

          <label for="user" class="label">Username</label>

          <input id="user" type="text" class="input">

        </div>

        <div class="group">

          <label for="pass" class="label">Password</label>

          <input id="pass" type="password" class="input" data-type="password">

        </div>

        <div class="group">

          <input id="check" type="checkbox" class="check" checked>

          <label for="check"><span class="icon"></span> Keep me Signed in</label>

        </div>

        <div class="group">
        
        
        
        
        
        
        <style="css">
        body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
        </style>
// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

    
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
 .center-me {
  margin: 0 auto;
}
<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}
/*MC subscribe button styling*/
#mc-embedded-subscribe {
    padding: 10px;
    font-family: Montserrat;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffffff;
    background: #5ebb48;
    border: 1px solid #bdd749;
    margin-top: 10px;
}
.category-header {

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  blur-radius: 0;
  spread-radius: 0;
  text-decoration: none;
  font-family: open-sans, lato;
  font-weight: lighter;
  font-size: 38px;
  text-align: center
  align-contents: center;
  
}
<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>
 .lower-canvas {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;  
            }
            .upper-canvas {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
            }
            .canvas-container {
                width: 100% !important;
                height: auto !important;
                border-radius: 20px;
            }
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }
p { text-shadow: 1px 1px 1px #000; }
function print_r(o) {
  return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); 
}
body {
  font-size: 62.5%  /* 1em = 10px */
}
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

​
.container {
  display: flex; /* or inline-flex */
}
<style>
.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}
</style>

<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
                                
 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don
                                
::selection {
  background-color: #FFA;
  color: #000;
}
                                
                                @media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
                                
                                html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}
                                
<style>
@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Teko', sans-serif;
  background: #000;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 4vmin;
}

p {
  position: relative;
  text-align: center;
  font-size: 8vmin;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: .8;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  
  100% {
    background-position-x: 500%;
  }
}
</style>

<p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
const button = document.getElementById("superCoolButton");

// 1 - setting the property
// properties are in camel.Case
button.style.backgroundColor = "black"; 
button.style.color = "white";

// 2 - by using keys to set the property 
// keys are in the kebab-case
button.style["background-color"] = "black"; 
button.style["color"] = "white";

// 3 - setting the css Text property will parse it as normal css. 
button.style.cssText = "background-color:black; color:white;";
 .conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}                               
                                
 const arr = ["This", "Little", "Piggy"];
const first = arr.slice(0, 1);
const the_rest = arr.slice(1);console.log(first); // ["This"]
console.log(the_rest); // ["Little", "Piggy"]                               
                                
<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>
ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}
.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}
.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}
.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}
/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
> More steps
body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
}

.main {
	display: flex;
	flex-direction: column;
}
.main__section {
	flex-grow: 1; /*magical line*/
}
.main__footer {
	margin-top: auto;
}



<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
.block {
    &__element 				{color: red;
	    $self : &;
        #{$self}__element 	{color: green}
    }   
}

/*
	.block__element 			{color: red}
	.block__element__element 	{color: green}

*/
body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 
/* if the primary input mechanism system of the device CANNOT hover */
@media (hover: none) { }

/* if the primary input mechanism system of the device can hover */
@media (hover: hover) { }
bookmark
dashboard

Tue Nov 24 2020 19:39:37 GMT+0000 (UTC) https://confva.com/

#typescript #javascript #html #css
bookmark
dashboard

Mon Nov 09 2020 17:42:36 GMT+0000 (UTC)

#html #css
bookmark
dashboard

Mon Nov 09 2020 03:01:47 GMT+0000 (UTC) https://stackoverflow.com/questions/31860157/css3-transform-translate-on-hover-with-transition

#css
bookmark
dashboard

Tue Nov 03 2020 07:41:04 GMT+0000 (UTC)

#html #css
bookmark
dashboard

Wed Oct 28 2020 08:18:26 GMT+0000 (UTC) https://medium.com/@gemma.stiles/breaking-down-the-dom-dd197e4f7154

#javascript #html #css
bookmark
dashboard

Tue Oct 27 2020 05:31:31 GMT+0000 (UTC)

#css
bookmark
dashboard

Sun Oct 25 2020 08:40:39 GMT+0000 (UTC)

#css
bookmark
dashboard

Sat Oct 24 2020 21:36:38 GMT+0000 (UTC) https://stackoverflow.com/questions/40463542/how-to-make-vertical-lines-between-list-items-using-css

#css
bookmark
dashboard

Sat Oct 24 2020 21:21:10 GMT+0000 (UTC) https://www.w3schools.com/cssref/tryit.asp?filename

#css #before
bookmark
dashboard

Fri Oct 23 2020 15:30:18 GMT+0000 (UTC) https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/

#css
bookmark
dashboard

Wed Oct 21 2020 11:42:38 GMT+0000 (UTC) https://stackoverflow.com/questions/59611088/is-it-good-practice-to-use-vh-and-vw-for-applying-padding-margin-width-and-heigh

#html5 #css
bookmark
dashboard

Mon Oct 19 2020 15:10:26 GMT+0000 (UTC) https://www.matuzo.at/blog/writing-even-more-css-with-accessibility-in-mind-progressive-enhancement/?

#css
bookmark
dashboard

Sun Oct 11 2020 03:08:29 GMT+0000 (UTC) https://github.com/Zilleali/Menu-Page

#html #css
bookmark
dashboard

Wed Oct 07 2020 12:44:50 GMT+0000 (UTC) teste.com.br

#css
bookmark
dashboard

Fri Oct 02 2020 17:48:13 GMT+0000 (UTC) https://csspl.us/

#javascript #css
bookmark
dashboard

Thu Oct 01 2020 13:27:07 GMT+0000 (UTC) https://stackoverflow.com/questions/13337646/scroll-inside-of-a-fixed-sidebar

#css
bookmark
dashboard

Thu Oct 01 2020 06:29:28 GMT+0000 (UTC)

#javascript #css #html #php
bookmark
dashboard

Mon Sep 21 2020 20:34:33 GMT+0000 (UTC)

#html #css
bookmark
dashboard

Sun Sep 20 2020 11:56:04 GMT+0000 (UTC) https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_width2

#css
bookmark
dashboard

Wed Sep 16 2020 04:46:31 GMT+0000 (UTC) https://www.webfx.com/blog/web-design/10-random-css-tricks-you-might-want-to-know-about/

#css
bookmark
dashboard

Wed Sep 09 2020 14:54:43 GMT+0000 (UTC) https://stackoverflow.com/questions/10699343/using-after-to-clear-floating-elements#10699376

#css
bookmark
dashboard

Mon Sep 07 2020 12:40:19 GMT+0000 (UTC)

#css
bookmark
dashboard

Fri Sep 04 2020 18:49:03 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Aug 26 2020 15:08:55 GMT+0000 (UTC) https://fonts.google.com/specimen/Poppins?query=popp&sidebar.open=true&selection.family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900

#css
bookmark
dashboard

Wed Aug 26 2020 06:37:34 GMT+0000 (UTC) https://codepen.io/khadkamhn/pen/ZGvPLo

#html #css
bookmark
dashboard

Sun Aug 02 2020 02:24:12 GMT+0000 (UTC)

#django #css #html
bookmark
dashboard

Wed Jul 01 2020 08:52:19 GMT+0000 (UTC) https://css-tricks.com/centering-css-complete-guide/

#css
bookmark
dashboard

Wed Jul 01 2020 07:54:44 GMT+0000 (UTC) https://css-tricks.com/centering-css-complete-guide/#center-horizontally

#css #css3
bookmark
dashboard

Mon Jun 22 2020 12:58:16 GMT+0000 (UTC) https://css-tricks.com/snippets/css/corner-ribbon/

#css
bookmark
dashboard

Mon Jun 22 2020 12:57:16 GMT+0000 (UTC) https://css-tricks.com/snippets/css/drop-caps/

#css
bookmark
dashboard

Mon Jun 22 2020 12:55:43 GMT+0000 (UTC) https://css-tricks.com/snippets/css/ribbon/

#css
bookmark
dashboard

Mon Jun 22 2020 12:54:35 GMT+0000 (UTC) https://css-tricks.com/snippets/css/force-vertical-scrollbar/

#css
bookmark
dashboard

Mon Jun 22 2020 12:28:17 GMT+0000 (UTC) https://css-tricks.com/snippets/css/top-shadow/

#css
bookmark
dashboard

Mon Jun 22 2020 12:27:26 GMT+0000 (UTC) https://css-tricks.com/snippets/css/non-form-fieldset-look/

#css
bookmark
dashboard

Wed Jun 17 2020 17:29:32 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Jun 10 2020 16:28:32 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Jun 10 2020 11:16:01 GMT+0000 (UTC) https://codepen.io/sdthornton/pen/wBZdXq

#css #materialdesign #boxshadows
bookmark
dashboard

Sun Jun 07 2020 08:08:07 GMT+0000 (UTC) https://www.zappos.com/general-questions#return

#css #html #javascript
bookmark
dashboard

Sun Jun 07 2020 08:02:46 GMT+0000 (UTC) https://www.zappos.com/general-questions

#css #html #javascript
bookmark
dashboard

Sat Jun 06 2020 16:08:47 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Jun 03 2020 16:35:21 GMT+0000 (UTC) https://theme-fusion.com/forums/topic/sticky-header-height/

#css
bookmark
dashboard

Wed Jun 03 2020 10:28:04 GMT+0000 (UTC) https://css-tricks.com/snippets/css/fixed-footer/

#css
bookmark
dashboard

Wed Jun 03 2020 10:27:04 GMT+0000 (UTC) https://css-tricks.com/snippets/css/compress-css-with-php/

#css
bookmark
dashboard

Wed Jun 03 2020 10:25:52 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-text-shadow/

#css
bookmark
dashboard

Fri May 29 2020 12:36:12 GMT+0000 (UTC) https://css-tricks.com/snippets/javascript/print-object-screen/

#css
bookmark
dashboard

Fri May 29 2020 12:35:11 GMT+0000 (UTC) https://css-tricks.com/snippets/css/comments-in-css/

#css
bookmark
dashboard

Fri May 29 2020 12:33:56 GMT+0000 (UTC) https://css-tricks.com/snippets/css/print-url-after-links/

#css
bookmark
dashboard

Wed May 27 2020 07:31:50 GMT+0000 (UTC)

#css
bookmark
dashboard

Fri May 22 2020 12:25:14 GMT+0000 (UTC) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
bookmark
dashboard

Tue May 19 2020 05:03:37 GMT+0000 (UTC) https://stackoverflow.com/questions/55767086/how-to-use-css-order-with-materialize

#css
bookmark
dashboard

Sun May 17 2020 06:15:19 GMT+0000 (UTC) https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

#css
bookmark
dashboard

Sat May 16 2020 19:36:39 GMT+0000 (UTC) https://codepen.io/sdthornton/pen/wBZdXq

#css #html
bookmark
dashboard

Mon May 11 2020 22:00:28 GMT+0000 (UTC) https://www.w3schools.com/css/css_grid.asp

#css
bookmark
dashboard

Mon May 11 2020 21:33:40 GMT+0000 (UTC) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

#css
bookmark
dashboard

Sat May 02 2020 22:07:47 GMT+0000 (UTC) https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

#css
bookmark
dashboard

Fri May 01 2020 11:04:04 GMT+0000 (UTC) https://css-tricks.com/snippets/wordpress/removing-jetpack-css/

#css
bookmark
dashboard

Wed Apr 29 2020 11:36:23 GMT+0000 (UTC) https://css-tricks.com/snippets/html/start-a-web-server-with-one-terminal-command-on-os-x/

#css
bookmark
dashboard

Wed Apr 29 2020 11:26:35 GMT+0000 (UTC) https://css-tricks.com/snippets/css/text-rotation/

#css
bookmark
dashboard

Wed Apr 29 2020 11:11:47 GMT+0000 (UTC) https://css-tricks.com/snippets/css/change-text-selection-color/

#css
bookmark
dashboard

Wed Apr 29 2020 10:55:39 GMT+0000 (UTC) https://css-tricks.com/snippets/css/print-url-after-links/

#css
bookmark
dashboard

Wed Apr 29 2020 10:52:30 GMT+0000 (UTC) https://css-tricks.com/snippets/css/fluid-typography/

#css
bookmark
dashboard

Tue Apr 28 2020 20:08:07 GMT+0000 (UTC) https://codepen.io/cssparadise/pen/PoqQwxg

#css
bookmark
dashboard

Tue Apr 28 2020 19:41:37 GMT+0000 (UTC) https://twitter.com/Duiker101/status/1253341244492664837

#css
bookmark
dashboard

Tue Apr 28 2020 19:30:47 GMT+0000 (UTC) https://css-tricks.com/using-formik-to-handle-forms-in-react/

#css
bookmark
dashboard

Fri Apr 24 2020 11:55:55 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-conic-gradient/

#css #css #conic #gradient
bookmark
dashboard

Fri Apr 24 2020 11:44:23 GMT+0000 (UTC) https://css-tricks.com/snippets/javascript/getting-first-and-last-items-in-array-and-splitting-all-the-rest/

#css #css #items #array
bookmark
dashboard

Mon Mar 02 2020 22:07:43 GMT+0000 (UTC)

#css #shapes
bookmark
dashboard

Sun Feb 09 2020 19:35:52 GMT+0000 (UTC) https://love2dev.com/blog/absolute-centering-css/

#css #layout #flex
bookmark
dashboard

Wed Jan 22 2020 08:08:03 GMT+0000 (UTC)

#css #changingdefault #lists
bookmark
dashboard

Sat Jan 18 2020 20:39:59 GMT+0000 (UTC) https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

#css #layout
bookmark
dashboard

Fri Jan 10 2020 19:00:00 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-radial-gradient/

#css #design #gradient #webdev
bookmark
dashboard

Wed Jan 08 2020 19:00:00 GMT+0000 (UTC)

#css #design #gradient
bookmark
dashboard

Wed Jan 08 2020 19:00:00 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-repeating-gradients/

#css #webdev #design #gradients
bookmark
dashboard

Sun Jan 05 2020 18:59:56 GMT+0000 (UTC) https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

#css #webdev #text
bookmark
dashboard

https://www.w3schools.com/,

#css

.

bookmark
dashboard

https://codepen.io/ananyaneogi/pen/WNerMbE

#css

.

bookmark
dashboard

https://www.w3schools.com/howto/howto_js_lightbox.asp,

#css #html #javascript

.

bookmark
dashboard

https://www.w3schools.com/CSSref/pr_background-attachment.asp

#css #html

.

bookmark
dashboard

https://www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts

#css

.

bookmark
dashboard

https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134

#css

.

Save snippets that work with our extensions

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