/* Add property modal */
.add-property {
position: relative;
width: 60rem;
height: 35rem;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 15px;
}
.modal-title {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.close {
background-color: transparent;
border: none;
}
#footer-btn {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border: 0.1em solid black;
border-radius: 10px;
width: 5em;
height: 2.5em;
font-weight: 600;
margin-bottom: 1.2em;
}
.add-prop {
background-color: #3498db;
color: white;
}
.add-prop:hover {
background-color: rgb(12, 65, 180);
}
.add-inpt {
outline: none;
border-width: 0 0 0.17em;
border-color: black;
border-radius: 5px;
width: 15em;
height: 2em;
text-align: center;
}
.prop-info-row {
height: 15em;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prop-info-col {
height: 2em;
}
.add-inpt::placeholder {
text-align: center;
}
.main-add-row {
width: 50rem;
height: 26rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}
#property-types {
background-color: white;
height: 2.5em;
width: 13em;
border-radius: 5px;
}
/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
height: 100%;
}
.side-nav .nav-menu {
list-style: none;
padding: 40px 0;
width: 13em;
background-color: #3498db;
}
.side-nav .nav-item {
position: relative;
padding: 0.7em 1.5em;
position: relative;
top: 42%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-item.active {
background-color: #fff;
box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}
.nav-item.active a {
color: #2980b9;
}
.nav-item a {
text-decoration: none;
color: #fff;
}
.menu-text {
padding: 0 20px;
}
.side-nav .nav-item.active::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 150%;
width: 20px;
border-bottom-right-radius: 25px;
box-shadow: 0 20px 0 0 #fff;
}
.side-nav .nav-item.active::after {
content: "";
position: absolute;
background-color: transparent;
top: 100%;
right: 0;
height: 150%;
width: 20px;
border-top-right-radius: 25px;
box-shadow: 0 -20px 0 0 #fff;
}
/* UPLOAD IMAGE STYLE */
:root {
--clr-white: rgb(255, 255, 255);
--clr-black: rgb(0, 0, 0);
--clr-light: rgb(245, 248, 255);
--clr-light-gray: rgb(196, 195, 196);
--clr-blue: rgb(63, 134, 255);
--clr-light-blue: rgb(171, 202, 255);
}
/* End General Styles */
/* Upload Area */
.upload-area {
width: 100%;
max-width: 25rem;
background-color: var(--clr-white);
box-shadow: 0 5px 10px rgb(218, 229, 255);
border: 2px solid var(--clr-light-blue);
border-radius: 24px;
padding: 1rem 1.875rem 0rem 1.875rem;
margin: 0.625rem;
text-align: center;
}
/* Header */
.upload-area__title {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 0.3125rem;
}
.upload-area__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin-top: 0;
}
.upload-area__tooltip {
position: relative;
color: var(--clr-light-blue);
cursor: pointer;
transition: color 300ms ease-in-out;
}
.upload-area__tooltip:hover {
color: var(--clr-blue);
}
.upload-area__tooltip-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -125%);
min-width: max-content;
background-color: var(--clr-white);
color: var(--clr-blue);
border: 1px solid var(--clr-light-blue);
padding: 0.625rem 1.25rem;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: none 300ms ease-in-out;
transition-property: opacity, visibility;
}
.upload-area__tooltip:hover .upload-area__tooltip-data {
opacity: 1;
visibility: visible;
}
/* Drop Zoon */
.upload-area__drop-zoon {
position: relative;
height: 13.8rem;
/* 180px */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2px dashed var(--clr-light-blue);
border-radius: 15px;
margin-top: 1.1rem;
cursor: pointer;
transition: border-color 300ms ease-in-out;
}
.upload-area__drop-zoon:hover {
border-color: var(--clr-blue);
}
.drop-zoon__icon {
display: flex;
font-size: 3.75rem;
color: var(--clr-blue);
transition: opacity 300ms ease-in-out;
}
.drop-zoon__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin: 0;
margin-top: 0.625rem;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
opacity: 0.7;
}
.drop-zoon__loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
color: var(--clr-light-blue);
z-index: 10;
}
.drop-zoon__preview-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0.3125rem;
border-radius: 10px;
display: none;
z-index: 1000;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__preview-image {
opacity: 0.8;
}
.drop-zoon__file-input {
display: none;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
border-color: var(--clr-blue);
}
.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
opacity: 0.7;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
display: none;
}
/* File Details Area */
.upload-area__file-details {
height: 0;
visibility: hidden;
opacity: 0;
text-align: left;
transition: none 500ms ease-in-out;
transition-property: opacity, visibility;
transition-delay: 500ms;
}
/* (duploaded-file--open) Modifier Class */
.file-details--open {
height: auto;
visibility: visible;
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
Property</button>
<form action="" enctype="multipart/form-data" method="POST" id="id_ajax_upload_form">
{% csrf_token %}
<div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content add-property">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body" style="padding: 0;">
<div class="row g-0 main-add-row">
<div class="col-sm-3" style="padding: 0;">
<nav class="side-nav">
<ul class="nav-menu">
<li class="nav-item active" id="img-nav-link">
<a href="#">
<i class="fa-solid fa-file-arrow-up"></i>
<span class="menu-text">Upload Image</span>
</a>
</li>
<li class="nav-item" id="prop-info-nav-link">
<a href="#">
<i class="fa-solid fa-house-chimney-crack"></i>
<span class="menu-text">Propery Info</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">
<!-- UPLOAD IMAGE SECTION START -->
<div id="uploadArea" class="upload-area" data-target="img-nav-link">
<!-- Header -->
<div class="upload-area__header">
<h1 class="upload-area__title">Upload your file</h1>
<p class="upload-area__paragraph">
File should be an image
<strong class="upload-area__tooltip">
Like
<span class="upload-area__tooltip-data"></span>
<!-- Data Will Come From Js -->
</strong>
</p>
</div>
<!-- End Header -->
<!-- Drop Zoon -->
<div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
<span class="drop-zoon__icon">
<i class='bx bxs-file-image'></i>
</span>
<p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
<span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
<img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
</div>
<!-- End Drop Zoon -->
<!-- File Details -->
<div id="fileDetails" class="upload-area__file-details file-details">
<div id="uploadedFile" class="uploaded-file">
<div class="uploaded-file__icon-container">
<i class='bx bxs-file-blank uploaded-file__icon'></i>
<span class="uploaded-file__icon-text"></span>
<!-- Data Will be Comes From Js -->
</div>
<div id="uploadedFileInfo" class="uploaded-file__info">
<span class="uploaded-file__name">Project 1</span>
<span class="uploaded-file__counter">0%</span>
</div>
</div>
</div>
<!-- End File Details -->
</div>
<!-- UPLOAD IMAGE SECTION END -->
<!-- PROPERTY INFO START -->
<div class="row g-0 justify-content-center prop-info-row" data-target="prop-info-nav-link" style="display: none;">
<div class="col-md-8 prop-info-col">
<p style="font-weight: 600;">Property Type</p>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col">
<select name="property-types" id="property-types">
<option value="volvo">Tenament</option>
<option value="saab">Car</option>
<option value="opel" selected>Helicopter</option>
<option value="audi">Space Shuttle</option>
</select>
<div class="input-group mb-3 ms-3">
<span class="input-group-text" id="basic-addon1">OR</span>
<input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
</div>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-5">
<input type="text" id="prop-name" class="add-inpt" placeholder="Property Name" autocomplete="off">
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-3">
<input type="text" id="prop-address" class="add-inpt" placeholder="Property Address" autocomplete="off">
</div>
</div>
<!-- PROPERTY INFO END -->
</div>
</div>
</div>
<div class="modal-ftr">
<button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
I have been using AJAX recently with DJANGO to send text data. It has been working smoothly and feels an easy method. But I cant understand and there no proper resource to learn to send images with AJAX and save to Django Database.
HTML:
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
JS:
$(".add-prop").click(function() {
var data = new FormData();
data.append("image", $("#fileInput-single")[0].files[0])
data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
$.ajax({
method: "POST",
url: "{% url 'upload-prop-images' %}",
processData: false,
contentType: false,
mimeType: "multipart/form-data",
data: data,
success: function(data) {
if (data.status == "Upload Done") {
console.log("Uploading Done successfully")
}
}
})
});
models.py
class Property(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
prop_images = models.ImageField(upload_to="prop_images")
views.py
def uploadPropImages(request):
image = request.POST['image']
property_new = Property(user_id=request.user.id, prop_images=image)
property_new.save()
return JsonResponse({'status': 'Upload Done'})
urls.py
urlpatterns = [
path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]
There is one tutorial using the forms.py file but I don't want to create a forms.py file.
HTML
<form id="upload-file" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<button type="submit" class="btn btn-success">Upload</button>
</form>
JS
$('body').on('submit','#upload-file',function(e){
e.preventDefault()
var formData = new FormData(this);
$.ajax({
url:'/url/',
type: 'POST',
data: formData,
success: function (response) {
},
error: function (response) {
},
cache: false,
contentType: false,
processData: false
});
VIEWS.py
def fileupload(request):
if request.method=="POST":
property = Property()
property.prop_images = request.FILES['file_name']
property.user = self.request.user.username
property.save()
# Can update response as per requirement.
# Can Add `Status`: Success/Failed to make it more clear.
return JsonResponse({"Message":"File Uploaded Successfully"})
return JsonResponse({"Message":""})
screen shot of navigation menu:
I created two grids as shown below, the first to layout the page and second to layout the menu items. I want the header to remain in place at the top. The links no longer work.
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
-------------------
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text" >FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"> <img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
<main>
I think your links do not work because you put their text outside of the <a></a> tags. You have to put it between the tags like this:
FARM
Here is your code with the links working as expected:
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
}
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text">FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"><img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
</div>
Beginner here.
I'm trying to figure out how to put 5 elements on my nav bar.
First element is heading and the other for are li's.
Hopefully someone can help!
I want to get the following result:
each element fills up 20% of the width
But what I get is this.
Not equally distributed space
Below the snippet.
body {
width: 960px;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
width: 960px;
}
#navigation h2 {
display: inline;
width: 20%;
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation ul {
list-style-type: none;
display: inline;
font-size: 0px;
margin: 0;
}
#navigation ul a {
display: inline-block;
width: 20%;
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<h2>Pagename</h2>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</ul>
</div>
</body>
</html>
You can achieve this easily by using flexbox feature.
I slightly edited your code to
replace ul by a div element (since you don't use li items)
replaced body width by 100% to make it working with the snippet display (this one is just for a good-looking display in the answer, you can replace it by your pixel value. Also div width style is by default set to 100% (it's a block displayed item), you don't need to set it for the div#navigation element.
Update. I added the Pagename heading to the equally distributed items to fit the design you want (according to the screenshot).
body {
width: 100%;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
}
#navigation #nav-items {
list-style-type: none;
justify-content:space-between;
display: flex;
font-size: 0px;
margin: 0;
}
#navigation h2 {
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation #nav-items a {
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<div id="nav-items">
<h2>Pagename</h2>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</div>
</div>
</body>
</html>
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?
SO I am working on a memory game and I got the cards to flip nicely, but I whenever I click to flip one, it flips them all. I would rather use a methos that is not giving each and every card an ID if possible...please help.
HTML
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
</div>
CSS
.cardsContainer {
width: 230px;
height: 320px;
position: relative;
border: 1px dashed red;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin: 20px 10px 10px 10px;
display: inline-block; } .card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%; } .card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; } .card .front { } .card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg ); } .card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg ); }
JS
function flip() {
$('.card').toggleClass('flipped');
}
The function you show is not JavaScript, but JQuery. In JQuery, $('.card') means "all the elements with class 'card'". What you need to do is attach a single onclick() function to each of the card objects that only flips itself.
Try changing the HTML to onclick="flip(this)", and the change the flip function to only change the element passed to it:
function flip(e) { e.toggleClass('flipped'); }