HTML, CSS and JavaScript playground

<body>

<div class="container">
  <nav class="navbar navbar-expand-lg fixed-top">
    <a class="navbar-brand" href="index.html">
      <img src="img/svg/logonav.svg" width="40%" height="40%" class="d-inline-block align-top" alt="">
    </a>
    <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item">
          <a class="nav-link" href="about/index.html">About</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

  <div class="dino-image">
  <img src="https://vignette.wikia.nocookie.net/jurassicpark/images/1/12/Velociraptor-detail-header.png/revision/latest?cb=20150420213742" width="500"/></div>
  

<div class="container" id="content" style="padding-top: 15%;">
  <div class="accordion" id="project-accordion">

<div class="card">
    <div class="card-header" id="headingOne">
      <h1 class="mb-0">
        <button class="btn btn-link" id="misacon-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Misacon : Digital Product Design
        </button>
      </h1>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#project-accordion">
      <div class="card-body">
      
       <div class="container">
          <div class="row project-type">
            <div class="col-sm">
              <h6>Digital Product Design</h6>
            </div>
          </div>
          <div class="row hero">
            <div class="col-sm ">
              <img src="img/misacon/hero.jpg">
            </div>
          </div>
          <div class="row brief">
            <div class="col-lg-8 col-sm-12 ">
              <p>Missing or unable to attend the concert is a big issue when it comes to your favourite band/singer. This project is create a connection of the digital space and physical space. 'Misacon', an livestream-concert application with VR technology to all the FOMOs to the concert. Giving the opportunities for people in different location to be a part of the a single special moment.</p>
            </div>
          </div>
          <div class="row content">

<div class="col-12 ">
              <h3>Live Concert is Anywhere</h3>
            </div>
            <div class="col-12">
              <img src="img/misacon/interaction.jpg">
            </div>
            <div class="col-12 ">
              <h3>Emoji is a way to <b>interact</b> between you and the artist</h3>
            </div>

<div class="col-12 ">
              <h3>Every heart moment</h3>
            </div>
            <div class="col-12">
                <img src="img/misacon/concert-hall.png">
            </div> 
            <div class="col-12">
                <img src="img/misacon/concert-board.jpg">
            </div>
            <div class="col-12 ">
              <h3>Book Your Seat on <b>Mobile Application</b></h3>
            </div>
            <div class="col-6">
              <img src="img/misacon/logo.png">
            </div>
            <div class="col-12 ">
              <h3>Pick the concert date</h3>
            </div>

<div class=" row">
              <div class="col-8 col-sm-6 col-md-4">
                <img src="img/misacon/app-detail.png">
              </div>
              <div class="col-8 col-sm-6 col-md-4">
                <img src="img/misacon/app-concert.png">
              </div> 
            </div>
            <div class="col-12 ">
              <h3>Select the experience plan</h3>
            </div>
            <div class="col-12 col-lg-9">
               <img src="img/misacon/app-plan.png">
            </div>
            <div class="col-12 ">
              <h3>Select your spot(s)</h3>
            </div>
            <div class="col-8 col-sm-6 col-md-4">
                <img src="img/misacon/app-seat.png">
              </div> 
        </div>
      </div>
      
      <div class="closing-accordion">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h1 class="mb-0">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Spotify Friends <span class="hide">: Redesign Application</span>
        </button>
      </h1>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#project-accordion">
      <div class="card-body">
      
        <div class="container">
          <div class="row project-type">
            <div class="col-sm">
              <h6>Music application redesign</h6>
            </div>
          </div>
          <div class="row hero">
            <div class="col-sm ">
              <img src="img/spotify/hero.jpg">
            </div>
          </div>
          <div class="row brief">
            <div class="col-lg-8 col-sm-12 ">
              <p>Spotify has a feature Ã¢â‚¬Å“Friend ActivityÃ¢â‚¬Å“ which allows the users to see their friends music playlist also allow users to see whatÃ¢â‚¬â„¢s their friends last listening.  This feature is only available on Spotify Desktop  version only and almost invisible on the application. Homepage of the application will be replaced with Ã¢â‚¬Å“Friend activityÃ¢â‚¬Å“. This will make the feature easy to access and visible to user. As the feature become the center of the application, this will add the value on Spotify that itÃ¢â‚¬â„¢s not just a basic music application but also a music community.</p>
            </div>
          </div>
          <div class="row content">

<div class="col-12 ">
              <h3>Easy to see Friends</h3>
              <p>Ã¢â‚¬Å“Friend ActivityÃ¢â‚¬Å“ become the homepage and the center of the application which allow users to see whatÃ¢â‚¬â„¢s the last listening of friendÃ¢â‚¬â„¢s music also see the sharing post from friends and people who they follow</p>
            </div>

<div class="col-12 ">
              <h3>Sharing while listening</h3>
            </div>
            <div class="col-12 col-md-9 col-lg-7">
              <img src="img/spotify/sharing.jpg">
            </div>

<div class="col-12 ">
              <h3>See if who have common taste in music with you . .</h3>
            </div>
            <div class="col-10 col-sm-8 col-md-8">
               <img src="img/spotify/mutual-friend.png">
            </div>
            <div class="col-12 ">
              <h3>Your posts, Your profile</h3>
            </div>
            <div class="col-10 col-lg-7">
                <img src="img/spotify/profile.jpg">
            </div> 
            <div class="col-12 ">
              <h3>Music functions still remain. . .</h3>
            </div>
            <div class="col-10 col-lg-6">
                <img src="img/spotify/nav.png">
            </div> 
          </div>
        </div>
      
      </div>
      <div class="closing-accordion">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingThree">
      <h1 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Lyft After Party : Self-Driving Car
        </button>
      </h1>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#project-accordion">
      <div class="card-body">
        
        <div class="container">
          <div class="row project-type">
            <div class="col-sm">
              <h6>Self-Driving Car Product Design</h6>
            </div>
          </div>
          <div class="row hero">
            <div class="col-sm-8 ">
              <img src="img/lyft/logo.png">
            </div>
          </div>
          <div class="row brief">
            <div class="col-lg-8 col-sm-12 ">
              <p>In this soon future, we will benefit from Self- Driving Car especially safety on the roads.  Lyft After Party is a Self-Driving Car Service that will be taking care of the party people throughout the ride to destination and make sure all the party people is safe throughout the ride</p>
            </div>
          </div>
          <div class="row content">
            <div class="col-12 ">
              <h3>Always back home safe after the night out</h3>
            </div>
            <div class="col-12 ">
              <img src="img/lyft/incar-ride.jpg">
            </div>

<div class="col-12 ">
              <h3>Everything you need to sober up!</h3>
            </div>
            <div class="col-6 ">
              <img src="img/lyft/feature.png">
              <img src="img/lyft/emergency.png" style="width: 60%; padding-top:3%;">
            </div>

<div class="col-12 ">
              <h3>We make sure your after party ride is <b>safe</b></h3>
            </div>
            <div class="col-12">
               <img src="img/lyft/incar-sleep-cam.png">
            </div>

<div class="col-12 ">
              <h3>Calling your night plan</h3>
            </div>
            <div class=" row">
              <div class="col-8 col-sm-6 col-md-4">
                <img src="img/lyft/app-home.png">
              </div>
              <div class="col-8 col-sm-6 col-md-4">
                <img src="img/lyft/app-plan.png">
              </div> 
            </div>

<div class="col-12 ">
              <h3>After your night is over, just make a call</h3>
            </div>
            <div class="col-8 col-sm-6 col-md-4">
                <img src="img/lyft/app-call.png">
            </div> 
            <div class="row">
              <div class="col-8 col-sm-8 col-md-6" style="padding-top: 7%;">
                <img src="img/lyft/car.png">
              </div>
              <div class="col-8 col-sm-6 col-md-4 col-lg-3">
                <img src="img/lyft/app-notification.png">
              </div>
            </div>
            <div class="col-12 ">
              <h3>If you are too drunk, we still take care of you</h3>
            </div>
            <div class="col-8 col-sm-6 col-md-4">
                <img src="img/lyft/app-assistant.png">
            </div>

</div>
        </div>
      
      </div>
      <div class="closing-accordion">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>

 
  <div class="card">
    <div class="card-header" id="headinFour">
      <h1 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
          The New Yorker Festival : Conference Branding
        </button>
      </h1>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFive" data-parent="#project-accordion">
      <div class="card-body">
        
        <div class="container">
          <div class="row project-type">
            <div class="col-sm">
              <h6>Conference Branding</h6>
            </div>
          </div>
          <div class="row hero">
            <div class="col-sm ">
              <img src="img/newyorker/logo.png">
            </div>
          </div>
          <div class="row brief">
            <div class="col-lg-8 col-sm-12 ">
              <p>Lecture/Talks Series Branding Design for "The New Yorker Festival", an annual event hosted by The New Yorker magazine that brings people from the different industry together also a major draw for cultural icons and advertisers alike. The New Yorker Festival is about bringing people together from different industries using typography to interpret the character of a different perspective from the inside to the outside.</p>
            </div>
          </div>
          <div class="row content">
            <div class="col-12 ">
              <img src="img/newyorker/street-wall.jpg">
            </div>
            <div class="col-12 ">
              <img src="img/newyorker/poster-subway.jpg">
            </div>
            <div class="col-12 ">
              <img src="img/newyorker/lamp-post.jpg">
            </div>

</div>
        </div>
      
      </div>
      <div class="closing-accordion">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>

  
 <div class="card">
    <div class="card-header" id="headinSix">
      <h1 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          UFO Museum : Branding
        </button>
      </h1>
    </div>
    <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#project-accordion">
      <div class="card-body">
        
        <div class="container">
          <div class="row project-type">
            <div class="col-sm">
              <h6>Rebranding</h6>
            </div>
          </div>
          <div class="row hero">
            <div class="col-12 col-sm-12 col-md-8 ">
              <img src="img/ufo/logo.png">
            </div>
          </div>
          <div class="row brief">
            <div class="col-lg-8 col-sm-12 ">
              <p>Redesign branding for UFO Museum across the platforms from prints, digital and environmental space. The inspiration for redesign came from how the idea of UFO is confidential from the government and how the story of its get manipulated on media. The secretive idea and official document are the leading elements used in the redesign.</p>
            </div>
          </div>
          <div class="row content">
            <div class="col-12 ">
              <img src="img/ufo/logo-thumb.gif">
            </div>
            <div class="col-12 ">
              <img src="img/ufo/stationary.jpg">
            </div>
            <div class=" row">
              <div class="col-12 col-md-6 ">
                <img src="img/ufo/namecard.jpeg">
              </div>
              <div class="col-12 col-md-6">
                <img src="img/ufo/letterhead.001.png">
              </div> 
            </div>
            <div class="col-12" style="border-top: 1px solid #FC4444;">
              <h3>Exhibition : They Are Watching</h3>
              <p>Ã¢â‚¬Å“Alien abduction is a common and highly documented phenomenon; proof of alien abduction in the form of objects implanted in peopleÃ¢â‚¬â„¢s bodies is not. This exhibition chronicles several close encounters with alien abductees who have been held captive, probed, examined and had objects implanted in their bodies.</p>
            </div>
            <div class=" row">
              <div class="col-12">
                <img src="img/ufo/exhibition1.jpeg">
              </div>
              <div class="col-12 col-md-6 ">
                <img src="img/ufo/exhibition2.jpeg">
              </div>
              <div class="col-12 col-md-6">
                <img src="img/ufo/exhibition3.jpeg">
              </div> 
            </div>
            <div class="col-12">
                <h3>Invitation</h3>
            </div>
            <div class="col-12">
                <img src="img/ufo/invitation.gif">
            </div>
            <div class="col-12">
                <h3>Advertisement</h3>
            </div>
            <div class=" row">
              <div class="col-12">
                <img src="img/ufo/advertise.jpeg">
              </div>
              <div class="col-12 col-md-6 ">
                <img src="img/ufo/advertise2.jpeg">
              </div>
              <div class="col-12 col-md-6">
                <img src="img/ufo/advertise3.jpeg">
              </div> 
            </div>

</div>
        </div>
      
      </div>
      <div class="closing-accordion">
        <button class="btn btn-link " type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>

</div>
</div>

  <div class="ending">
  </div>

</div></body></html>

.navbar{
	padding: 1% 2% 1% 2%;
}

.navbar a{
	color:#0D19A3;
	font-size: 1.2em;
}
.nav-link{
	text-align: right;
}
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;}

.ending{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #0D19A3;
	margin: 5% auto 7% auto;
}

body{
  overflow-y: scroll;
  color: #4A4A4A;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

.accordion .btn-link, .btn .btn-link .collapsed{
	color: #0D19A3;
	font-weight:200;
	font-size: 3rem;
	background-color:transparent;
	font-family: 'Montserrat', sans-serif;

}

.accordion .btn-link.focus, .btn-link:focus {
    text-decoration: none;
    font-weight: 700;
    color:#FC4444;

}

.accordion .btn-link:hover {
    color:#FC4444;
    text-decoration: none;
}
.accordion .btn-link:visited {
    color:#0D19A3;;
    text-decoration: none;
    font-weight: 200;
}

.card{
	border: 0;
}
.card-header{
	background-color: rgba(0,0,0,0);
	border-bottom:1px solid #FC4444;
	text-align: center;
}
.card-body{
	padding:0;
}

.closing-accordion button i{
	color: #FC4444;

}

.closing-accordion{
	text-align: center;
	padding: 5% 0 5% 0;
	border-top:1px solid #FC4444;
	margin-top:7%;
}

/*Project*/
.project-type{
	padding: 2%;
	text-align: center;
}
.hero img{
	width: 100%;
	padding: 2% 0 2% 0;
}
.brief{
	justify-content: center;
	padding-bottom: 5%;
}
.content{
	text-align: center;
	border-top:1px solid #FC4444;
	padding-top:2%;
}
.content img{
	width: 100%;
}
.content .col-12,.col-6{
	padding: 2.5% 0 2.5% 0;
}
.row {
	padding:3% 0 3% 0;
	justify-content: center;
}

.about .row {
	justify-content: left;
	padding: 0%;
}

.resume{
	padding: 0% 2% 0% 2%;
	border-left: 1px solid #FC4444; 
}
.social a{
 	color: #FC4444;
 	font-size: 1.5rem;
 	padding: 0 2% 0 0;
}
.button-resume{
	color: #fff;
	border-radius: 50%; 
	margin: auto;
	width: 120px;
	height: 120px;
  	vertical-align: middle;
  	text-align: center;
  	justify-content: center;
}
.spacer{
	height: 5%;
}
h5{
	font-weight: 700;
	color: #0D19A3;
}
h2{
	color: #0D19A3;
}

/*responsive*/

@media screen and (max-width: 992px) {
.resume{
	padding: 3% 0% 3% 2%;
	border-top: 1px solid #FC4444; 
	border-left: 0px solid #FC4444; 
	padding-left: 1%;
	}
.col-md-1{
    display: none;
    }
.col-md-2{
    text-align: left;
  }

}

@media screen and (max-width: 768px) {
.accordion .btn-link, .btn .btn-link .collapsed h1{ 
	font-size: 2rem; 
}

}
.dino-image{
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (max-width: 576px) {
.accordion .btn-link, .btn .btn-link .collapsed h1{ 
	font-size: 1rem; 
}
#content{
	padding-top: 30%;
}

}