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

Ocena kodu HTML/ CSS

0 głosów
233 wizyt
pytanie zadane 26 marca 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)

Witam,

jeśli ktoś ma czas i chciałby go poświęcić na ocenę kodu i wytknięcie błędów to będę bardzo szczęśliwy :) 

Prosiłbym również o poradę jak mam wyjąć div:

<div class="about_img">
<img src="images/salon_1.png" width="100%" height="100%" alt="Salon">
</div>

z section, aby obrazek skalował się poprawnie.
 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Street's</title>
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="style2.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  <body>
    <header>
      <div>
        <a href="#"><img src="images/logo.png" width="349px" height="230px"alt="logo"></a>
      </div>
    </header>

      <nav>
        <ol>
          <li><a href="#">GŁÓWNA</a></li>
          <li><a href="#">GALERIA</a></li>
          <li><a href="#">O NAS</a></li>
          <li><a href="#">OFERTA</a></li>
          <li><a href="#">REZERWACJA</a></li>
          <li><a href="#">KONTAKT</a></li>
        </ol>
      </nav>


    <div class="slider">
      <img src="images/salon_1.png" width="100%" height="100%" alt="Salon">
    </div>

    <section class="offerCON">
        <h1>-Nasza oferta-</h1>
        <p>Szukasz nowego spojrzenia i nowego ja? Chciałbyś poczuć, że czas jaki poświęcamy na wykonanieusługi jest tylko dla Ciebie? Cenisz odwagę i świeże pomysły? Przyjdź i odmień swój styl ! Zapraszamy!</p>

        <div class="offer">
          <a href="#"><img src="images/oferta/golibroda.png" width="100%" height="100%" alt="golibroda"></a>
          <a href="#"><img src="images/oferta/scinanie_meskie.png" width="100%" height="100%" alt="scinanie_meskie"></a>
          <a href="#"><img src="images/oferta/odzywki.png" width="100%" height="100%" alt="odzywki"></a>
          <a href="#"><img src="images/oferta/scinanie.png" width="100%" height="100%" alt="scinanie"></a>
          <a href="#"><img src="images/oferta/farbowanie.png" width="100%" height="100%" alt="farbowanie"></a>
          <a href="#"><img src="images/oferta/modelowanie.png" width="100%" height="100%" alt="modelowanie"></a>
        </div>

        <h3>Umów się na wizytę już teraz!</h3>

        <div class="button">
          <a href="#">REZERWUJ TERMIN</a>
        </div>


    </section>
    <section class="about">
        <h2>-O NAS-</h2>
        <p>Tworzymy grupę świetnie uzupełniających się profesjonalistów. Biorąc udział w szkoleniach zdobywamy certyfikaty podążając za aktualnymi trendami mody. Wszystko to robimy w trosce o jakość świadczonych usług. Osoby chętne do współpracy zapraszamy do sprawdzenia jak nasza praca prezentuje się od zaplecza.</p>

        <div class="about_img">
          <img src="images/salon_1.png" width="100%" height="100%" alt="Salon">
        </div>

    </section>
    <section class="kontakt">
asdasdadadadsdasdadadad
    </section>


  </body>
</html>

body{
  font-size: 0.65em;
  font-family: 'Roboto', sans-serif;
}

section, footer, nav, .onas{
  max-width: 1000px;
  margin: auto;
}

/*
######################################################
####################### HEADER ######################
######################################################
*/
header{
  width: 100%;
  z-index: 0;
  position: relative;
  height: 360px;
}

header div{
  width: 100%;
  height: 330px;
  border-top: 15px solid #E12227;
  border-bottom: 15px solid #E12227;
  background-color: #3F5075;
  text-align: center;
}

header a img{
  margin-top: 45px;
}

/*
###################################################
####################### NAV ######################
##################################################
*/

nav{

  background-color: yellow;
  min-height: 100px;
}
nav > ol{
  list-style-type: none;

}

nav > ol > li{
  float: left;
  margin: 30px 2% 30px 0;
  width: 15%;
  font-size: 2em;
  background-color: #E12227;
  text-align: center;
  height: 40px;
}
nav > ol > li:last-child{
  margin-right: 0;
}

nav > ol > li > a{
  padding: 7% 0;
  color: #fff;
  text-decoration: none;
  display: block;
}
/*HOVER*/
nav > ol > li:hover{
  background-color: #3F5075;
  transition-duration: 1s;
}

/*
##################################################
#################### SLIDER ######################
##################################################
*/
/*
.slider {
  width: 100%;
  margin: auto;
}
*/



.slider > img{

  width: 100%;
  height: 100%;
}


/*
##################################################
#################### OFERTA ######################
##################################################
*/
.offerCON{
  width: 100%;
}

.offerCON h1{
  font-size: 8em;
  color: #E12227;
  text-align: center;
  padding: 40px 0;
}

.offerCON p{
  font-size: 2em;
  max-width: 400px;
  text-align: center;
  padding: 0 30%;
  float: left;
}

.offerCON h3{
  font-size: 2.5em;
  width: 50%;
  margin: 20px 25%;
  text-align: center;
  float: left;
}

/*
.offerCON button{
  width: 250px;
  font-size: 2em;
  padding: 20px 20px;
  background-color: #E12227;
  text-decoration: none;
  border: none;
  color: yellow;
  margin: 20px 37.5%;
}
*/

.offerCON .button{
  float: left;
  width: 250px;
  margin: 0 37.5%;
}

.offerCON .button a{
  font-size: 2em;
  padding: 20px 0;
  background-color: #E12227;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-weight: 600;

  display: block;
  transition: 2s;
}

.offerCON .button a:hover{
  border-radius: 25px;
  transition: 2s;
}

/*
#######################################################
####################### OFFER_HOVER ###################
#######################################################
*/
.offer {
  width: 100%;
  float: left;
  margin-top: 40px;
}

.offer a{
  display: block;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
  width: 320px;
}

.offer a:nth-of-type(3n) {
  margin-right: 0px;
}

.offer a img{
  float: left;
  transition-duration: 5s;
}

.offer a:after{
  background-color: rgba(63, 80, 117,.7);
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 38px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  transition-duration: 1s;
}

.offer a:nth-of-type(1):after{
  content:"GOLIBRODA";
  padding: 45% 10%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(2):after{
  content:"STRZYŻENIE MĘSKIE";
  padding: 45% 10%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(3):after{
  content:"ODŻWYKI";
  padding: 45% 20%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(4):after{
  content:"STRZYŻENIE DAMSKIE";
  padding: 45% 10%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(5):after{
  content:"FARBOWANIE";
  padding: 45% 10%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(6):after{
  content:"MODELOWANIE";
  padding: 45% 2%; /*ustawia tekst w odpowiednim miejscu*/
}

.offer a:hover:after{
  display: block;
  cursor: pointer;
  opacity: 1;
}

/*
#######################################################
####################### O NAS ###################
#######################################################
*/

.about{

  width: 100%;

}

.about h2{
  width: 50%;
  margin: 40px 25%;
  float: left;
  font-size: 60px;
  max-height: 100px;
  color: #3F5075;
  text-align: center;
}

.about p {
  float: left;
  font-size: 2em;
  width: 50%;
  position: relative;
  margin: 20px 25%;
  text-align: center;
}
.about_img{
  float: left;

}

.about_img > img{
  left: 0;
  width: 100%;
  position: absolute;
}
/*
#######################################################
####################### RESPONSYWNOSC ###################
#######################################################
*/

@media all and (min-width:600px) and (max-width:900px){
  nav > ol > li{
    font-size: 1.5em;
}

.offer a{
  margin-right: 20px;
  width: 256px;

}

.offer a img{
  width: 100%;
}

.offer a:after{
  font-size: 30px;
  width: 100%;
}

.offer a:nth-of-type(1):after{
  content:"GOLIBRODA";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(2):after{
  content:"STRZYŻENIE MĘSKIE";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(3):after{
  content:"ODŻWYKI";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(4):after{
  content:"STRZYŻENIE DAMSKIE";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(5):after{
  content:"FARBOWANIE";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}
.offer a:nth-of-type(6):after{
  content:"MODELOWANIE";
  padding: 45% 0%; /*ustawia tekst w odpowiednim miejscu*/
}

Z góry wszystkim bardzo dziękuję

1 odpowiedź

0 głosów
odpowiedź 26 marca 2017 przez Konrad Fx Mądrala (6,910 p.)
Z height musisz używać px, vh, lub auto. Procenty nic nie dają, zawsze staje się niewidoczny.

Pozdro
2
 komentarz 26 marca 2017 przez niezalogowany
Wartości procentowe działają - wystarczy, że rodzić posiada określoną wcześniej wysokość
 komentarz 26 marca 2017 przez Konrad Fx Mądrala (6,910 p.)
No ale u Niego nie ma ;)
 komentarz 26 marca 2017 przez bat_kuba Użytkownik (600 p.)
chodzi o to aby obrazek się sam skalował odpowiednio ;) tak jak jest to w przypadku

<div class="slider">
      <img src="images/salon_1.png" width="100%" height="100%" alt="Salon">
    </div>

w css nie umieszczalem na twardo zadnych wartości :) poza:

.slider > img{

  width: 100%;
  height: 100%;
}

ale to nie ma znaczenia czy jest czy nie :)

Podobne pytania

0 głosów
4 odpowiedzi 559 wizyt
Ocena kodu PSD to HTML/CSS/JS
pytanie zadane 19 stycznia 2017 w Nasze projekty przez goran. Użytkownik (930 p.)
0 głosów
1 odpowiedź 413 wizyt
Ocena z psd do html - CSS/HTML
pytanie zadane 15 lipca 2016 w Nasze projekty przez oiomek Nowicjusz (170 p.)
0 głosów
4 odpowiedzi 630 wizyt
Ocena kodu html
pytanie zadane 17 lipca 2017 w HTML i CSS przez Radekol Bywalec (2,880 p.)

93,599 zapytań

142,524 odpowiedzi

322,993 komentarzy

63,082 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

Kursy INF.02 i INF.03

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...