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

Ocena kodu HTML/ CSS

Object Storage Arubacloud
0 głosów
151 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 412 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ź 290 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 344 wizyt
Ocena kodu html
pytanie zadane 17 lipca 2017 w HTML i CSS przez Radekol Bywalec (2,880 p.)

92,568 zapytań

141,421 odpowiedzi

319,627 komentarzy

61,956 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...