Public AI explainer video
1. HTML Code (from Image 2) HTML <section...
1. HTML Code (from Image 2) HTML <section id="projects" class="projects"> <h2>મારા પ્રોજેક્ટ્સ</h2> <div class="project-grid"> <div class="project-card">...
Prompt
Source idea used to generate this video.
1. HTML Code (from Image 2) HTML <section id="projects" class="projects"> <h2>મારા પ્રોજેક્ટ્સ</h2> <div class="project-grid"> <div class="project-card"> <img src="project1.jpg" alt="Project 1"> <h3>પ્રોજેક્ટ 1 નું નામ</h3> <p>આ પ્રોજેક્ટ HTML અને CSS નો ઉપયોગ કરીને બનાવવામાં આવ્યો છે.</p> <a href="#" class="btn">જુઓ</a> </div> <div class="project-card"> <img src="project2.jpg" alt="Project 2"> <h3>પ્રોજેક્ટ 2 નું નામ</h3> <p>રિસ્પોન્સિવ વેબસાઇટ ડિઝાઇન જે મોબાઇલ અને ડેસ્કટોપ બંને પર કામ કરે છે.</p> <a href="#" class="btn">જુઓ</a> </div> <div class="project-card"> <img src="project3.jpg" alt="Project 3"> <h3>પ્રોજેક્ટ 3 નું નામ</h3> <p>JavaScript સાથે ઇન્ટરેક્ટિવ વેબ એપ્લિકેશન.</p> <a href="#" class="btn">જુઓ</a> </div> </div> </section> 2. CSS Code (from Image 1) CSS /* Projects Section */ .projects { padding: 80px 50px; background-color: white; } .projects h2 { text-align: center; margin-bottom: 40px; color: #041938; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .project-card { background: #f4f4f4; padding: 20px; border-radius: 10px; text-align: center; } .project-card img { width: 100%; border-radius: 8px; margin-bottom: 15px; }
More examples