Public AI explainer video
1. HTML Code HTML <section id="skills" class="skills"> <h2>મારી...
1. HTML Code HTML <section id="skills" class="skills"> <h2>મારી આવડતો</h2> <div class="skills-container"> <div class="skill"> <h3>HTML</h3> <div class="pr...
Prompt
Source idea used to generate this video.
1. HTML Code HTML <section id="skills" class="skills"> <h2>મારી આવડતો</h2> <div class="skills-container"> <div class="skill"> <h3>HTML</h3> <div class="progress-bar"> <div class="progress" style="width:90%"></div> </div> </div> <div class="skill"> <h3>CSS</h3> <div class="progress-bar"> <div class="progress" style="width:85%"></div> </div> </div> <div class="skill"> <h3>JavaScript</h3> <div class="progress-bar"> <div class="progress" style="width:75%"></div> </div> </div> <div class="skill"> <h3>Responsive Design</h3> <div class="progress-bar"> <div class="progress" style="width:80%"></div> </div> </div> </div> </section> 2. CSS Code CSS /* Skills Section */ .skills { padding: 80px 50px; background-color: #f4f4f4; } .skills h2 { text-align: center; margin-bottom: 40px; color: #041938; } .skill { margin-bottom: 20px; } .progress-bar { width: 100%; height: 10px; background-color: #ddd; border-radius: 5px; } .progress { height: 100%; background-color: #609DFF; border-radius: 5px; } Gujarati Text Content (From Image 1) સ્ટેપ 3: Skills સેક્ટર તમારી આવડતો દર્શાવવા માટે પ્રોગ્રેસ બાર અથવા આઇકોન સાથેના કાર્ડ્સનો ઉપયોગ કરો. આ સેક્ટર તમારી ટેકનિકલ ક્ષમતાઓ હાઇલાઇટ કરે છે. ટિપ: style="width:90%" માં નંબર બદલીને તમારી સ્કિલ લેવલ સેટ કરો (0 થી 100 સુધી).
More examples