Scribd
Upload
5 views

css-micro-codes

Uploaded by

moreh5638
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

css-micro-codes

Uploaded by

moreh5638
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smartphone Showcase</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header>
<h1>Smartphone</h1>

<h1> Showcase</h1>
<nav>
<ul>
<li><a href="#smartphones">Smartphones</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="smartphones">
<h2>Featured Smartphones</h2>
<div id="smartphone-container" class="smartphone-container"></div>
</section>

<section id="contact">
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button href="mailto:[email protected]">Send email</button>
</form>
</section>

<div id="modal" class="modal">


<div class="modal-content">
<span class="close">&times;</span>
<h3 id="modal-title"></h3>
<p id="modal-description"></p>
<p id="modal-specifications"></p>
<p id="modal-battery"></p>
<p id="modal-processor"></p>
<p id="modal-price"></p>
<p id="modal-rating"></p>

</div>
</div>

<footer>
<p>© 2024 Smartphone Showcase</p>
</footer>

<script src="js/script.js"></script>
</body>
</html>

.css

body {
font-family: 'Castellar', sans-serif;
margin: 0;
padding: 0;
background-color: #000000;
}

header {
background: linear-gradient(to right, #4caf50, #2196f3);
color: #fff;
padding: 300px 0;
text-align: center;
}

a{

max-width: 100%;
height: auto;
border-radius: 8px;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

section {
padding: 50px;
margin: 50px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
color: #333;
}

.smartphone-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.smartphone {
background-color: #fff;
border: 2px solid #4caf50;
border-radius: 10px;
padding: 10px;
margin: 10px;
text-align: center;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
width: 220px;
}

.smartphone:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.smartphone img {
max-width: 100%;
height: auto;
border-radius: 8px;
}

form {
display: flex;
flex-direction: column;
align-items: center;
}

form input, form textarea {


width: 80%;
padding: 10px;
margin: 5px 0;
border: 2px solid #4caf50;
border-radius: 5px;
}

form input:focus, form textarea:focus {


border-color: #2196f3;
}

form button {
width: 84%;
padding: 10px;
background: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}

form button:hover {
background: #2196f3;
}

footer {
text-align: center;
padding: 20px 0;
background: #333;
color: #fff;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 10px;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.js

const smartphones = [
{
model: "Google Pixel 9",
img: "images/pixel.jpeg",
specifications: "6.3\" Display, 128GB Storage, 50MP Camera",
battery: " 4700 mAh",
processor: "Google Tensor G4",
description: "This smartphone offers a sleek design and powerful
performance.",
price: "Rs.1,24,000",
rating: "4.5/5"
},
{
model: "Iphone 15 Pro Max",
img: "images/15prom.webp",
specifications: "6.7\" Display, 1TB Storage, 48MP Camera",
battery: " 4700 mAh",
processor: "A17 Pro Chip , Hexa Core",
description: "Experience the best in photography and gaming.",
price: "Rs.1,43,000",
rating: "4.8/5"
},
{
model: "Samsung Galaxy S24 Ultra",
img: "images/s24.webp",
specifications: "6.8\" Display, 512GB Storage, 200MP Camera",
battery: " 5000 mAh",
processor: "Snapdragon 9 Gen 3",
description: "A budget-friendly option with excellent features.",
price: "1,67,000",
rating: "4.5/5"
},
{
model: "Oneplus 12 ",
img: "images/112.jpg",
specifications: "6.7\" Display, 512GB Storage, 50MP Camera",
battery: " 5500 mAh",
processor: "Snapdragon 8 Gen 3",
description: "A budget-friendly option with excellent features.",
price: "Rs.41,999",
rating: "4.2/5"
},
{
model: "Motorola Edge 40 Pro",
img: "images/moto40pro.jpeg",
specifications: "6.5\" Display, 512GB Storage, 50MP Camera",
battery: " 4400 mAh",
processor: "Dimensity 8020",
description: "A budget-friendly option with excellent features.",
price: "Rs.28,999",
rating: "4.1/5"
},
{
model: "ViVo X Fold 3 Pro",
img: "images/vivoxfold.jpg",
specifications: "8.03\" Display, 512GB Storage, 64MP Camera",
battery: "5700 mAh",
processor: "Snapdragon 8 GEN 3 , 3.3 GHz",
description: "A budget-friendly option with excellent features.",
price: "Rs.1,67,000",
rating: "4.3/5"
},
{
model: "Oppo Find X7 Ultra AI Phone",
img: "images/oppo.webp",
specifications: "6.8\" Display, 512GB Storage, 50MP Camera",
battery: "5000 mAh",
processor: "Snapdragon 8 GEN 3 , 3.3 GHz",
description: "A budget-friendly option with excellent features.",
price: "Rs.98,000",
rating: "3.8/5"
},
{
model: "Lenovo Legion Phone Duel 2",
img: "images/lenovo.webp",
specifications: "6.9\" Display, 512GB Storage, 64MP Camera",
battery: "5500 mAh ",
processor: "Qualcomm® Snapdragon™ 888",
description: "The Best Gaming Phone",
price: "Rs.2,45,000",
rating: "4.5/5"
},
{
model: "Nothing Phone 2",
img: "images/nothing.jpeg",
specifications: "6.7\" Display, 1TB Storage, 50MP Camera",
battery: "5500 mAh ",
processor: "Qualcomm® Snapdragon™ 888",
description: "A budget-friendly option with excellent features.",
price: "Rs. 35,999",
rating: "4.2/5"
},
{
model: "LG v60 thinq 5G ",
img: "images/lg1.jpg",
specifications: "6.4\" Display, 64GB Storage, 48MP Camera",
battery: "5500 mAh ",
processor: "Qualcomm® Snapdragon™ 888",
description: "A budget-friendly option with excellent features.",
price: "Rs.2,44,999",
rating: "4.2/5"
},

];

// Shuffle function to randomize smartphone display


function shuffle(array) {
for (let i = array.length - 2; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

const smartphoneContainer = document.getElementById('smartphone-container');


const modal = document.getElementById('modal');
const closeModal = document.getElementsByClassName('close')[0];

// Function to display smartphones


function displaySmartphones(data) {
smartphoneContainer.innerHTML = '';
data.forEach(smartphone => {
const smartphoneDiv = document.createElement('div');
smartphoneDiv.className = 'smartphone';
smartphoneDiv.innerHTML = `
<img src="${smartphone.img}" alt="${smartphone.model}">
<h3>${smartphone.model}</h3>
<p><strong>Specifications:</strong> ${smartphone.specifications}</p>
`;

smartphoneDiv.onclick = () => {
document.getElementById('modal-title').innerText = smartphone.model;
document.getElementById('modal-description').innerText =
smartphone.description;
document.getElementById('modal-specifications').innerText =
smartphone.specifications;
document.getElementById('modal-battery').innerText =
smartphone.battery;
document.getElementById('modal-processor').innerText =
smartphone.processor;
document.getElementById('modal-price').innerText = `Price: $
{smartphone.price}`;
document.getElementById('modal-rating').innerText = `Rating: $
{smartphone.rating}`;
modal.style.display = "block";
};

smartphoneContainer.appendChild(smartphoneDiv);
});
}

// Modal close functionality


closeModal.onclick = () => {
modal.style.display = "none";
}

window.onclick = (event) => {


if (event.target == modal) {
modal.style.display = "none";
}
}

// Initial display with shuffled smartphones


displaySmartphones(shuffle(smartphones));

You might also like