i'm building my personal website as a school project. We followed along a tutorial given by the teacher and I nailed it. This time I have to create my own. I started building a grid as the website template, nothing fancy: just a navbar on top, a picture on the left and my information on the right.-- that means one row on top and two columns below" I built the contact page and left the hyperlinks for the end. When I added them. The grid will display everything as 1 column and 3 rows. I don't understand what am I doing wrong. Also i copy pasted from the other assignment the code for the button, the "required" command i sued before for the email, and a pattern to validate the email. How ever this time my button won't do anything. in the toher assignment the browser would display an alert asking to complete that section. The form in the picture is in another grid done in the Main section which is the right section of the website.
the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<!------------------favicons------------------------------------->
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./img/favicon-96.png">
<link rel="icon" type="image/png" sizes="144x144" href="./img/favicon-96.png">
<!------------------stlysheet----------------------------------->
<link rel="stylesheet" href="./stylesheet.css" />
</head>
<body>
<header>
<h1>Rubén Pérez
<h2>Full-Stack JavaScript Web Developper</h2>
</header>
<!----------- big white container ------------->
<div >
<nav>
<!-- <ul >
<li >
<a style="text-decoration: none;" href="./about.html">ABOUT ME</li>
<li >
<a style="text-decoration: none;" href="./professional.html">PROFESSIONAL</li>
<li >
<a style="text-decoration: none;" href="./academic.html">ACADEMIC</li>
<li >
<a style="text-decoration: none;" href="./contact.html">CONTACT ME</li>
</ul> -->
<ul >
<li >ABOUT ME</li>
<li >PROFESSIONAL</li>
<li >ACADEMIC</li>
<li >CONTACT ME</li>
</ul>
</nav>
<main>
<div >
<div >SEND ME AN EMAIL</div>
<div >
<label id="name" for="name"></label>
<input required
id="name"
name="name"
type="text"
placeholder="Name"
style="width: 410px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;">
</div>
<div >
<label id="subjectForm" for="subjectForm"></label>
<input required
id="subjectForm"
name="subjectForm"
type="text"
placeholder="Subject"
style="width: 410px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;">
</div>
<div >
<label id="emailForm" for="emailForm"></label>
<input required
pattern='^(([^<>()[\]\\.,;:\s@"] (\.[^<>()[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$'
id="emailForm"
name="emailForm"
type="email"
placeholder='Email'
style="width: 410px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;">
</div>
<div >
<label id="messageForm" for="messageForm"></label>
<textarea required
id="messageForm"
name="messageForm"
type="text"
placeholder="Message"
style="width: 410px; height: 100px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;"></textarea>
</div>
<div >
<input id="submit" type="submit">
</div>
</div>
</main>
<div >
<img
src="./2021_MuscleTech_alargado.jpg"
alt="Profile Picture">
</div>
</div>
<footer></footer>
</body>
</html>
THE CSS
body {
background-color: #F5F5F5;
}
header {
text-align: center;
}
h1 {
font-family: 'Corbel', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: inline-block;
color: #33373D;
}
h2 {
font-family: 'Corbel Light', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: inline-block;
font-weight: lighter;
color: #33373D;
}
.big-container-white {
background-color: white;
margin-left: 12rem;
margin-right: 12rem;
box-shadow: 2px 3px 5px 0px #a1a0a0;
/*der/izq, arriba/abajo/, nivel de blur, agradar/encoger por parejo */
display: grid;
height: auto;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
grid-template-rows: auto auto;
grid-template-areas:
"nav nav nav nav nav"
"sidePicture main main main main";
grid-gap: 0.2rem;
}
.navMenu {
color: grey;
font-family: 'Corbel Light', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: inline-block;
width: 180px;
}
.navMenu-list {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
margin-top: 3%;
justify-content: center;
margin-bottom: 30px;
}
nav {
background-color: white;
grid-area: nav;
height: fit-content;
}
main {
grid-area: main;
margin-left: 4%;
margin-right: 4%;;
width: fit-content;
}
.sidePicture {
background-color: white;
grid-area: sidePicture;
}
.profile-picture {
width:85%;
display: block;
margin: 0 10% 20% 10%;
/* right, left, bottom, left */
}
.forms-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"instructions"
"nameForm"
"subject"
"email"
"message"
"submitButton";
/* "reset"; */
}
.instructions {
grid-area: instructions;
color: #33373D;
font-family: 'Corbel', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;;
font-weight: bold;
font-size: larger;
margin-top: 10px;
margin-bottom: 15px;
}
.nameForm {
grid-area: nameForm;
margin-top: 15px;
text-align: left;
}
.subject {
grid-area: subject;
margin-top: 15px;
text-align: left;
}
.email {
grid-area: email;
margin-top: 15px;
text-align: left;
/* width: max-content; */
}
.message {
grid-area: message;
margin-top: 15px;
text-align: left;
}
.submitButton {
grid-area: submitButton;
margin-top: 10px;
}
/* .reset {
grid-area: reset;
margin-top: 0px;
text-align: left;
} */
/* para telefonos con pantallas de 1100 px o menos */
@media only screen and (max-width: 1100px) {
h1 {
margin-bottom: 0px;
}
h2 {
font-size:large;
margin-top: 0px;
}
.big-container-white {
/* background-color: white; */
margin-left: 0.1rem;
margin-right: 0.1rem;
box-shadow: 2px 3px 5px 0px #a1a0a0;
/*der/izq, arriba/abajo/, nivel de blur, agradar/encoger por parejo */
/* display: grid; */
/* height: 40rem; */
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr;
grid-template-areas:
"sidePicture nav "
"main main";
grid-gap: 0.15rem;
}
.profile-picture {
width:100%;
display: block;
margin: 2% 4% 0 4%;
/* right, left, bottom, left */
}
}
I've tried everything i know xD but i'm a beginner so i'm kinda lost. =(
CodePudding user response：
You forgot to close your anchors for the links. Once I closed them all, your grid went back to normal.
<!--<a href="#"></a>-----dont forget your </a>---->
<ul >
<li >
<a style="text-decoration: none;" href="./about.html">ABOUT ME</a></li>
<li >
<a style="text-decoration: none;" href="./professional.html">PROFESSIONAL</a></li>
<li >
<a style="text-decoration: none;" href="./academic.html">ACADEMIC</a></li>
<li >
<a style="text-decoration: none;" href="./contact.html">CONTACT ME</a></li>
</ul>