I’m a brand-new to shows and also would certainly such as some assist with this web-build for my college internet site profile. Essentially, I am attempting to quit the listing from falling when recovering down a page. Please do not hesitate to advise any kind of modifications along with I would certainly like this page to be as enhanced as feasible.
Lots of many thanks!
Jack
<.
<< head>>.
<< web link rel =" stylesheet" href =" style.css">
<> < title>> Jack Shaw|Dev and also Style<.
<< meta name="viewport" web content=" size= device-width, initial-scale= 1.0">>.
<< meta charset =" utf-8">
<> < manuscript src=" https://kit.fontawesome.com/a33f9e206b.js" crossorigin=" confidential"><> .
<< body>>.
<< div course =" container">
<> < div course =" header">
<> < nav course =" navigating">
<> < ul>>.
<< li>>.
<< a href =" #">> House< .
<< li>>.
<< a href="#">> Year 1<.
<.
<< li>>.
<< a href =" #">> Year 2<.
<.
<< li>>.
<< a href =" #">> Year 3<.
<.
<< li>>.
<< a href =" #">> Regarding< .
<.
<.
<.
<< div course =" hero">
<> < h1>> Hero Job<.
<.
<< div course =" project-1">
<> < h2>> Job 1<.
<.
<< div course =" project-2">
<> < h2>> Job 2<.
<.
<< div course =" idea">
> Principle Art and also Various Other Functions.
<.
<< div course =" around">
> Regarding Me.
<.
<< div course =" footer">
> Social Network and also Information.
<.
<.
<.
<.
".
/ * Site Grid and also Margins */.
body {
margin: 0;
background-color: rgb( 136, 165, 197).
}
/ * Grid Container */
. container {
size: 100vw;
elevation: 100vh;
font-family: 'Mire', sans-serif;
font-weight: vibrant;
font-size: 20px;
screen: grid;
grid-template-columns: repeat( 10, 1fr);
grid-template-rows: 70px repeat( 8, 1fr) 100px;
space: 10px;
extra padding: 10px;
box-sizing: border-box;
}
/ * Container Boxes */
. container div {
boundary: 1px strong black;
background-color: rgb( 185, 205, 207);
}
/ * Header */
. header {
grid-column: 1/ 11;
padding-top: 5px;
}
/ * Header Tabs */.
ul li {
float: left;
margin-right: 8%;
margin-left: 8%;
list-style: none;
}
. footer {
grid-column: 1/ 11;
grid-row: 10/ 11;
}
. hero {
grid-column: 1/ 7;
grid-row: 2/ 7;
}
. hero h1 {
margin: 0;
margin-top: 100px;
margin-left: 50px;
}
. project-1 {
grid-column: 7/ 9;
grid-row: 2/ 7;
}
. project-2 {
grid-column: 9/ 11;.
grid-row: 2/ 7;.
}
. idea {
grid-column: 1/ 6;.
grid-row: 7/ 10;.
}
. concerning {
grid-column: 6/ 11;.
grid-row: 7/ 10.
}
".
Attempted to investigate just how to quit this from occurring however unsure why.
