Realise a single page

H ieveryone I want realise a single page
7 Replies
Pat66
Pat669mo ago
my work:
Pat66
Pat669mo ago
No description
Pat66
Pat669mo 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
RMON9mo 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
majkl9mo 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
RMON9mo 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
majkl9mo 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.
Want results from more Discord servers?
Add your server