Oke, ik ben dus echt nog een noob als het op html/css aankomt. Ik dacht ik maak voor de los is een website, wat opzich goed lukte alles ziet er prima uit totdat ik hem op mobiel bekeek en zag dat het toch niet helemaal is zoals het hoort.
ik denk dat de fotos genoeg gaan zeggen. kortom Help!!
:strip_exif()/f/image/R2G6jRJwCyKHyp9IOUrw33Yd.jpg?f=fotoalbum_large)
:strip_exif()/f/image/tt2r2IrQLAM3tmok9wlgVD1D.jpg?f=fotoalbum_large)
Hier onder de html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="vieuwport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Lora:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Playfair+Display&family=Train+One&family=Zen+Dots&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/code.css" type="text/css">
<script src="https://kit.fontawesome.com/0ba5ef7d1d.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>Coding by jeffrey</h4>
</div>
<ul class="nav-links">
<li><a href="#">home</a></li>
<li><a href="#">over</a></li>
<li><a href="#">werk</a></li>
<li><a href="#">projecten</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8"></div>
<div class="circle9"></div>
<div class="circle10"></div>
<div class="circle11"></div>
<div class="circle12"></div>
<main>
<div class="glas">
<div class="hoofdtekst">
<div class="titelparent">
<div class="titel"> <h1>Webdesign portfolio</h1></div>
<div class="opvul"><p></p></div>
</div>
<div class="artikel1">
<div class="tekst">
<p>Zie hier een aantal van mijn projecten, momenteel ben ik nog niet profesioneel bezig met Webdesign dus alles wat u hier op deze website ziet zijn projecten die ik leuk vond om te maken en vooral om veel te oefenen.<br>
Alles wat ik heb gemaakt is 100% html/css.</p>
</div>
<div class="hoofdfoto"> <img src="afbeeldingen/hoofdpaginafoto.jpg" alt="webdesigner foto" class="foto"> </div>
</div>
<div class="project">
<div class="nr1"><a href="html/jamey/index.html" class="projectbtn"><h2>BKC Streetware</h2><img src="afbeeldingen/jamey.jpg" class="projectfoto"></a></div>
<div class="nr1"><a href="html/recepten/index.html" class="projectbtn"><h2>Koken met ons</h2><img src="afbeeldingen/recepten.jpg" class="projectfoto"></a></div>
<div class="nr1"><a href="html/B&B/basispagina.html" class="projectbtn"><h2>De rode zon</h2><img src="afbeeldingen/b&b.jpg" class="projectfoto"></a></div>
</div>
</div>
</div>
</main>
<script src="java/script.js"></script>
</body>
</html>
en de Css:
body {
margin: 0px;
padding: 0px;
font-family: arial;
color: white;
overflow-x: hidden;
}
/* font-family: 'Dancing Script', cursive;
font-family: 'Playfair Display', serif;
font-family: 'Train One', cursive;
font-family: 'Zen Dots', cursive; */
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: grey;
font-weight: lighter;
font-family: 'Lora', serif;
}
.logo{
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 25px;
font-family: 'Playfair Display', serif;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links a{
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 20px;
font-weight: lighter;
font-family: 'Playfair Display', serif;
}
.nav-links li{
list-style: none;
}
.nav-links :hover{
text-decoration: underline;
}
.opvul{
width: 45%;
}
.titelparent{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
main{
height: 100%;
background: linear-gradient(to right top, rgba(119, 136, 153, 1) 0%, rgba(112, 128, 29, 1) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.glas{
background: white;
min-height: 80vh;
width: 75%;
background: linear-gradient(to right top, rgba(119, 136, 153, 0.7) 0%, rgba(112, 128, 29, 0.3) 100%);
border-radius: 2rem;
z-index: 3;
backdrop-filter:blur(0.4rem);
justify-content: left;
display: flex;
}
.titel{
width: 45%;
}
.titel h1{
color: rgb(227, 237, 307);
font-size: 55px;
padding-left: 2%;
font-weight: lighter;
font-family: 'Playfair Display', serif;
}
.artikel1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.tekst{
width: 45%;
margin-bottom: 10%;
}
.tekst p{
font-weight: lighter;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
.hoofdfoto{
width: 45%;
margin-bottom: 5%;
}
.foto{
width: 95%;
}
.project{
width: 100%;
display: flex;
justify-content: space-around;
margin-bottom: 5%;
}
.nr1{
width: 30%;
height: 50vh;
}
.projectfoto{
width: 100%;
height: 60%;
margin: 0px;
padding: 0px;
margin-top: 5%;
border-radius: 5px;
}
.nr1 h2{
text-align: center;
font-family: 'Playfair Display', serif;
font-weight: lighter;
font-size: 25px;
border: 2px black solid;
border-radius: 100px;
padding: 3%;
}
.projectbtn{
cursor: pointer;
text-decoration: none;
color: white;
}
.projectbtn :hover{
animation: tada;
animation-duration: 2s;
color: black;
background-color: rgba(112, 128, 29, 0.5);
}
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 10rem;
width: 10rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle1{
top: 25%;
right: 8%;
}
.circle2{
bottom: 0%;
left: 10%;
}
.circle3{
top: 17%;
right: 72%;
}
.circle4{
bottom: 7%;
left: 66%;
}
.circle5{
top: 45%;
right: 38%;
}
.circle6{
bottom: 12%;
left: 36%;
}
.circle7, .circle8, .circle9{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 5rem;
width: 5rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle10, .circle11, .circle12{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 8rem;
width: 8rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle7{
top: 35%;
right: 28%;
}
.circle8{
bottom: 32%;
left: 76%;
}
.circle9{
top: 30%;
right: 60%;
}
.circle10{
bottom: 65%;
left: 44%;
}
.circle11{
top: 75%;
right: 38%;
}
.circle12{
bottom: 32%;
left: 26%;
}
@media screen and (max-width:1280px){
.glas{
margin-top: 0;
}
.foto{
width: 100%;
}
}
@media screen and (max-width:1000px){
body{
overflow: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top:6vh;
background: grey;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
z-index: 5;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.circle7, .circle8, .circle9{
display: none;
}
.circle10, .circle11, .circle12{
display: none;
}
.circle6{
display: none;
}
.titel{
width: 50%;
}
.tekst p{
font-size: 25px;
}
.glas{
margin-top: 0;
}
.tekst{
width: 100%
}
.titel{
margin-left: 10%;
width: 100%;
}
.project{
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.hoofdfoto{
width: 100%;
margin-bottom: 15%;
display: flex;
justify-content: center;
}
.foto{
width: 95%;
}
.nr1{
width: 95%;
height: 50vh;
margin-bottom: 15%;
}
.artikel1{
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.nav-active{
transform: translateX(0%)
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
en het beetje Java:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',()=>{
nav.classList.toggle('nav-active');
});
navLinks.forEach((link, index)=>{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
});
}
navSlide();
ik denk dat de fotos genoeg gaan zeggen. kortom Help!!
:strip_exif()/f/image/R2G6jRJwCyKHyp9IOUrw33Yd.jpg?f=fotoalbum_large)
:strip_exif()/f/image/tt2r2IrQLAM3tmok9wlgVD1D.jpg?f=fotoalbum_large)
Hier onder de html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="vieuwport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Lora:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Playfair+Display&family=Train+One&family=Zen+Dots&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/code.css" type="text/css">
<script src="https://kit.fontawesome.com/0ba5ef7d1d.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>Coding by jeffrey</h4>
</div>
<ul class="nav-links">
<li><a href="#">home</a></li>
<li><a href="#">over</a></li>
<li><a href="#">werk</a></li>
<li><a href="#">projecten</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8"></div>
<div class="circle9"></div>
<div class="circle10"></div>
<div class="circle11"></div>
<div class="circle12"></div>
<main>
<div class="glas">
<div class="hoofdtekst">
<div class="titelparent">
<div class="titel"> <h1>Webdesign portfolio</h1></div>
<div class="opvul"><p></p></div>
</div>
<div class="artikel1">
<div class="tekst">
<p>Zie hier een aantal van mijn projecten, momenteel ben ik nog niet profesioneel bezig met Webdesign dus alles wat u hier op deze website ziet zijn projecten die ik leuk vond om te maken en vooral om veel te oefenen.<br>
Alles wat ik heb gemaakt is 100% html/css.</p>
</div>
<div class="hoofdfoto"> <img src="afbeeldingen/hoofdpaginafoto.jpg" alt="webdesigner foto" class="foto"> </div>
</div>
<div class="project">
<div class="nr1"><a href="html/jamey/index.html" class="projectbtn"><h2>BKC Streetware</h2><img src="afbeeldingen/jamey.jpg" class="projectfoto"></a></div>
<div class="nr1"><a href="html/recepten/index.html" class="projectbtn"><h2>Koken met ons</h2><img src="afbeeldingen/recepten.jpg" class="projectfoto"></a></div>
<div class="nr1"><a href="html/B&B/basispagina.html" class="projectbtn"><h2>De rode zon</h2><img src="afbeeldingen/b&b.jpg" class="projectfoto"></a></div>
</div>
</div>
</div>
</main>
<script src="java/script.js"></script>
</body>
</html>
en de Css:
body {
margin: 0px;
padding: 0px;
font-family: arial;
color: white;
overflow-x: hidden;
}
/* font-family: 'Dancing Script', cursive;
font-family: 'Playfair Display', serif;
font-family: 'Train One', cursive;
font-family: 'Zen Dots', cursive; */
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: grey;
font-weight: lighter;
font-family: 'Lora', serif;
}
.logo{
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 25px;
font-family: 'Playfair Display', serif;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links a{
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 20px;
font-weight: lighter;
font-family: 'Playfair Display', serif;
}
.nav-links li{
list-style: none;
}
.nav-links :hover{
text-decoration: underline;
}
.opvul{
width: 45%;
}
.titelparent{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
main{
height: 100%;
background: linear-gradient(to right top, rgba(119, 136, 153, 1) 0%, rgba(112, 128, 29, 1) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.glas{
background: white;
min-height: 80vh;
width: 75%;
background: linear-gradient(to right top, rgba(119, 136, 153, 0.7) 0%, rgba(112, 128, 29, 0.3) 100%);
border-radius: 2rem;
z-index: 3;
backdrop-filter:blur(0.4rem);
justify-content: left;
display: flex;
}
.titel{
width: 45%;
}
.titel h1{
color: rgb(227, 237, 307);
font-size: 55px;
padding-left: 2%;
font-weight: lighter;
font-family: 'Playfair Display', serif;
}
.artikel1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.tekst{
width: 45%;
margin-bottom: 10%;
}
.tekst p{
font-weight: lighter;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
.hoofdfoto{
width: 45%;
margin-bottom: 5%;
}
.foto{
width: 95%;
}
.project{
width: 100%;
display: flex;
justify-content: space-around;
margin-bottom: 5%;
}
.nr1{
width: 30%;
height: 50vh;
}
.projectfoto{
width: 100%;
height: 60%;
margin: 0px;
padding: 0px;
margin-top: 5%;
border-radius: 5px;
}
.nr1 h2{
text-align: center;
font-family: 'Playfair Display', serif;
font-weight: lighter;
font-size: 25px;
border: 2px black solid;
border-radius: 100px;
padding: 3%;
}
.projectbtn{
cursor: pointer;
text-decoration: none;
color: white;
}
.projectbtn :hover{
animation: tada;
animation-duration: 2s;
color: black;
background-color: rgba(112, 128, 29, 0.5);
}
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 10rem;
width: 10rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle1{
top: 25%;
right: 8%;
}
.circle2{
bottom: 0%;
left: 10%;
}
.circle3{
top: 17%;
right: 72%;
}
.circle4{
bottom: 7%;
left: 66%;
}
.circle5{
top: 45%;
right: 38%;
}
.circle6{
bottom: 12%;
left: 36%;
}
.circle7, .circle8, .circle9{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 5rem;
width: 5rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle10, .circle11, .circle12{
background: linear-gradient(to right bottom, rgba(200, 222, 222, 0.9), rgba(156, 170, 185, 0.1));
height: 8rem;
width: 8rem;
position: absolute;
z-index: 1;
border-radius: 50%;
animation: tada;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.circle7{
top: 35%;
right: 28%;
}
.circle8{
bottom: 32%;
left: 76%;
}
.circle9{
top: 30%;
right: 60%;
}
.circle10{
bottom: 65%;
left: 44%;
}
.circle11{
top: 75%;
right: 38%;
}
.circle12{
bottom: 32%;
left: 26%;
}
@media screen and (max-width:1280px){
.glas{
margin-top: 0;
}
.foto{
width: 100%;
}
}
@media screen and (max-width:1000px){
body{
overflow: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top:6vh;
background: grey;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
z-index: 5;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.circle7, .circle8, .circle9{
display: none;
}
.circle10, .circle11, .circle12{
display: none;
}
.circle6{
display: none;
}
.titel{
width: 50%;
}
.tekst p{
font-size: 25px;
}
.glas{
margin-top: 0;
}
.tekst{
width: 100%
}
.titel{
margin-left: 10%;
width: 100%;
}
.project{
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.hoofdfoto{
width: 100%;
margin-bottom: 15%;
display: flex;
justify-content: center;
}
.foto{
width: 95%;
}
.nr1{
width: 95%;
height: 50vh;
margin-bottom: 15%;
}
.artikel1{
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.nav-active{
transform: translateX(0%)
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
en het beetje Java:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',()=>{
nav.classList.toggle('nav-active');
});
navLinks.forEach((link, index)=>{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
});
}
navSlide();