Button

HTML and CSS code (Button)

HTML Code

<button class="button">Submit</button>
<button class="button button2">Register
</button>

CSS Code

.button {
background-color: #6dcff6;
border: none;
border-radius: 28px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #4794d0;}

Cards

HTML and CSS Code (Cards)

HTML Code

<li class="cards_item">
<div class="card">
<div class="card_image">
<img src="https://picsum.photos/500/300/?image=11"
alt="Sample image"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Lorem Ipsum
</p>
<button class="btn card_btn">Read More
</button>
</div>
</div>
</li>

CSS Code

.btn {
color: #ffffff;
padding: 0.8rem;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
font-weight: 400;
display: block;
width: 100%;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.12);
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cards_item {
display: flex;
padding: 1rem;
}
@media (min-width: 40rem) {
.cards_item {
width: 50%;
}
}
@media (min-width: 56rem) {
.cards_item {
width: 33.3333%;
}
}
.card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.card_content {
padding: 1rem;
background: linear-gradient(to bottom left, #4794d0 40%, #125788 100%);
}
.card_title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
margin: 0px;
}
.card_text {
color: #ffffff;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
font-weight: 400;
}

Carousel

Sample Image
Sample Image
Sample Image
Sample Image
Sample Image
Sample Image
HTML, CSS and JavaScript Code (Carousel)

HTML Code

<section>
<div id="container">
<div id="slider-container">
<span onclick="slideRight()" class="btn">
</span>
<div id="slider">
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=11"
alt="Sample Image" style="height: 200px;"></a>
</span></div>
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=10"
alt="Sample Image" style="height: 200px;"></a>
</span><div>
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=5"
alt="Sample Image" style="height: 200px;"></a>
</span></div>
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=11"
alt="Sample Image" style="height: 200px;"></a>
</span></div>
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=10"
alt="Sample Image" style="height: 200px;"></a>
<span><div>
<div class="slide"><span>
<img src="https://picsum.photos/500/300/?image=5"
alt="Sample Image" style="height: 200px;"></a>
</span></div>
</div>
<span onclick="slideLeft()" class="btn"></span>
</div>
</div>
</section>

CSS Code

#slider-container {
height: 300px;
position: relative;
overflow: hidden;
padding: 20px;
}
#slider-container .btn {
position: absolute;
top: calc(50% - 30px);
height: 30px;
width: 30px;
border-left: 8px solid black;
border-top: 8px solid black;
}
#slider-container .btn:hover {
transform: scale(1.2);
}
#slider-container .btn.inactive {
border-color: rgb(153, 121, 126)
}
#slider-container .btn:first-of-type {
transform: rotate(-45deg);
left: 10px
}
#slider-container .btn:last-of-type {
transform: rotate(135deg);
right: 10px;
}
#slider-container #slider {
display: flex;
width: 1000%;
height: 100%;
transition: all .5s;
}
#slider-container #slider .slide {
height: 90%;
margin: auto 10px;
display: grid;
place-items: center;
}
#slider-container #slider .slide span {
color: white;
font-size: 150px;
}
@media only screen and (min-width: 1100px) {
#slider-container #slider .slide {
width: calc(2.5% - 20px);
}
}
@media only screen and (max-width: 1100px){
#slider-container #slider .slide {
width: calc(3.3333333% - 20px);
}
}
@media only screen and (max-width: 900px) {
#slider-container #slider .slide {
width: calc(5% - 20px);
}
}
@media only screen and (max-width: 480px) {
#slider-container #slider .slide {
width: calc(10% - 20px);
}
}

JavaScript Code


<script>
var container = document.getElementById('container');
var slider = document.getElementById('slider');
var slides = document.getElementsByClassName('slide')
.length;
var buttons = document.getElementsByClassName('btn');
var currentPosition = 0;
var currentMargin = 0;
var slidesPerPage = 0;
var slidesCount = slides - slidesPerPage;
var containerWidth = container.offsetWidth;
var prevKeyActive = false;
var nextKeyActive = true;
window.addEventListener("resize", checkWidth);
function checkWidth() {
containerWidth = container.offsetWidth;
setParams(containerWidth);
}
function setParams(w) {
if (w < 551) {
slidesPerPage = 1;
} else {
if (w < 901) {
slidesPerPage = 2;
} else {
if (w < 1101) {
slidesPerPage = 3;
} else {
slidesPerPage = 4;
}
}
}
slidesCount = slides - slidesPerPage;
if (currentPosition > slidesCount) {
currentPosition -= slidesPerPage;
};
currentMargin = - currentPosition *
(100 / slidesPerPage);
slider.style.marginLeft = currentMargin + '%';
if (currentPosition > 0) {
buttons[0].classList.remove('inactive');
}
if (currentPosition < slidesCount) {
buttons[1].classList.remove('inactive');
}
if (currentPosition >= slidesCount) {
buttons[1].classList.add('inactive');
}
}
setParams();
function slideRight() {
if (currentPosition != 0) {
slider.style.marginLeft = currentMargin +
(100 / slidesPerPage) + '%';
currentMargin += (100 / slidesPerPage);
currentPosition--;
};
if (currentPosition === 0) {
buttons[0].classList.add('inactive');
}
if (currentPosition < slidesCount) {
buttons[1].classList.remove('inactive');
}
}
function slideLeft() {
if (currentPosition != slidesCount) {
slider.style.marginLeft = currentMargin -
(100 / slidesPerPage) + '%';
currentMargin -= (100 / slidesPerPage);
currentPosition++;
};
if (currentPosition == slidesCount) {
buttons[1].classList.add('inactive');
}
if (currentPosition > 0) {
buttons[0].classList.remove('inactive');
}
}
</script>

Modal

Marine Conservation

Steps


×
  • Stop using plastics.
  • Avoid overfishing.
  • Protect our coral reef.
  • Don't throw waste at any water source.
HTML, and CSS Code (Modal)

HTML Code

<a class="button" href="#popup1" >Marine Conservation
</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Steps</h2>
<br>
<a class="close" href="#">&times;</a>
<div class="content">
<ul>
<li>Stop using plastics.</li>
<li>Avoid overfishing.</li>
<li>Protect our coral reef.</li>
<li>Don't throw waste at any water source.</li>
</ul>
</div>
</div>
</div>

CSS Code

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width:749px){
.popup{
width: 70%;
}
}

Breadcrumb

  1. Home
  2. Products
  3. Reviews
HTML and CSS Code (Breadcrumb)

HTML Code

<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#"> Home </a></li>
<li class="breadcrumb-item">
<a href="#"> Products </a></li>
<li class="breadcrumb-item">
<a href="#"> Reviews </a></li>
</ol>

CSS Code

.breadcrumb{
padding: 10px 16px;
list-style: none;
background-color: #6dcff6;
}
.breadcrumb-item{
display: inline;
font-size: 18px;
}
.breadcrumb li+li:before{
padding: 8px;
color: black;
content: ">>";
}
.breadcrumb-item a{
color: #004080;
text-decoration: none;
}

Lists (Unordered and Ordered)


  1. Stop using plastics.
  2. Avoid overfishing.
  3. Protect our coral reef.
  4. Don't throw waste at any water source.
HTML Code (Lists)

Unordered List

<ul>
<li>Stop using plastics.</li>
<li>Avoid overfishing.</li>
<li>Protect our coral reef.</li>
<li>Don't throw waste at any water source.</li>
</ul>

Ordered List

<ol>
<li>Stop using plastics.</li>
<li>Avoid overfishing.</li>
<li>Protect our coral reef.</li>
<li>Don't throw waste at any water source.</li>
</ol>

Tooltip

This is a sample Joy Barua  tooltip

HTML and CSS Code (Tooltip)

HTML Code

<p>This is a
<span class="tooltip">sample
<span class="tooltiptext">Joy Barua</span></span>&nbsp;tooltip
</p>

CSS Code

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px solid #6dcff6;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}