Child Element Disappears after clip-path added

Ask a question
0

For a design project I’m doing, I want to put a clip-path on my secondary content. However, after putting the clip-path code, some of the children or elements are disappearing on my .aboutcontent. I’ve tried using position:absolute orz-indexbut nothing happens on the content of my.aboutcontent. Thanks in Advance.

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

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

.body {
    height: 100vh;
    background: linear-gradient( #001f3f, transparent 80% ),
                    linear-gradient(0deg, #fff, transparent) 
                    ,url(img/bgmain.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}

.firstlayout {
    height: 100vh;
}

.overlay{
    background-color: rgba(0,0,0,.95);
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    transition: opacity 650ms;
    transform: scale(0);
    opacity: 0;
    display: none;
}

/* Hamburger Menu */

.menu-toggle {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    color: #eeeeee;
    font-size: 3rem;
    cursor: pointer;
    z-index: 1000;
    display: none;
}

/* End of Hamburger Menu */

/* Navagation Link */
header {
    font-family: "Raleway", sans-serif;
    position: relative;
    width: 100%;
    height: 10rem;
    z-index: 2;
}

nav {
    /* padding-top: 5rem; */
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.4rem;
}

nav img {
    height: 7rem;
    margin: 0 0 0 12rem;
}

nav ul {
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    font-weight: 900;
    font-size: 1.4rem;
    padding: 1rem 0;
    margin: 0 1rem;
    position: relative;
    color: #eee;
}

.menu {
    margin: 0 12rem 0 0;
}

.menu a {
    font-size: 1rem;
    margin: 0 .1rem;
    outline: none;
}

.menu a:last-child{
    margin-right: 0;
}

nav ul li a::before,
nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #f4511e;
    left: 0;
    transform: scaleX(0);
    transition: all .5s;
}

nav ul li a::before{
    top: 0;
    transform-origin: left;
}

nav ul li a::after{
    bottom: 0;
    transform-origin: right;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
    transform: scaleX(1);
}

.btn {
        border: none;
        border-radius: 30px;
        background-color: #f4511e;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        padding: 9px;
        width: 70px;
        text-transform: uppercase;
}

.btninfo{
    padding: 9px 19px;
}
/* End of Navagation Menu */

/* Content of the Website *****************/

.content {
    height: 100vh;
    text-align: center;
}

.possible {
    color: #fff;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 8rem;
    font-family: "Coiny", sans-serif;
    font-size: 3.6rem;
}
.possible2 {
    color: #fff;
    padding-top: 4rem;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
}

.arrow {
    width: 50px;
    padding-top: 10rem;
}

/* About 2nd layer ******************/

.about {
    position: absolute;
    height: 100vh;
    background-color: firebrick;
    clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
    width: 100%;
    z-index: -1000;
}

.jury {
    position: relative;
    font-family: "Coiny", sans-serif;
    text-align: center;
    font-size: 4rem;
    padding-top: 2em;
}

.jury span {
    color: #f4511e;
}

.rectangle {
    border: 1px solid firebrick;
    fill: firebrick;
}
<body>
    <div class="body">
        <div class="firstlayout">
        <header>
            <div class="menu-toggle" id="hamburger">
                    <i class="fas fa-bars"></i>
            </div>
            <div class="overlay"></div>
            <nav>
                <img src="img/logo2.png" alt="Logo" class="logo">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="menu">
                    <a href="#" class="btn">Contact</a>
                    <a href="#" class="btn btninfo">Info</a>
                </div>
            </nav>
        </header>
        <div class="content">
                <h1 class="possible">Everything is Possible</h1>
                <h2 class="possible2">"as long as you put your mind to it and put the work and time into it"</h2>
                <a href="#about"><img class="arrow" src="img/arrow.svg" alt="Down arrow"></a>
            </div>
        </div>
    </div>
    <div id="about" class="about">
        <h1 class="jury"><span>Hi!</span>, I'm Jury Gregorio</h1>
        <div class="rectangle"><br></div>
    </div>

</body>
Coin iconoffer bounty
add comment

0 Answer

Your Answer