Pictures don't align and won't scale properly - html

Question

I am making a site for my school project. I am stumbling upon some problems...
I want to make a tab with links, in which when you press upon an image you will get send to the topic. I think I am trying to much at the same time, because I want my site to function on different screen resolution.
(Note: not everything is working and don't mind the random notes, they are in Dutch. I'm still working on the site)
Here is my HTML and CSS:
BODY { font-family: Andalus, Helvetica, sans-serif; background-color: black; color: black; font-size: 15px; margin: 0px; padding: 0px; width: 100%; height:100%;-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;}
div#box1 {border-color:#666666; max-width: 100% ; max-height: 80px;
display: block; height: 10%;background-color:#666666 ;margin-top: -120px;-webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
div#box2 { border-color:#585858 ;margin-left:auto; max-width: 100% ; height: 855px; display: block; color: black; background-color: #585858; margin-top:100px; -webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;}
div#box4 { border-style:none; margin-left: 810px; margin-top: 450px; width: 279px; height: 330px; background-color: none;}
div#titel1 {margin-top: 100px; background-color: #00000000}
div#txt2 {margin-top:100px; font-size: 20px; margin-left: 100px}
/* Voor #links pagina */
div#links1 {margin-top: 250px; margin-left: 50px;}
div#links2 {margin-top: 250px; margin-left: 300px;}
de img { margin-left: 50px; margin-top: 0px;}
da img { margin-left: 1000; margin-top: -500px;}
div#flash {margin-top:400px; font-size: 45px; margin-left: 350px}
p {background-color: none; color: black; padding: 1px; margin-top: 0px; width: 965px; margin-bottom: 0px; margin-left: 20px; margin-right: 5px; position: relative; line-height: 15px}
H1 { font-size: 85px; background-color: #00000000; margin-left: 550px; }
H2 { margin-top: 25px; margin-left: 355px; color: #db0000}
.lijst { list-style-type: none; padding: 0px; margin-top: 20px; margin-left: 5px; font-size: 15px; color: crimson;}
.sublijst { list-style-type:disc; padding: 0px; margin-left: 20px; font-size: 13px; font-size: 15px}
.pageselect { font-weight: bold; color: #757575;}
.nextpage { float: right; margin-right: 5px;}
a:link { color: black;}
a:visited { color: black;}
b:link { color: grey;}
b:visited { color: grey;}
iframe {border: 5px; border-style: groove; border-color: black}
hr {color: black}
br {text-align: justify; color: black; font-family: inherit; font-size: 10px; margin-left: 5px}
a:hover img { display:block; }
b:hover img { display:block; }
div#box1{width:100%;}
div#box2{width:100%;}
div#box3{width:100%;}
body{ overflow: hidden;}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-top: 20px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #4f4f4f;
color: black;
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4a0900;
color: white;
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-18 14:7:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
#keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
.blinking{
animation:blinkingText 2s infinite;
}
#keyframes blinkingText{
0%{ color: #D70606; }
49%{ color: #D70606; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #D70606; }
}
/* Als er iet mis is gebeurt het vast hier */
#media only screen and (min-width: 768px) {
/* For desktop: */
.txt1 {width: 50%;}
#media only screen and (min-width: 600px) {
/* For tablets: */
.txt1 {width: 25%;}
/* For mobile phones: */
[class*="txt-"] {
width: 100%;
/* ..... */
<HTML>
<HEAD>
<TITLE>Links</TITLE>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<BODY>
<div id="box1">
<div class="topnav">
Home
<a class="active" href="links.html">Links</a>
Contact
About
</div>
</div>
<style>
img {
width:;
height: auto;
max-height: 1000px;
max-width: 1000px;
min-height: 500px;
min-width: 500px;
}
</style>
<div style="margin-top: 10%; margin-left: 10%">
<!- Deepweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png
Darkweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png -!>
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" title="Deepweb"; width="500"; height="500"></div>
<br>
<br>
<div style="margin-top: -32%; margin-left: 60%">
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png" title="Darkweb"; width="500"; height="500">
</div>
</BODY>
</HEAD>
</HTML>
I hope somebody can help me with fixing these problems, and also feedback on the site would also be nice.

Answer 1

Ok, since this is a school project there a lot of things you should look of, the first thing that got in my eyes are that you put your Body inside your head. The structure for HTML is the following:
<html>
<head></head>
<body>
...
</body>
</html>
Then a second thing that you should look for is, that you format your code in a good way, especially in your CSS (teacher will grade it better, when the code looks better and you can read it easily) for example in CSS your common way was to write .class{background:black; color:white; display:block} which isnt a good way to write it, try write it like:
.class{
background: black;
color: white;
display: block;
}
much more readable and your teacher will like it.
And as you might thing, this will create a file with a hight number of lines, which is already the case in your css file. You have tons of animations in your main css file, you can simply create a new css file (name it animations.css) store the animations in it and link it to your html page. This will keep everything clean and more readable.
As a third thing to look for is, to strictly seperate HTML and CSS. Since HTML5 its not Standard anymore to use the HTML-tag "style" when the Project is for an actual IT class or something you will get worse grading for it. And as you might realized when you mix togheter the style tag in html (<div style="margin:10px; padding:5px">) and the normal css files, you lose the clarity about your project.
Ok as a last Tip for your project (you asked for feedback), there are a neat thing called "grid" which is absolutley amazing for responsive sites (the thing you spoke about with "it should work on diffrent screens") when grid is to complicated you can still use "flex" which is easy to use, but isnt as powerful as grid. It will fix your problem with 2 lines, and will be responsive (the thing with on every screen). I provided a little Example at the bottom, i changed the code a lot (basically did everything i wrote at the top).
For the Code:
look at the class ".imgwrapper" it will hopefully fix your problem when i understand it right, and as a tip to it the values with vw and vw (f.e. 100vw) is something you should use when youre working responsive, its basically the percentage of your current screen view: https://www.w3schools.com/cssref/css_units.asp
Kindest Regards Raqha
.imgwrapper {
margin-top: 40vh;
width: 100vw;
height: 80vh;
display: flex;
justify-content: space-around;
}
.imgwrapper img {
width: 30vw;
}
BODY {
font-family: Andalus, Helvetica, sans-serif;
background-color: black;
color: black;
font-size: 15px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;
}
div#box1 {
border-color: #666666;
max-width: 100%;
max-height: 80px;
display: block;
height: 10%;
background-color: #666666;
margin-top: -120px;
-webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
div#box2 {
border-color: #585858;
margin-left: auto;
max-width: 100%;
height: 855px;
display: block;
color: black;
background-color: #585858;
margin-top: 100px;
-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;
}
div#box4 {
border-style: none;
margin-left: 810px;
margin-top: 450px;
width: 279px;
height: 330px;
background-color: none;
}
div#titel1 {
margin-top: 100px;
background-color: #00000000
}
div#txt2 {
margin-top: 100px;
font-size: 20px;
margin-left: 100px
}
/* Voor #links pagina */
div#links1 {
margin-top: 250px;
margin-left: 50px;
}
div#links2 {
margin-top: 250px;
margin-left: 300px;
}
div#flash {
margin-top: 400px;
font-size: 45px;
margin-left: 350px
}
p {
background-color: none;
color: black;
padding: 1px;
margin-top: 0px;
width: 965px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 5px;
position: relative;
line-height: 15px
}
H1 {
font-size: 85px;
background-color: #00000000;
margin-left: 550px;
}
H2 {
margin-top: 25px;
margin-left: 355px;
color: #db0000
}
.lijst {
list-style-type: none;
padding: 0px;
margin-top: 20px;
margin-left: 5px;
font-size: 15px;
color: crimson;
}
.sublijst {
list-style-type: disc;
padding: 0px;
margin-left: 20px;
font-size: 13px;
font-size: 15px
}
.pageselect {
font-weight: bold;
color: #757575;
}
.nextpage {
float: right;
margin-right: 5px;
}
a:link {
color: black;
}
a:visited {
color: black;
}
b:link {
color: grey;
}
b:visited {
color: grey;
}
iframe {
border: 5px;
border-style: groove;
border-color: black
}
hr {
color: black
}
br {
text-align: justify;
color: black;
font-family: inherit;
font-size: 10px;
margin-left: 5px
}
/* a:hover img { display:block; }
b:hover img { display:block; } */
div#box1 {
width: 100%;
}
div#box2 {
width: 100%;
}
div#box3 {
width: 100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-top: 20px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #4f4f4f;
color: black;
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4a0900;
color: white;
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-18 14:7:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
#keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
.blinking {
animation: blinkingText 2s infinite;
}
#keyframes blinkingText {
0% {
color: #D70606;
}
49% {
color: #D70606;
}
60% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #D70606;
}
}
/* Als er iet mis is gebeurt het vast hier */
#media only screen and (min-width: 768px) {
/* For desktop: */
.txt1 {
width: 50%;
}
}
<HTML>
<HEAD>
<TITLE>Links</TITLE>
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</HEAD>
<BODY>
<div id="box1">
<div class="topnav">
Home
<a class="active" href="links.html">Links</a>
Contact
About
</div>
</div>
<div class="imgwrapper">
<div>
<a href="deepweb.html">
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" ></a>
</div>
<div>
<a href="darkweb.html"><img
src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png"></a>
</div>
</BODY>
</HTML>