0

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&nbsp;&nbsp;
        <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. =(

1 Answer 1

0

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 class="navMenu-list">
                        <li class="navMenu">
                            <a style="text-decoration: none;" href="./about.html">ABOUT ME</a></li>
                        <li class="navMenu">
                            <a style="text-decoration: none;" href="./professional.html">PROFESSIONAL</a></li>
                        <li class="navMenu">
                            <a style="text-decoration: none;" href="./academic.html">ACADEMIC</a></li>
                        <li class="navMenu">
                            <a style="text-decoration: none;" href="./contact.html">CONTACT ME</a></li>
                    </ul>
5
  • 1
    Wow, this worked perfectly. I am so very dumb. Thank you thousands!!! I was going crazyy 🤜🤛
    – rubensoon
    Nov 7, 2022 at 0:31
  • No problem! Its easy to miss small parts of code such as : ; and many many many others. Idk if you use and IDE, but you should if you don't. I use Visual Studio Code to edit all my text. Nov 7, 2022 at 1:06
  • In VS Code if you have it setup with all the extensions and what not it will help you keep your code clean and efficient as well as checking for errors. It did not give me and error for you anchor tags "a" but, if you just type something like "a" then hit tab it will auto print the full anchor tag for you and you just edit the rest to meet your criteria. This works for all tags. If you end up using VS Code you should watch a tips and tricks video to learn some of the cool things that will speed you up and make life way easier. Visual Studio Code is free on Microsoft's website. Nov 7, 2022 at 1:09
  • 1
    Thank you!!!! I do use VS Code, I just didn't see this part. 2 months ago I didn't know any of html, css and javascript. I'm slowly progressing. Thank you for your suggestion, i'll explore the extensions and also with time i think I'll get better at this!!! thank you again! i was getting desperate and frustrated. I also resolved the other issue i had by putting an "action" in the form tag. you are the best!
    – rubensoon
    Nov 7, 2022 at 1:16
  • Here to help! Glad you figured another issue out. Yes coding takes hours and hours of time to get efficient at, and even then there is always vast room to improve and learn new things. Keep at it! Work at it everyday and eventually the stuff you find difficult now will seem minute down the road! Cheers! Nov 7, 2022 at 1:25

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.