DEV Community: Cem coduroglu

What i'm gonna do wrong?

Cem coduroglu — Mon, 14 Feb 2022 12:44:20 +0000

Hey guys, i just want to improve my HTML CSS skills. I found some challenging picture which is ;

https://res.cloudinary.com/practicaldev/image/fetch/s--HA8IxitZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gylog4tikhxrqsrssaii.jpg

But im stucked on the first box line. I do display: inline-block but it won't work.

My codes are like this ;

    <header class="header">
        <h2>Employee Satisfaction Survey</h2>
        <hr>
    </header>

    <section>
        <div class="name">
            <p>Name</p>
        </div>
        <div class="input-area">
            <div class="input1">
                <label>First Name</label><br>
                <input type="text" name="First Name">
            </div>
            <div class="input2">
                <label>Last Name</label><br>
                <input type="text" name="Last Name">
            </div>
        </div>
    </section>

And CSS like this ;

header {
    text-align: center;

}

h2 {
    margin-bottom: 30px;
}

.name {
    margin-left: 30px;
}



.input-area {
    margin-left: 30px;
display: in;
}

Any idea for valentines day?

Cem coduroglu — Sat, 12 Feb 2022 10:29:19 +0000

Hey guys, im just new in coding. Almost 1 month. I am 31 y.o personal trainer and living with my girlfriend. She's fully supports me for changing career into coding. And i wanna make a little tiny suprise with some coding stuff. 😅 I am currently learning html and css. Do you know like a little tutorial about it or do you suggest me some way?

Thank you for your reply.🙏🏼

Data-Toggle Doesn't work! Help please.

Cem coduroglu — Sat, 12 Feb 2022 09:34:39 +0000

Hey guys, i just make a button with my udemy teacher. I did the same think as he did. But in my page it doesn't work. What am i missing?
I just created a button but when i click on it the text doesn't opening.

Thank you so much for your reply !

**<body class="w-75 mx-auto my-4">

    <p>
        <a href="#content" class="btn btn-dark bg-warning" data-toggle="collapse">Read More</a>
    </p>

    <div id="content" class="collapse">
        <h2>Lorem ipsum dolor sit.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sint nobis vero quaerat ad ex. Et,
            pariatur. Nemo, impedit. Eligendi exercitationem ea provident eos eum nesciunt deleniti quos debitis
            numquam?</p>
    </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>
</body>

</html>

HELP Opacity problem in images and text.

Cem coduroglu — Fri, 11 Feb 2022 17:52:12 +0000

Hey guys, im new in coding. I was trying an images on background with opacity 0.6. The problem is my text is getting opacity too ! I make two different divs but it doesn't work. Can you help me ?

    <style>
        .background {
            background-image: url(barhold.jpg);
            background-size: cover;
            filter: alpha(opacity=60);
            opacity: 0.6;
        }

        span {
            color: red;
            opacity: 1;
        }
    </style>
    <title>Document</title>
</head>

<body class="w-75 mx-auto my-4">

    <div class="background">
        <div class="container">
            <span>
                <h1>Lorem ipsum dolor sit amet.</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore ullam recusandae
                    consequuntur
                    eligendi numquam vitae doloremque itaque quam, reiciendis perspiciatis.</p>
            </span>
            <hr>


        </div>
    </div>

I can't fill bottom of the page

Cem coduroglu — Wed, 09 Feb 2022 15:03:51 +0000

Is this problem about divs?

Why z-index is not working?

Cem coduroglu — Sat, 05 Feb 2022 17:50:15 +0000

Hey guys, i am on udemy course which we are creating Responsive web sites with the teacher. I follow him step by step. But when it comes to z-index situation. I can't move my text in front of my images. But teacher does. :/
I don't know i followed him step by step but it won't working.

recent codes are;

`*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 10px;

}

body {
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
background-color: #333;
}

a {
text-decoration: none;
}

p {
padding: 1.6rem 0;
}

header {

height: 46rem;
background: lightskyblue;

}

header .bg-image {
position: absolute;
background-image: url(images/fotoğraf2.jpg);
background-size: cover;
background-position: center;
height: 46rem;
width: 100%;
opacity: 0.5;
z-index: -1;

}

header h1 {
padding: 12rem;
padding-bottom: 0;

}

.btn {
display: inline-block;
background: #333;
color: #fff;
border: 1px solid #666;
padding: 1.6rem 3.2rem;
margin: .5rem 0;
transition: all 0.4s;
}

.btn:hover {
background-color: #fff;
color: #333;
}`