Vraag


Acties:
  • 0 Henk 'm!

  • jeffreyvli
  • Registratie: Mei 2021
  • Laatst online: 07-05-2021
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!!


Afbeeldingslocatie: https://tweakers.net/i/M8KECXObBwTX7td_ZpwptBgjR-8=/x800/filters:strip_icc():strip_exif()/f/image/R2G6jRJwCyKHyp9IOUrw33Yd.jpg?f=fotoalbum_large

Afbeeldingslocatie: https://tweakers.net/i/tray1mV54IdlxpoL6H6PgxNzVRk=/x800/filters:strip_icc():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();

Alle reacties


Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Sorry, maar dit is niets meer dan een Kan iemand even...? en daar doen we hier niet aan ;)

De vragen die hier staan wanneer je hier een nieuw topic opent staan er niet voor niets:
Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...
Ik verzoek je vriendelijjk onze Quickstart even door te nemen en 't dan nog eens opnieuw te proberen. Gebruik dan ook meteen code tags om relevante(!) stukjes(!) code te posten ipv volledige bestanden, maak een testcase en ontdoe die dan meteen van alle (merk)namen, domeinen etc. want anders is 't potentieel ook nog spam ;)

Oh, en waarom je je topic hebt getagged met "Laptops en systemen", "Specialisaties" en "Internet" is me al helemaal een raadsel :X 8)7 Die laatste zie ik nog enigszins een klein beetje maar is nogal breed, die andere twee zijn écht onnodig.

[ Voor 10% gewijzigd door RobIII op 07-05-2021 12:07 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Dit topic is gesloten.