module-3

-

 BRAKING BAD


HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>module 3</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap
.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP
+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8
/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="center">
      <img src="images/logo.png" alt="" />
    </header>
    <div class="container">
      <div class="row">
        <div id="cards_container" class="col">
          <div class="card" style="background-color: black">
            <div class="card-inner">
              <div class="card-front">
                <img
                  src="https://vignette.wikia.nocookie.net/breakingbad/images/
b/b3/StaceyEhrmantraut.png/revision/latest?cb=20150310150049"
                  alt=""
                />
              </div>
              <div class="card-back">
                <div style="text-align: center">
                  <img
                    src="https://vignette.wikia.nocookie.net/breakingbad/images/
b/b3/StaceyEhrmantraut.png/revision/latest?cb=20150310150049"
                    alt=""
                  />
                </div>
                <h1>shivani</h1>
                <ul>
                  <li><strong>Actor Name:</strong> Kerry Condon</li>
                  <li><strong>Nickname:</strong> Stacey</li>
                  <li><strong>Birthday:</strong> Unknown</li>
                  <li><strong>Status:</strong> ?</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>


CSS CODE

body {
    background: #000 url(../images/background.jpg) no-repeat 50% / cover;
    height: 100vh;
    color: #fff;
  }
  .center {
    display: flex;
    justify-content: center;
  }
  
  .center img {
    width: 200px;
    margin-top: 100px;
  }
  
  #cards_container {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding: 50px;
  }
  .card {
    cursor: pointer;
    background-color: transparent;
    height: 300px;
    perspective: 1000px;
  }
  
  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .card:hover .card-inner {
    transform: rotateY(180deg);
  }
  
  .card-back,
  .card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
  }
  
  .card-back {
    background-color: hsla(0, 0%, 100% 0.91);
    color: rgb(255, 255, 255);
    padding: 20px;
    transform: rotateY(180deg);
  }
  
  .card img {
    width: 100%;
  
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .card-back img {
    margin: auto;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .card h1 {
    font-size: 25px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  
  .card li {
    list-style: none;
    padding-bottom: 10px;
  }
  
  @media (max-width: 800px) {
    #cards_container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 500px) {
    #cards_container {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  
  


JS CODE

///js 

let url = "https://breakingbadapi.com/api/characters";
let allnamecontainer = document.getElementById("cards_container");

fetch(url)
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
    data.forEach((dataitem) => {
      let cardtemplate = `
<div class="card" style="background-color: black">
<div class="card-inner">
  <div class="card-front">
    <img
      src="${dataitem.img}"
      alt=""
    />
  </div>
  <div class="card-back">
    <div style="text-align: center">
      <img
        src="${dataitem.img}"
        alt=""
      />
    </div>
    <h1>${dataitem.name}</h1>
    <ul>
      <li><strong>Actor Name:</strong> ${dataitem.portrayed}</li>
      <li><strong>Nickname:</strong>  ${dataitem.nickname}</li>
      <li><strong>Birthday:</strong> ${dataitem.birthday}</li>
      <li><strong>Status:</strong> ${dataitem.status}</li>
    </ul>
  </div>
</div>
</div>
`;

      allnamecontainer.insertAdjacentHTML("afterbegin", cardtemplate);
    });
  });

Comments

Post a Comment

Popular posts from this blog

Switching Tab in wix

-
Image
Multi State Boxes STEPS:- 1) First of all please on development mode in wix. 2) Click the + ( add) icon. 3) Select and click interactive 4) And select and drag and drop Boxes -> Multi state boxes. 6) And manage and rename state boxes like repeater  7) Add the code -> open code corvid  terminal and past the following code and changes the accordingly  8) code => $w.onReady( function  () {                 $w( '# add button id' ).onClick(() => {         $w( '# add state box id' ).changeState( " add box name edited " );     });       $w( '# next button id ' ).onClick(() => {         $w( '# add state box id ' ).changeState( " add box name " );     }); });  
Read more

Culture Interactive Project Research

-
 Culture Interactive Error In Code: Ui Is note Responsive. Many Dependencies Is Installed But Never Used. React is a single-page application but our project page is refreshed. Add the account is work but the data storing time page is refreshed Also Deleting time refreshed. Only Account Added and project add functionality are mentioned. In signup and login, functionality is mentioned but not stored data in firestore. Also, Contributor details are note added. In code, most of the code is hardcoded not soft coded. Folder Structure: public 📂 👇               index.html  📂 👇                                        All HTML header section details are available here.                                        👉 Google Fonts Is CDN Mentioned  Roboto.                                  👉  R emix-Icons CDN Mentioned                                         👉  Font Awesome Icon CDN Mentioned                                  👉  Bootstrap CSS CDN Mentioned  Version 5.0.2                            
Read more

Bootstrap /Flex-Boxs / Grids

-
Image
 Bootstrap Introduction:-                                 Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites. How To Accesses Bootstrap?                                                 First Link The Bootstrap CDN in HTML file in the header section.                 Like CSS CDN :- <link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin= "anonymous" > <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin= "anonymous" ></script> Also JS CDN:- <script src= "https://code.jquery.com/jquery-3.5.1. slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5n
Read more