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

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" cros...
Read more

React Project (Todo App)

-
Image
  Todo App (React ) Step 1: First create a project using create project comments -->create-react-app project_name Step 2: Next Open the live Server Means NPM servers -->npm start Step 3: Open your editors (ex: VS code)-->code . Step 3: Create a Firebase Project            REfer Firebase Documentation Step 4: Delete the Unuse Files Step 5: Code For App.js:- import   React , {  useState ,  useEffect  }  from   'react' ; import   Todo   from   './Todo' ; import  {  Button ,  FormControl ,  Input ,  InputLabel  }  from   '@material-ui/core' ; import   './App.css' ; import   db   from   './firebase' ; import   firebase   from   'firebase' ; function   App () {    const  [ todos ,  setTodos ] =  useState ([]);    const  [ input ,  setInput ] =  useState ( ''...
Read more

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