Skip to content

Instantly share code, notes, and snippets.

@michhub-dev
Created May 28, 2020 16:29
Show Gist options
  • Save michhub-dev/a20751677d0e477853ac3fe29d990683 to your computer and use it in GitHub Desktop.
Save michhub-dev/a20751677d0e477853ac3fe29d990683 to your computer and use it in GitHub Desktop.
more css // source https://jsbin.com/xiwolir
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>more css</title>
<style id="jsbin-css">
h1 {
border: 2px dotted;
padding: 3px ;
margin:5px;
color: purple;
}
span {
border: 1px solid;
color: grey;
padding-top: 2px;
margin-bottom: 2px;
width: 300px;
line-height: 1em;
vertical-align: baseline;
}
.base {
width: 200px;
height; 300px;
color: brown;
}
.fload{
float: right;
}
.box {
color: blue;
border: 1px solid black;
padding: 2px;
margin: 2px;
height: 15px;
width: 200px;
background: grey;
}
a {
background: green;
}
.deco:after {
content: ".";
visibility: hidden ;
display: block;
height: 0;
clear: both;
}
</style>
</head>
<body>
<h1 class ="go">Here is my content</h1>
<p>Lorem ipsum<span> dolor sit </span>amet, consectetur<a href="#"> adipiscing elit,</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<div class ="base">
what else do you expect to see?</div><br><br>
<div class= "deco clearfix">
<div class="box fload">Box</div>
<div class ="box fload">Box</div>
<div class ="box fload">Box</div>
<div class ="box fload">Box</div>
<div class ="box fload">Box</div>
</div>
<h2> Over next</h2>
<script id="jsbin-source-css" type="text/css">h1 {
border: 2px dotted;
padding: 3px ;
margin:5px;
color: purple;
}
span {
border: 1px solid;
color: grey;
padding-top: 2px;
margin-bottom: 2px;
width: 300px;
line-height: 1em;
vertical-align: baseline;
}
.base {
width: 200px;
height; 300px;
color: brown;
}
.fload{
float: right;
}
.box {
color: blue;
border: 1px solid black;
padding: 2px;
margin: 2px;
height: 15px;
width: 200px;
background: grey;
}
a {
background: green;
}
.deco:after {
content: ".";
visibility: hidden ;
display: block;
height: 0;
clear: both;
}
</script>
</body>
</html>
h1 {
border: 2px dotted;
padding: 3px ;
margin:5px;
color: purple;
}
span {
border: 1px solid;
color: grey;
padding-top: 2px;
margin-bottom: 2px;
width: 300px;
line-height: 1em;
vertical-align: baseline;
}
.base {
width: 200px;
height; 300px;
color: brown;
}
.fload{
float: right;
}
.box {
color: blue;
border: 1px solid black;
padding: 2px;
margin: 2px;
height: 15px;
width: 200px;
background: grey;
}
a {
background: green;
}
.deco:after {
content: ".";
visibility: hidden ;
display: block;
height: 0;
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment