Proposed Cuipo Profile Design

In this example below you will see how to do a Proposed Cuipo Profile Design with some HTML / CSS and Javascript

This might be used for the users profile page showing them the number of square meters of the rainforest they have saved from each of the cuipo preserves.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Proposed Cuipo Profile Design</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://www.cuipo.org/Portals/_default/Skins/CuipoV3/cssfinal/mycuipo.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="cuipoprofile"> <h1>Kevin Forte</h1> <div class="profile-picture profile-panama" style="background-image: url('https://www.cuipo.org/v3/images/flags/64/PA.png')"></div> <div class="profile-picture" style="background-image: url('https://www.cuipo.org/i.ashx?fbl=577330338')"></div> <div class="profile-picture profile-brazil" style="background-image: url('https://www.cuipo.org/v3/images/flags/64/BR.png')"></div> <div class="profile-stats"> <h2 class="brazil">Brazil<span>13 M<sup>2</sup></span></h2> <h2 class="panama">Panama<span>10 M<sup>2</sup></span></h2> </div> <div class="profile-banner"> <img src="https://www.cuipo.org/v3/images/banners/home/CuipoHomeMain11.jpg" alt="Profile banner" /> </div> </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

Comments