Welcome! 👋

Fullture Course Challenge - website Css3 - Html5 🚀🚀

This is a solution for the Fullture Course Challenge, which was developed into a Super Heroes store website, to test my knowledge in HTML5 and CSS3 acquired in Full-Stack JavaScript course module from Fullture.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge:

---

• Creation of the formatting for the contents using selectors.
• Structuring HTML with semantic tags:

<header>, <section>, <article>, <nav>, <aside>, <main>, <footer> and <figure>

• Code CSS for formatting the semantic tags.
• Format color, font size of titles, menus, texts.
• Format images, correct dimensions, thumbnail, border-radius.
• Format the menu created with lists.
• CSS properties for sizing and positioning an element.

margin, border, padding, width and height

• Use of the property position.
• Use of the Flexible Box Module to spatially organize the elements, aligning and distributing spaces between items in a container
• Use of CSS Grid in the creation of layouts.
• Responsive Design using Media Query.

Links

• solution URL
• live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid Layout
• desktop-first workflow

What I learned

I reinforced the concepts of html semantic tags and form

       <div>
            <form class="register" action="">
                <div class="contact-form-input">
                    <input type="text" placeholder="NOME"><br/>
                    <input type="email" placeholder="EMAIL"><br/>
                    <input type="tel" placeholder="TELEFONE"><br/>
                </div>
                <div class="contact-form-text">
                    <textarea name="" id="" cols="30" rows="10" placeholder="Como podemos ajuda-lo?"></textarea>
                </div>
                <button class="btn btn-slin btn-contact">ENVIAR</button>
            </form>
        </div>

---

I reinforced my CSS knowledge in flex-box , grid layout, border radios, @media query and placeholder.

---

.about-us{
    display: grid;
    grid-template-columns: 50vw auto;
    grid-template-rows: 200px auto;
    height: 100vh;
    background-image: url("../../images/thor_header.jpg");
    background-size: cover;
    background-position: top center;
}

.about-us-text{
    grid-column-start: 2;
    grid-column-end: 3;
    padding: 0 5vw;
}

@media screen and (max-width: 768px){
    .about-us {
        display: flex;
        height: 70vh;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        background-image: linear-gradient(#fe7467, #fc3836);
        background-position: center;
    }
    
    .contact-form-text textarea::placeholder{
    padding-top: 15px;
    text-align: center;
    font-size: large;
    color: #dcdddd;
}

Continued development

I will dedicate myself to future projects using javascript concepts along with html and css which I am studying and improving myself

Author

• Linkdin - Marco Tullio Franca
• Frontend Mentor - @MarcoFranca