I want to create a section with this mobile responsive content as shown in diagram. By using pure CSS and HTML and jQuery
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding 
1 Like
I want to create a section in html with mobile responsiveness. As shown in picture
Again, we won’t write the code for you, but we can help you debug what you have tried.
We do have some curriculum content on responsive web development. If you haven’t learned much yet, that’s a good place to start.
2 Likes
Their are tons of ways to achieve that,Flexbox,Bootstrap…Your question is so wide.
I have created one but how to add icon functionality
Please show your current code.
1 Like
HERE IS MY CODE I want to have only six big icons that fit in left box and introduction box on right box. as shown on first diagram. I know I have made introduction box or section full width but I Just need help with citizen zone section as I tried but instead of showing down in column introduction box and citizen zone section collapsed in small screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/e6ee83ccf5.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="custom.js"></script>
<style>
/* Reset default margin, padding, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Set body font family and line height */
body {
font-family: "Poppins", sans-serif;
line-height: 1.6;
}
/* Set container styles with a maximum width, centered margin, and padding */
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
/* Style for section titles */
.section-title {
color: #e67e22;
text-align: center;
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
position: relative;
}
/* Create horizontal lines before and after section titles */
.section-title::before,
.section-title::after {
content: "";
position: absolute;
top: 50%;
width: 20%;
height: 2px;
background-color: #124595;
}
/* Position the line before the section title */
.section-title::before {
left: 0;
transform: translateY(-50%);
}
/* Position the line after the section title */
.section-title::after {
right: 0;
transform: translateY(-50%);
}
/* Style for the citizen zone section */
.section-citizen-zone {
background-color: #f2f2f2;
padding: 5px;
}
/* Grid container styles with responsive column sizes, centered items, and spacing */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
justify-items: center;
text-align: centers;
gap: 20px;
padding: 10px;
}
/* Style for grid items */
.grid-item {
text-align: center;
padding: 10px;
font-size: 16px;
color: #ffffff;
transition: background-color 0.3s ease;
border-radius: 5px;
height: 100px;
width: 100px;
}
/* Hover effect for grid items */
.grid-item:hover {
background-color: #4b4848;
color: #f1f1f1;
transition: background-color 0.3s ease;
cursor: pointer;
}
/* Hover effect for grid item icons */
.grid-item .icon:hover i {
transform: scale(1.2);
transition: transform 0.3s ease;
}
/* Specific styles for different grid item categories */
.health {
background-color: #1abc9c;
}
.services {
background-color: #3498db;
}
.grievances {
background-color: #9b59b6;
}
.tourism {
background-color: #f1c40f;
}
.map {
background-color: #e74c3c;
}
.rules {
background-color: #e67e22;
}
.culture {
background-color: #2ecc71;
}
.contact {
background-color: #3498db;
}
/* Styles for profile container */
.profile-container {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
/* Grid styles for profiles with responsive column sizes and spacing */
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 10px;
padding: 10px;
}
/* Styles for profile cards */
.profile-card {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Styles for profile photo */
.profile-photo img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
/* Styles for profile name */
.profile-name {
font-weight: bold;
color: #888888;
margin-bottom: 5px;
}
/* Styles for profile designation */
.profile-designation {
font-size: 15px;
color: #888888;
margin-bottom: 5px;
}
/* Styles for profile department */
.profile-department {
color: #888888;
margin-bottom: 10px;
}
/* Styles for social links within profiles */
.profile-social-links {
display: flex;
justify-content: center;
}
/* Styles for individual social links */
.social-link {
color: #888888;
margin: 0 5px;
}
/* Styles for text boxes */
.text-box {
background-color: #3498db;
color: #fff;
padding: 20px;
}
/* Styles for introduction box */
.introduction-box {
padding: 20px;
border-radius: 5px;
}
/* Styles for introduction box headings */
.introduction-box h2 {
margin-bottom: 10px;
}
/* Styles for introduction box paragraphs */
.introduction-box p {
margin-bottom: 20px;
}
/* Styles for buttons */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
border: none;
}
/* Styles for primary buttons */
.btn-primary {
background-color: #fff;
color: #4b4848;
}
/* Hover effect for primary buttons */
.btn-primary:hover {
background-color: #e67e22;
color: #fff;
}
/* Animation */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in;
}
.fade-in.fade-in-visible {
opacity: 1;
}
/* Media query for mobile screens */
@media (max-width: 776px) {
/* Adjust grid layout for profiles on mobile screens */
.profile-grid {
grid-template-columns: 1fr;
}
}
/* Media query for smaller mobile screens */
@media (max-width: 767px) {
/* Adjust grid layout for grid items on smaller mobile screens */
.grid-container {
grid-template-columns: repeat;
gap: 10px;
padding: 2px;
}
/* Adjust font size and padding for grid items on smaller mobile screens */
.grid-item {
font-size: 20px;
padding: 5px;
}
/* Hover effect for grid items on smaller mobile screens */
.grid-item:hover {
background-color: #4b4848;
color: #f1f1f1;
transition: background-color 0.3s ease;
cursor: pointer;
}
/* Hover effect for grid item icons on smaller mobile screens */
.grid-item .icon:hover i {
transform: scale(1.2);
transition: transform 0.3s ease;
}
/* Hide horizontal lines before and after section titles on smaller mobile screens */
.section-title::before,
.section-title::after {
display: none;
}
/* Adjust grid layout for profiles on smaller mobile screens */
.profile-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container fade-in">
<div class="profile-container">
<!-- Profile Cards Section -->
<h2 class="section-title">Profile Cards</h2>
<div class="profile-grid">
<!-- Profile Card 1 -->
<div class="profile-card">
<div class="profile-photo">
<img src="img/team2.jpg" alt="Profile Photo">
</div>
<div class="profile-details">
<h3 class="profile-name">John Doe</h3>
<p class="profile-designation">Software Engineer</p>
<p class="profile-department">Department of Technology</p>
<div class="profile-social-links">
<a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<!-- Profile Card 2 -->
<div class="profile-card">
<div class="profile-photo">
<img src="img/team2.jpg" alt="Profile Photo">
</div>
<div class="profile-details">
<h3 class="profile-name">John Doe</h3>
<p class="profile-designation">Software Engineer</p>
<p class="profile-department">Department of Technology</p>
<div class="profile-social-links">
<a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<!-- Add more profile cards here -->
</div>
</div>
</div>
<section class="text-box fade-in">
<div class="container">
<!-- Introduction Box Section -->
<div class="introduction-box">
<h2>Title for Introduction Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae ipsum vitae mauris cursus
vestibulum. Aliquam eu elit sed nisi sollicitudin sodales.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</section>
<div class="container fade-in">
<section class="section-citizen-zone">
<!-- Citizen Zone Section -->
<h2 class="section-title">Citizen Zone</h2>
<div class="grid-container">
<!-- Health Grid Item -->
<div class="grid-item health">
<div class="icon">
<i class="fas fa-heartbeat fa-2x"></i>
<br>
<span>Health</span>
</div>
</div>
<!-- Services Grid Item -->
<div class="grid-item services">
<div class="icon">
<i class="fas fa-cogs fa-2x"></i>
<br>
<span>Services</span>
</div>
</div>
<!-- Grievances Grid Item -->
<div class="grid-item grievances">
<div class="icon">
<i class="fas fa-exclamation-circle fa-2x"></i>
<br>
<span>Grievances</span>
</div>
</div>
<!-- Tourism Grid Item -->
<div class="grid-item tourism">
<div class="icon">
<i class="fas fa-globe fa-2x"></i>
<br>
<span>Tourism</span>
</div>
</div>
<!-- Map Grid Item -->
<div class="grid-item map">
<div class="icon">
<i class="fas fa-map-marked-alt fa-2x"></i>
<br>
<span>Our Map</span>
</div>
</div>
<!-- Rules Grid Item -->
<div class="grid-item rules">
<div class="icon">
<i class="fas fa-balance-scale fa-2x"></i>
<br>
<span>Laws</span>
</div>
</div>
<!-- Culture Grid Item -->
<div class="grid-item culture">
<div class="icon">
<i class="fas fa-icons fa-2x"></i>
<br>
<span>Culture</span>
</div>
</div>
<!-- Contact Grid Item -->
<div class="grid-item contact">
<div class="icon">
<i class="fas fa-address-book fa-2x"></i>
<br>
<span>Contact</span>
</div>
</div>
</div>
</section>
</div>
</body>
<script src="https://kit.fontawesome.com/e6ee83ccf5.js" crossorigin="anonymous"></script>
</html>
You’ll need to give us your custom.js file too.
1 Like
custom.js file is for fade-in animation on scroll only
document.addEventListener("DOMContentLoaded", function() {
var fadeIns = document.querySelectorAll(".fade-in");
function checkFadeIns() {
for (var i = 0; i < fadeIns.length; i++) {
var fadeIn = fadeIns[i];
var rect = fadeIn.getBoundingClientRect();
var windowHeight = window.innerHeight;
if (rect.top < windowHeight && rect.bottom >= 0) {
fadeIn.classList.add("fade-in-visible");
} else {
fadeIn.classList.remove("fade-in-visible");
}
}
}
window.addEventListener("scroll", checkFadeIns);
window.addEventListener("resize", checkFadeIns);
checkFadeIns();
});
I’m not sure what you want us to help you with. The Profile cards seem to be responsive. I don’t see anything else on the page that is having problems with responsiveness.
look at the design i HAVE provided with thread I want that design
I think you need to at least try to do this on your own first, and if you can’t get it to work then you can show us what you have and we can help you. You’re already using media queries for the Profile Cards. I’m not sure why you couldn’t do the same thing for what you are describing? But we aren’t going to write it for you, so you’ll need to give us a good start and then we can help you where needed.
If you have a specific question about something that is keeping you from getting started then please ask.
2 Likes
I want to put That Citizen Zone section in column.
Two > First row has Citizen Zone and Second row has Box with Carosoul. My problem is when I put this citiezen zone first row (only 4 items from citizen zone) and Slider in second it collapses or wraps rather than being responsive.
example
type or paste code here
<div class ="row">
<div class="column">
citizen zone section code here </div>
<div class="column">
Slider section code here </div>
</div>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.