I use mixin SASS to called background because I will use this code often. I will use the background mixin to create pseudo-class after and before.
This the code of the background mixin:
@mixin background($height: 10%){
content: '';
position: absolute;
width: 100%;
height: $height;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
}
I tried to add some curves using pseudo-class after and before elements. But the curve does not appear if the position isn't absolute. I tried the other value and it does not work. I read some questions about this topic and someone said that it's because the absolute position behaves as a block-level element. Then I tried using display block and inline-block without using the position property and it does not work. I think it's a different case.
This is the code of my pseudo clas:
.users::after {
@include background(25%);
bottom: -100px;
background: url(../images/bg-section-bottom-mobile-2.svg) no-repeat;
}
.users::before {
@include background(25%);
top: -100px;
background: url(../images/bg-section-top-mobile-2.svg) no-repeat;
}
This is the deploy file in vercel
This is the snipset, i don't know how to add picture file. And this is not the full code, just the part I asked about
main .grow, main .conversations, main .users {
text-align: center;
padding: 30px;
}
main .grow img, main .conversations img, main .users img {
width: 80%;
}
main .grow h3, main .conversations h3, main .users h3 {
margin-top: 40px;
}
main .grow p, main .conversations p, main .users p {
margin-top: 20px;
}
main .users, main .grow {
background-color: #f5faff;
margin: 150px 0px 150px 0px;
position: relative;
}
main .grow::after {
content: '';
position: absolute;
width: 100%;
height: 25%;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
bottom: -100px;
background: url(../images/bg-section-bottom-mobile-1.svg) no-repeat;
}
main .grow::before {
content: '';
position: absolute;
width: 100%;
height: 25%;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
top: -100px;
background: url(../images/bg-section-top-mobile-1.svg) no-repeat;
}<body>
<!-- header -->
<div class="header">
<div class="header__logo">
<img src="images/logo.svg" alt="logo">
</div>
<button class="header__btn">Try it free</button>
</div>
<!-- section -->
<div class="starter">
<h2 class="starter__title">Build The Community Your Fans Will Love</h2>
<div class="starter__description">Huddle re-imagines the way we build communities. You have a voice, but so does
your audience. Create connections with your users as you engage in genuine discussion.</div>
<button class="starter__btn">Get Started For Free</button>
<img class="starter__illustration" src="images/screen-mockups.svg" alt="screen-mockups">
</div>
<!-- main -->
<main>
<div class="count">
<div class="count__community">
<img src="images/icon-communities.svg" alt="communities">
<h1>1.4k+</h1>
<p>Communities Formed</p>
</div>
<div class="count__message">
<img src="images/icon-messages.svg" alt="messages">
<h1>2.7m+</h1>
<p>Message Sent</p>
</div>
</div>
<div class="grow">
<img src="images/illustration-grow-together.svg" alt="illustration-grow-together">
<div class="grow__container">
<h3>Grow Together</h3>
<p>Generate meaningful discussions with your audience and build a strong, loyal community.
Think of the insightful conversations you miss out on with a feedback form.</p>
</div>
</div>
<div class="conversations">
<img src="images/illustration-flowing-conversation.svg" alt="illustration-flowing">
<div class="conversations__container">
<h3>Flowing Conversation</h3>
<p>You wouldn't paginate a conversation in real life, so why do it online? Our threads have
just-in-time loading for a more natural flow.</p>
</div>
</div>
<div class="users">
<img src="images/illustration-your-users.svg" alt="illustration-users">
<div class="users__container">
<h3>Your Users</h3>
<p>It takes no time at all to integrate Huddle with your app's authentication solution. This means,
once signed in to your app, your users can start chatting immediately.</p>
</div>
</div>
<div class="action">
<h2 class="action__title">Ready To Build Your Community</h2>
<button class="action__btn">Get Started For Free</button>
</div>
</main>
<!-- footer -->
<footer class="footer">
<div class="footer__newsletter">
<h3>newsletter</h3>
<p>To recieve tips on how to grow your community, sign up to our weekly newsletter. We’ll never
send you spam or pass on your email address</p>
<form>
<input type="text" name="email">
<button type="submit">Subscribe</button>
</form>
</div>
<div class="footer__contact">
<div class="logo">
<img src="images/icon-messages.svg" alt="logo">
<h1>HADDLE</h1>
</div>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sequi culpa voluptates perferendis provident natus.</p>
<div class="phone">
<img src="images/icon-phone.svg" alt="phone">
<p>Phone: +1-543-123-4567</p>
</div>
<div class="email">
<img src="images/icon-email.svg" alt="email">
<p>example@huddle.com</p>
</div>
<div class="sosmed">
<div class="fb container">
<i class="fab fa-facebook-f"></i>
</div>
<div class="ig">
<i class="fab fa-instagram"></i>
</div>
<div class="twt container">
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
</footer>
</body>So the question is why my pseudo-class after and before only display when I use position absolute? Is it because I use mixin SASS?
