Border box example

In this example below you will see how to do a Border box example with some HTML / CSS and Javascript

This example demonstrates the use of css properties box sizing

Thumbnail
This awesome code was written by jakubtursky, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jakubtursky ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Border box example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapperMain">
<h1 class="heading-title">Border Box Example</h1>
	<div class="wrap group">
		<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In asperiores, ipsa, amet hic, optio iusto quisquam sit quis repellendus esse quos qui consequatur. Magnam dicta enim dolore consequuntur provident quae!</section>
		<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem fuga deserunt autem animi odit reiciendis corrupti excepturi atque velit quibusdam suscipit, iure, dolore natus omnis enim dolor. Veritatis, ratione, repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, ratione consectetur sequi minima voluptate commodi maiores nemo vel natus nesciunt officiis beatae iste quisquam dignissimos quae, nobis temporibus dolore molestiae.</section>
		<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus iusto repellat odit, libero perferendis perspiciatis sit cum esse delectus magni quisquam doloremque deserunt minima aperiam itaque. Incidunt doloribus nisi dolor.</section>
		<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi sunt dolores quibusdam illum molestiae repudiandae officia veritatis optio, voluptatibus vel, ducimus veniam dolor consequuntur adipisci voluptatem ab cumque debitis maiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cumque quas natus, velit blanditiis unde, numquam necessitatibus. Voluptatibus in deserunt, delectus reiciendis aliquid, repellendus illum nostrum quam, modi omnis eos!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias esse temporibus dolore maiores at, corporis voluptates aliquam adipisci. Dicta voluptates voluptatem in, ratione tempora minus, magni facere cupiditate eveniet. Possimus!</section>
	</div>
     <footer>
    <div class="about-me-img">
      <a href="http://jakubtursky.studenthosting.sk/?lang=en">
        <img src="https://www.mediafire.com/convkey/722e/qk13jrjdq7z45k1zg.jpg" alt="Jakub Turský" width="110px" height="110px">
      </a>
        <div class="authorWindowWrapper">
            <div class="authorWindow">
              <p>Border box example <br>
                Created by <a href="http://jakubtursky.studenthosting.sk/?lang=en"><strong>Jakub Turský</strong></a> <br>
                For next info about me you can visit me site ( click on my image, name, or copy url www.jakubtursky.studenthosting.sk/?lang=en ) <br>
              </p>
            </div>
        </div>
  </div>
</footer>
  
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jakubtursky/border-box-example-PwZEmQ */
@import url('https://fonts.googleapis.com/css?family=Averia+Sans+Libre');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


html{
	box-sizing: border-box;
}
*, *:before, *:after{
	box-sizing: inherit;
}

body{
	padding: 25px;
}

.heading-title{
	max-width: 1024px;
	margin: 10px auto 80px;
	font-size: 78px;
	line-height: 90px;
	text-align: center;
	text-shadow: 2px 2px 4px #7D9D95, 0px 0px 0px black, 3px 3px 5px white;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	color: rgba(84, 120, 125, 1);
}

.wrap{
	max-width: 1024px;
	margin: 0 auto;
}

section{
	color: white;
	font-size: 16px;
	line-height: 22px;
	background: #9F3FA3;
	border-radius: 9px;
	margin-bottom: 25px;
	padding: 20px;
	float:left;
	width: 23.5%;
	margin-right: 2%;
	min-height: 300px;
}

section:nth-child(1){
	font-family: 'Averia Sans Libre';
	background: rgba(138, 184, 168, 0.8);
}

section:nth-child(2){
	font-family: 'Averia Sans Libre';
	background: #6B9997;
}

section:nth-child(3){
	font-family: 'Averia Sans Libre';
	background: #54787D;
}

section:nth-child(4){
	font-family: 'Averia Sans Libre';
	background: #4E6B66;
	margin-right: 0;
}


.group:before, .group:after{
	content: " ";
	display: table;
}

.group:after{
	clear: both;
}


/* AUTHOR LINK */


footer{
  z-index: 100;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer p {
color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  opacity: 0;
    word-wrap: break-word;
  font-family: 'Open Sans';
  width: 100%;
  line-height: 25px;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  margin: 0;
}

footer .authorWindow a{
  text-decoration: none;
}

footer p strong {
    color: rgba(255, 255, 255, 0.9);
  margin-left: 5px;
  cursor:pointer;
}

.about-me-img {
  width: 120px;
  height: 120px;
  left: 10px;
  /* bottom: 30px; */
  position: relative;
  border-radius: 100px;
  border: 1px solid #4A5F67;
}


.about-me-img img {
  margin-top: 8px;
  margin-left: 5px;
}


.authorWindow{
  width: 600px;
  background: #4A5F67;
  padding: 22px 20px 22px 20px;
  border-radius: 5px;
  overflow: hidden;
}

.authorWindowWrapper{
  display:none; 
  left: 110px;
  bottom: -20px;
  padding-left: 30px;
  position: absolute;
}

.wrapperMain {
  min-height: 100%;
  position: relative;
}


.trans{
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  transition: all 500ms ease;
}

@media screen and (max-width: 768px) {
    .authorWindow{
         width: 210px;
    }

    .authorWindowWrapper{
             bottom: -140px;
  margin-bottom: 20px;
    }

    footer p{
          font-size: 14px;
    }
}

/*Downloaded from https://www.codeseek.co/jakubtursky/border-box-example-PwZEmQ */
$(document).ready(function() {
 
  	/* AUTHOR LINK */
     $('.about-me-img img, .authorWindowWrapper').hover(function(){
            $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
        }, function(){
            //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
        });
  
});

Comments