Maud  Rosenbaum

Maud Rosenbaum

1604097420

Two Key Points of Containerisation You Need to Know by Heart

_What is containerisation and what’s so great about it anyway? _You may work with container-based applications every day at work, but there comes a time when an intern or a fresh graduate new joiner (or perhaps a non-IT colleague) in your team ask you these questions and you find yourself stopped in your track thinking: “where should I start?”.

This article presents the two key points about containerisation you need to know by heart:

  1. Isolation of Process
  2. Consistency

and how other benefits can be derived from these points.

#containers #containerization #containersforthelayman #containers-devops #kubernetes #openshift #docker #container-orchestration

What is GEEK

Buddha Community

Two Key Points of Containerisation You Need to Know by Heart
Maud  Rosenbaum

Maud Rosenbaum

1604097420

Two Key Points of Containerisation You Need to Know by Heart

_What is containerisation and what’s so great about it anyway? _You may work with container-based applications every day at work, but there comes a time when an intern or a fresh graduate new joiner (or perhaps a non-IT colleague) in your team ask you these questions and you find yourself stopped in your track thinking: “where should I start?”.

This article presents the two key points about containerisation you need to know by heart:

  1. Isolation of Process
  2. Consistency

and how other benefits can be derived from these points.

#containers #containerization #containersforthelayman #containers-devops #kubernetes #openshift #docker #container-orchestration

Hal  Sauer

Hal Sauer

1591203120

How to Install Wireguard on Ubuntu 18

In this tutorial we will learn what Wireguard is, what it is used for, how to install and configure it, and lastly, how to use it to it wisely.

#tutorials #end point #ifconfig #ipconfig #kernel #kernel module #keypair #netmask #network #network interface #permissions #point-to-point #ppa #private keys #public keys #ssh #systemctl #tunnel #tunneling #ubuntu #ubuntu 18.04 #ufw #umask #vpn #vpn port #wireguard

David mr

David mr

1624305600

SAFEMOON UPDATE - ALL YOU NEED TO KNOW ABOUT SAFEMOON AND SAFEMOON PREDICTION

SAFEMOON UPDATE - ALL YOU NEED TO KNOW ABOUT SAFEMOON AND SAFEMOON PREDICTION

This is all you need to know about safemoon and I provide my safemoon prediction. This is a huge safemoon update so make sure to watch this video until the end.
📺 The video in this post was made by Josh’s Finance
The origin of the article: https://www.youtube.com/watch?v=ZtX7ZIVcXH4
🔺 DISCLAIMER: The article is for information sharing. The content of this video is solely the opinions of the speaker who is not a licensed financial advisor or registered investment advisor. Not investment advice or legal advice.
Cryptocurrency trading is VERY risky. Make sure you understand these risks and that you are responsible for what you do with your money
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#bitcoin #blockchain #safemoon #safemoon #all you need to know about safemoon and safemoon prediction #safemoon update - all you need to know about safemoon and safemoon prediction

How to Create Responsive Profile Card Slider with HTML & CSS

In this tutorial, you'll learn how to create a responsive profile card slider with HTML & CSS. Learn how to make beautiful profile cards with sliding animation in HTML & CSS.
 

HTML CODE:

  <head>
    <meta charset="UTF-8">
    <!---<title> Responsive Our Team Section | codequs </title>---->
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <input type="radio" name="dot" id="one">
    <input type="radio" name="dot" id="two">
    <div class="main-card">
      <div class="cards">
        <div class="card">
         <div class="content">
           <div class="img">
            <!--- <img src="images/img1.jpg" alt="">-->
           </div>
           <div class="details">
             <div class="name">Andrew Neil</div>
             <div class="job">Web Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
            <!--- <img src="images/img2.jpg" alt="">--->
           </div>
           <div class="details">
             <div class="name">Jasmine Carter</div>
             <div class="job">UI Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
            <!-- <img src="images/img3.jpg" alt="">---->
           </div>
           <div class="details">
             <div class="name">Justin Chung</div>
             <div class="job">Web Devloper</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
      </div>
      <div class="cards">
        <div class="card">
         <div class="content">
           <div class="img">
             <!---<img src="images/img4.jpg" alt="">--->
           </div>
           <div class="details">
             <div class="name">Appolo Reef</div>
             <div class="job">Web Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
             <!--<img src="images/img5.jpg" alt="">---->
           </div>
           <div class="details">
             <div class="name">Adrina Calvo</div>
             <div class="job">UI Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
             <!--<img src="images/img6.jpeg" alt="">--->
           </div>
           <div class="details">
             <div class="name">Nicole Lewis</div>
             <div class="job">Web Devloper</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
      </div>
    </div>
    <div class="button">
      <label for="one" class=" active one"></label>
      <label for="two" class="two"></label>
    </div>
  </div>
</body>
</html>

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  position: relative;
}
body::before{
  content: '';
  position: absolute;
  width: 100%;
  background: #FF676D;
  clip-path: inset(47% 0 0 0);
  z-index: -1;
  height: 100%;
}
::selection{
  background:	#FF676D;
  color: #fff;
}
.container{
  max-width: 950px;
  width: 100%;
  overflow: hidden;
  padding: 80px 0;
}
.container .main-card{
  display: flex;
  justify-content: space-evenly;
  width: 200%;
  transition: 1s;
}
#two:checked ~ .main-card{
  margin-left: -100%;
}
.container .main-card .cards{
  width: calc(100% / 2 - 10px);
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  justify-content: space-between;
}
.main-card .cards .card{
  width: calc(100% / 3 - 10px);
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease;
}
.main-card .cards .card:hover{
  transform: translateY(-15px);
}
.cards .card .content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cards .card .content .img{
  height: 130px;
  width: 130px;
  border-radius: 50%;
  padding: 3px;
  background: #FF676D;
  margin-bottom: 14px;
}
.card .content .img img{
  height: 100%;
  width: 100%;
  border: 3px solid #ffff;
  border-radius: 50%;
  object-fit: cover;
}
.card .content .name{
  font-size: 20px;
  font-weight: 500;
}
.card .content .job{
  font-size: 20px;
  color: #FF676D;
}
.card .content .media-icons{
  margin-top: 10px;
  display: flex;

}
.media-icons a{
  text-align: center;
  line-height: 33px;
  height: 35px;
  width: 35px;
  margin: 0 4px;
  font-size: 14px;
  color: #FFF;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #FF676D;
  transition: all 0.3s ease;
}
.media-icons a:hover{
  color: #FF676D;
  background-color: #fff;
  border-color: #FF676D;
}
 .container .button{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px;
}
.button label{
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #fff;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.button label.active{
  width: 35px;
}
#one:checked ~ .button .one{
  width: 35px;
}
#one:checked ~ .button .two{
  width: 15px;
}
#two:checked ~ .button .one{
  width: 15px;
}
#two:checked ~ .button .two{
  width: 35px;
}
input[type="radio"]{
  display: none;
}
@media (max-width: 768px) {
  .main-card .cards .card{
    margin: 20px 0 10px 0;
    width: calc(100% / 2 - 10px);
  }
}
@media (max-width: 600px) {
  .main-card .cards .card{
    /* margin: 20px 0 10px 0; */
    width: 100%;
  }
}

#html #css 

How to Create an Image Clip Animation with Slider Controls using Only HTML & CSS

In this blog you’ll learn how to create an Image Clip Animation with Slider Controls using only HTML & CSS.

To create an Image Clip Animation with Slider Controls using only HTML & CSS. First, you need to create two Files one HTML File and another one is CSS File.

1: First, create an HTML file with the name of index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Clip Animation | Codequs</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="slide" id="one" checked>
      <input type="radio" name="slide" id="two">
      <input type="radio" name="slide" id="three">
      <input type="radio" name="slide" id="four">
      <input type="radio" name="slide" id="five">
      <div class="img img-1">
        <!-- <img src="images/img-1.jpg" alt="">
      </div>
      <div class="img img-2">
        <img src="images/img-2.jpg" alt="">
      </div>
      <div class="img img-3">
        <img src="images/img-3.jpg" alt="">
      </div>
      <div class="img img-4">
        <img src="images/img-4.jpg" alt="">
      </div>
      <div class="img img-5">
        <img src="images/img-5.jpg" alt="">
      </div>
      <div class="sliders">
        <label for="one" class="one"></label>
        <label for="two" class="two"></label>
        <label for="three" class="three"></label>
        <label for="four" class="four"></label>
        <label for="five" class="five"></label>
      </div>
    </div>
  </body>
</html>

2: Second, create a CSS file with the name of style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: -webkit-linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
}
.wrapper{
  position: relative;
  width: 700px;
  height: 400px;
}
.wrapper .img{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  clip-path: circle(0% at 0% 100%);
  transition: all 0.7s;
}
#one:checked ~ .img-1 img{
  clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .img-1 img,
#two:checked ~ .img-2 img{
  clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .img-1 img,
#three:checked ~ .img-2 img,
#three:checked ~ .img-3 img{
  clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .img-1 img,
#four:checked ~ .img-2 img,
#four:checked ~ .img-3 img,
#four:checked ~ .img-4 img{
  clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .img-1 img,
#five:checked ~ .img-2 img,
#five:checked ~ .img-3 img,
#five:checked ~ .img-4 img,
#five:checked ~ .img-5 img{
  clip-path: circle(150% at 0% 100%);
}
.wrapper .sliders{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
}
.wrapper .sliders label{
  border: 2px solid rgb(142,197,252);
  width: 13px;
  height: 13px;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five{
  width: 35px;
  border-radius: 14px;
  background: rgb(142,197,252);
}
.sliders label:hover{
  background: rgb(142,197,252);
}
input[type="radio"]{
  display: none;
}

Now you’ve successfully created an Image Clip Animation with Sliders using only HTML & CSS.

#html #css