Discussion on: 5 Awesome HTML and CSS projects to build (with codepen preview)

View post

Replies for: Finally i did the first one. And its felt really good. When i do this i also get more used to on class and divs. Thank you very much Babi!

𝐁𝐚𝐛𝐢 ✨ • Feb 15 '22

That's awesome @cem_coduroglu! If you did it on codepen could you share the link in this comment section?

Cem coduroglu • Feb 16 '22

I don't now how to send it. But i will copy paste here

HTML was ;

<!DOCTYPE html>

Survey Forms

integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Employee Satisfaction Survey

    <section>
        <div class="name">
            <p>Name</p>
        </div>
        <div class="input-area">
            <div class="input1">
                <input style="width:300px;" type="text" name="First Name" placeholder="Fill your first name"><br>
                <label>First Name</label>
            </div>
            <div class="input2">
                <input style="width:300px;" type="text" name="Last Name" placeholder="Fill your first name"><br>
                <label>Last Name</label>
            </div>
        </div>
        <div class="questions">
            <p class="question1">
                How yould you describe your overall level of job satisfaction?
            </p>
            <p id="question-items">
                <input class="sections" type="radio" name="answers"> Very satisfied <br>
                <input class="sections" type="radio" name="answers"> Somewhat satisfied <br>
                <input class="sections" type="radio" name="answers"> Neutral <br>
                <input class="sections" type="radio" name="answers"> Somewhat dissatisfied <br>
                <input class="sections" type="radio" name="answers"> Very dissatisfied <br>
            </p>
            <p class="question1">
                Do you have the resources you need to perform your job well?
            </p>
            <p id="question-items2">
                <input class="sections" type="radio" name="answers2"> Yes <br>
                <input class="sections" type="radio" name="answers2"> No
            </p>
        </div>

        <div class="questions">
            <p class="question1">
                If No, Please Explain
            </p>
            <div class="text-area">
                <textarea name="textarea" id="" cols="85" rows="10" placeholder="Type here..."></textarea>
                <br><br>
                <p class="question1">
                    Please Provide Any Additional Feedback
                </p>
                <textarea name="textarea" id="" cols="85" rows="10" placeholder="Type here..."></textarea>
            </div>
        </div>
        <hr>

    </section>
    <div class="button">
        <button class="btn btn-danger">Submit</button>
    </div>
</div>

<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>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

CSS ;