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

Flexbox - pomoc projekt

0 głosów
287 wizyt
pytanie zadane 6 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,140 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,140 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 672 wizyt
Flexbox filmy
pytanie zadane 6 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)
0 głosów
0 odpowiedzi 781 wizyt
Jak Wyrównać Elementy Menu - CSS flexbox
pytanie zadane 5 lipca 2018 w HTML i CSS przez jakznalezcchlopaka Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 290 wizyt
Flexbox oraz układ ikon
pytanie zadane 21 kwietnia 2017 w HTML i CSS przez dominik36 Początkujący (480 p.)

93,731 zapytań

142,668 odpowiedzi

323,286 komentarzy

63,290 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...