Kevin Powell - Community•9mo ago

Realise a single page

H ieveryone I want realise a single page

7 Replies

Pat66OP•9mo ago

my work:

Pat66OP•9mo ago

Pat66OP•9mo ago

my code : https://codepen.io/alpha_66/full/zYXYGyB on the local I put this : HTML:

<body>
    <div class="entete">
        <h1>Patrick CONSTRUCT</h1>

          <nav>
           <a href="#">ACCUEIL</a>
           <a href="#">A PROPOS</a>
           <a href="#">SERVICES</a>
           <a href="#">CONTACT</a>
          </nav>
    </div>

    <main class="content">
         <div class="pic">
              <div class="textLeft">
                   <p>nulla autem suscipit <br>
                        Possimus excepturi beatae
                   </p>
              </div>
                      <div class="textRight">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br>  Ducimus quasi unde ad quisquam modi, placeat eaque voluptas. </p>
                      </div>
                   <div class="title">
                      <h2>Patrick CONSTRUCT</h2>
                   </div>
                
         </div>
         
         <div class="content2">


              <div class="pic2">
                <img src="asset/vue.jpg" alt="salle">
              </div>
         </div>

    </main>
</body>

<body>
    <div class="entete">
        <h1>Patrick CONSTRUCT</h1>

          <nav>
           <a href="#">ACCUEIL</a>
           <a href="#">A PROPOS</a>
           <a href="#">SERVICES</a>
           <a href="#">CONTACT</a>
          </nav>
    </div>

    <main class="content">
         <div class="pic">
              <div class="textLeft">
                   <p>nulla autem suscipit <br>
                        Possimus excepturi beatae
                   </p>
              </div>
                      <div class="textRight">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br>  Ducimus quasi unde ad quisquam modi, placeat eaque voluptas. </p>
                      </div>
                   <div class="title">
                      <h2>Patrick CONSTRUCT</h2>
                   </div>
                
         </div>
         
         <div class="content2">


              <div class="pic2">
                <img src="asset/vue.jpg" alt="salle">
              </div>
         </div>

    </main>
</body>

my CSS:

body{
 height: 100vh;
}

body{
 height: 100vh;
}

.entete{
    width: 100%;
    height: 20%;
    background-color: #4a7c61;
    display: flex;
    padding-left: 29px;
    }

    h1{
        display: block;
        align-self:center;
        
    }

    nav{
        display: flex;
        align-items: center;
        width: 600px;
        margin-left:auto;
      }

nav a {
    flex: 1;
    text-decoration: none;
    color: black;
    outline: none;
    text-align: center;
}

.pic{
    position: relative;
    height:80vh;
    background-image: url('asset/int.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:100% 100%;
   }

   .textLeft{
    position: absolute;
    top: 15px;
    left: 29px;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
   }

   .textRight{
    position: absolute;
    top: 15px;
    right: 99px;
    font-size: 2.5em;
    font-weight: bold;
    text-transform: uppercase;
   }
   
   .title{
    position: absolute;
    bottom: 15px;
    width: 100vw;
    height: 12vh;
    background-color: blue;
   }

   .title h2{
    text-align: center;
    font-size: 4.5em;
   }
   


   .content2{
    background-color: #4a7c61;
    height: 95%;
   }

.entete{
    width: 100%;
    height: 20%;
    background-color: #4a7c61;
    display: flex;
    padding-left: 29px;
    }

    h1{
        display: block;
        align-self:center;
        
    }

    nav{
        display: flex;
        align-items: center;
        width: 600px;
        margin-left:auto;
      }

nav a {
    flex: 1;
    text-decoration: none;
    color: black;
    outline: none;
    text-align: center;
}

.pic{
    position: relative;
    height:80vh;
    background-image: url('asset/int.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:100% 100%;
   }

   .textLeft{
    position: absolute;
    top: 15px;
    left: 29px;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
   }

   .textRight{
    position: absolute;
    top: 15px;
    right: 99px;
    font-size: 2.5em;
    font-weight: bold;
    text-transform: uppercase;
   }
   
   .title{
    position: absolute;
    bottom: 15px;
    width: 100vw;
    height: 12vh;
    background-color: blue;
   }

   .title h2{
    text-align: center;
    font-size: 4.5em;
   }
   


   .content2{
    background-color: #4a7c61;
    height: 95%;
   }

on codepen I can scroll down and see the next div but on my PC it s impossible to scroll down and under the div .pic Something is going wrong with my css C an I have some explication about what is going wrong ? thanks

RMON•9mo ago

Hey man! I'm unsure of the situation you're going through myself but what I can let you know if you haven't already realized is that your website isn't responsive.

majkl•9mo ago

Isn`t that becouse codepen "page" is low (like 600px or so), while a normal window 1000px+ ... o thre is nothing to scroll to? Add some more dummy content and see.

RMON•9mo ago

Don't think that would matter, My portfolio includes 4 total different sections on a CodePen users can still scroll all the way down

majkl•9mo ago

Yes. But in a browser, are the 4 sections actually higher than the viewport? Just an idea, I have not seen the code. Had a look at the site ... and see I was right - there is simple nothing to scroll to. Add some lipsum to the end.

Gaming

Programming

Realise a single page