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 class="big-container-white">
<nav>
<!-- <ul class="navMenu-list">
<li class="navMenu">
<a style="text-decoration: none;" href="./about.html">ABOUT ME</li>
<li class="navMenu">
<a style="text-decoration: none;" href="./professional.html">PROFESSIONAL</li>
<li class="navMenu">
<a style="text-decoration: none;" href="./academic.html">ACADEMIC</li>
<li class="navMenu">
<a style="text-decoration: none;" href="./contact.html">CONTACT ME</li>
</ul> -->
<ul class="navMenu-list">
<li class="navMenu">ABOUT ME</li>
<li class="navMenu">PROFESSIONAL</li>
<li class="navMenu">ACADEMIC</li>
<li class="navMenu">CONTACT ME</li>
</ul>
</nav>
<main>
<div class="forms-container">
<div class="instructions">SEND ME AN EMAIL</div>
<div class="nameForm">
<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 class="subject">
<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 class="email">
<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 class="message">
<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 class="submitButton">
<input id="submit" type="submit">
</div>
</div>
</main>
<div class="sidePicture">
<img class="profile-picture"
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. =(