• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Flexbox - pomoc projekt

VPS Starter Arubacloud
0 głosów
135 wizyt
pytanie zadane 6 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,120 p.)

Proszę o pomoc i wyjaśnienie gdzie robię błąd w kodzie. Probuje zrobić stronę responsywna z flexboxem natomiast, przyciski w header sie rozjezdzaja i tło nie jest na caly ekran 

 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Michał - Porfolio</title>
  <meta name="description" content="Porfolio, strona zawiera zakres moich umiejętności">
  <link href="https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta name='keywords' content='webdeveloper, strony internetowe, portfolio, css, HTML'>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
                            <!SEKCJA NAGŁOWEK>
<body>
    <header>
        <div class="container0">
            <div class="box1">
                <p>HELLO.</p>
                <h1>I Am a</h1>
                <h2>Front-End-Developer</h2>
            </div>
            <div class="box2">
                <a href="#1" class="button">Projects</a>
                <a href="aboutme.html" class="aboutme">About me</a>
            </div>
            <div class="box3">
                 <img src="headerpicture.png" alt="tloheader zdjecie">
            </div>
        </div>
        
    </header>
                            <!SEKCJA TECHNOLOGIE>
    <div class="container1">
        <div class="box1">
            <h1>My technology skills</h1>
        </div>
        <div class="container2">
            <div class="box2"><img src="searchengine.png" alt="wyszukiwarka google">
            </div>
            <div class="box2"><h2>Search engine optimization</h2>
            </div>
            <div class="box2"><p>Search engine SEO friendly</p>
            </div>
        </div>
        </div>
        <div class="container---1">
           <div class="box1"><img src="devices.png" alt="mobile devices"></div> 
            <h2 class="box1">Work looks great on mobile devices</h2>
            <p class="box1">Websites are available on mobile devices</p>
        </div>
    </div>
                                <!SEKCJA PROJEKTY>   
        
            
        <div class="container2">
            <h1>My projects</h1>  
            <div class="project1">
                    <img src="Project1.jpg" alt="Project 1 ">
                        <h2>Portfolio website</h2>
                            <p>Personal portfolio website, used technologies HTML and CSS</p>
            </div>
            <div class="project2">
                <img src="Project2.jpg" alt="Projekt 2 ">
                    <h2>Converence room website</h2>
                        <p>Converence room website, used technologies HTML, CSS</p>
            </div>
            <div class="project3">
                <img src="Project3.jpg" alt="Projekt 3">
                    <h2>Hotel website</h2>
                        <p>Wesbite about hotel, with reservations</p>
            </div>
                <div class="project4">
                    <img src="Project4.jpg" alt="Projekt 4">
                        <h2>Restaurant website</h2>
                            <p>Restaurant webiste with calendar and reservations<p>
            </div>
        </div>
                                <! SEKCJA MOTTO >
        <div class="container3">
            <h1>My motto</h1>
            <div class="motto">
                <p class="mottotext">
                    Don't Compare Yourself to Others.<br>
                    Compare Yourself to the Person You Were Yesterday. 
                </p>
                <p class="authortext">
                    Johann ML Brown
                </p>
            </div>
            
        </div>
                                <!SEKCJA KONTAKT STOPKA>
        <div class="container4">
            <h2>Get In touch</h2>
            <h1>Contact</h1>
        
            <form>
                <input type="text" placeholder="Your Name" class="name">
                <input type="text" placeholder="E-mail" class="email">
                <textarea placeholder="Your message"></textarea>
                <button>Send now</button>
            </form>
        </div>
        <div class="container5">
                <div class="icon1">
                    <img src="emailicon.png" alt="emailadress"><span>kontakt@gmail.com</span>
                </div>
                <div class="icon2">
                    <img src="facebookicon.png" alt="facebook"><span>Michal Facebook</span>
                </div>
                <div class="icon3">
                    <img src="twittericon.png" alt="twitter"><span>Michal Twitter</span>
                </div>
                <div class="icon4">
                    <img src="googleicon.png" alt="Google"><span>Michal Google</span>
                </div>
        </div>
        </section>
        <footer>
            &copy; Michał
        </footer>
   
</body>
</html>

 

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
                         /*STYLE SEKCJA NAGŁOWEK */   

                          /* STYLE HEADER TEKST */
                          
.container0
{
    display: flex;
    flex-direction: column;
   
}
.box1
{
    
    flex: 1;
    order:1;

}
.box1 p
{
    font-size: 100px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Saira Condensed', sans-serif;
    text-align: center;
    padding-top: 100px;
}
.box1 h1
{
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 24px;
    font-weight: normal;
    font-family: 'Saira Condensed', sans-serif;
    text-align: center;
}
.box1 h2
{
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Saira Condensed', sans-serif;
    text-align: center;
}
.box2
{
    flex:2;
    order:2;
}
.box2 a
{
    text-decoration: none;
    color: black;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300px;
    font-size: 18px;
    border: 2px solid black;
    border-radius: 20px;
    cursor: pointer; 
    padding: 0 20px;
    line-height: 32px;
    margin-left: 250px;
    

}
/* .box2 .button
{
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300px;
    text-decoration: none;
    padding: 0 20px;
    line-height: 32px;
    color: black;
    font-size: 18px;
    border: 2px solid black;
    border-radius: 20px;
    cursor: pointer; 
    margin-left: 250px;

} */
.box3
{
    margin-left: 200px;
    flex:3;
    order: 3;
}
            


                        /* STYLE HEADER BUTTONY */
                    

header
{
    background-color: rgb(255,88,81);
}
.container-0
{
    display: flex;
    flex-direction: column;
    
}
div .box2
{
    flex-direction: column;
}


                            /*STYLE SEKCJA TECHNOLOGIE*/
.container1
{
    display: flex;
    justify-content: flex-end;
}
.container-1 h1
{
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    margin-top: 30px;
}
.container2
{
    display: flex;
    justify-content: center;
}
.container2 .box2
{
    align-items: center;
}
.container2 h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

.container--1 img
{
    width: 70%;
    
}
.container--1 p
{
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 300px;
    
}
.container---1
{
    display: flex;
    flex-direction: row;

}
.box1
{

}
/* .container---1 h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}
.container---1 p
{
    font-family: 'Saira Condensed', sans-serif;
    font-size: 12px;
    font-weight: 300px;

} */
                            /*STYLE PROJEKTY */
.container2 h1
{
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
}
.container2 h2
{
    font-size: 24px;
    border-bottom: 4px solid white;
    background-color: #f2f1ed;
}
.container2 p
{
    background-color: #f2f1ed;
    font-size: 18px;
}
.container2 img
{
    max-width: 1600px;
    width: 100%;
}
.container2 
{
    display: flex;
    flex-direction: column;

}
.project1
{
    flex: 1;
    order:1;

}
.project2
{
    flex:2;
    order:2;
}
.project3
{
    flex:3;
    order:3;
}
.project4
{
    flex:4;
    order:4;
}
                            /*STYLE MOTTO*/
.container3 h1 
{
    font-size: 26px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin: 25px;
    background-color: #f2f1ed;
    
}
.container3 .motto
{
    text-align: center;
    font-size: 18px;
    background-image: url("motto.jpeg");
    background-size: cover;
    background-attachment: fixed;
    height: 200px;
    padding-top: 100px;
}
.container3 p.authortext    
{
    font-size: 12px;
    text-align: center;
}
.container3
{
    display: flex;
    flex-direction: column;
    
}
                        /* STYLE KONTAKT STOPKA */
.container4 h1
{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    text-align: center;
    padding-bottom: 20px;

}
.container4 h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    text-align: center;
    padding-top: 0 20px;
}
.container4 input,button,textarea
{
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}
.container4 
{
    display: flex;
}

 

1 odpowiedź

+1 głos
odpowiedź 6 lipca 2020 przez MrJoker99 Początkujący (420 p.)

Twój kod css powinien zmienić się w podanych dwóch miejscach ,aby wyrównać do środka przyciski.


.box2 a
{
    text-decoration: none;
    color: black;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300px;
    font-size: 18px;
    border: 2px solid black;
    border-radius: 20px;
    cursor: pointer; 
    padding: 0 20px;
    line-height: 32px;
    /* pozbywasz się stąd margin-left , gdyż z tym będzie jakoś dziwnie rozłożone*/
}

.box2
{
    flex:2;
    order:2;
    text-align: center;  /*tym centrujesz elementy , zawarte w box2 , czyli twoje przyciski*/
}

Natomiast jeśli chcesz, aby cała strona była tego koloru to zamiast wprowadzać background-color dla znacznika header  , zrób to dla znacznika body

body
{
    background-color: rgb(255,88,81);
}

Mam nadzieję, że pomogłem .

komentarz 6 lipca 2020 przez gmcode Gaduła (3,120 p.)
Dzięki za pomoc, czy w przypadku mojego img w header również mogę użyć justify- content: flex-end ?
komentarz 6 lipca 2020 przez MrJoker99 Początkujący (420 p.)

@gmcode musiałbyś powiedzieć co chcesz przez to osiągnąć , bo dodanie do box3 justify-content: flex-end;  nic nie zdziała , ponieważ Twój element(div z klasą box3 ) nie jest  kontenerem Flex ani Grid.

Podobne pytania

+1 głos
2 odpowiedzi 333 wizyt
pytanie zadane 6 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)
0 głosów
0 odpowiedzi 517 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez jakznalezcchlopaka Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 158 wizyt
pytanie zadane 21 kwietnia 2017 w HTML i CSS przez dominik36 Początkujący (480 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...