2

i'm trying to make a bit of a copy of this website but i'm having issues with the gallery part, my images simply won't behave the same as the website im attempt to copy. Obviously change around once complete.

Here is a JSFiddle of my code if that helps.

Here is my CSS for the section:

/* Gallery Start */
.box.style2 header {
    display:inline-block;
    background:#FFF;
    padding:2em 3em;
    margin:0px; 
}
.box.style2 .inner {
    position:relative;
    padding:40px 0 0px 0;
}
.box.style2 {
    text-align:center;
}
.box.style2 .inner:after {
    content: '';
    display:block;
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    border-left:solid 1px #FFF;
}
.box.style2 .inner .row {
    position:relative;  
}
.row {
    border-bottom:solid 1px transparent;
    box-sizing:border-box;  
}
.row:after, .row:before {
    content: '';
    display:block;
    clear:both;
    height:0;
}
.row > * {
    float:left;
}
.box.style2 .inner .image {
    position:relative;
    z-index:1;
    padding:20px;
}
.image.fit {
    display:block;
    width:100%;
}
.gallery-image {
    width:25%;
    margin-left:0px;    
}
/* Gallery END */

And here is my HTML:

<!-- Start of gallery -->
<article class="container box style2">
    <header>
        <h2>Recent Work</h2>
        <p>Below are images of our recent completed work</p>
    </header>
    <div class="inner gallery">
        <!-- Gallery Images -->
        <div class="row">
            <!-- Image -->
            <div class="gallery-image">
                <a href class="image fit" style="outline: 0px;">
                  <img src="images/01.jpg" />
                </a>
            </div>
            <!-- Image END -->

            <!-- Image -->
            <div class="gallery-image">
                <a href class="image fit" style="outline: 0px;">
                  <img src="images/01.jpg" />
                </a>
            </div>
            <!-- Image END -->

            <!-- Image -->
            <div class="gallery-image">
                <a href class="image fit" style="outline: 0px;">
                  <img src="images/01.jpg" />
                </a>
            </div>
            <!-- Image END -->

            <!-- Image -->
            <div class="gallery-image">
                <a href class="image fit" style="outline: 0px;">
                  <img src="images/01.jpg" />
                </a>
            </div>
            <!-- Image END -->
        </div>
    </div>
    <!-- Gallery Images END -->
</article>
<!-- End of gallery -->

Here is a screenshot of what my images look like, as you can see, they are not behaving at all.

I think this is because I don't have these styles, but I can't for the life of me figure out what they mean, all that I can understand from Google is that they are classes made from numbers:

.row.\30 \25 > * {
    padding: 0px 0 0 0px;
}
/* Inherited from: @media screen and (max-width: 1680px}*/
.row > * {
    padding: 40px 0 0 40px;
}
.\33 u, .\33 u\24 {
    width: 25%;
    clear: none;
    margin-left: 0;
}

edit: so after readying wero's answer, am I understanding this properly?

.row.\30 \25 > * would basically target a class with the name 0 within the row class, and then the element within 30 with class 25 and then style the next element within that?

Martyn Ball
  • 4,679
  • 8
  • 56
  • 126
  • looks like an encoding issue. the "strange" numbers you see are unicode text. It seems that the files you tried to copy are encoded with utf-8. what method did you use to copy the files from the website? – anurupr Aug 19 '15 at 12:40
  • I'm just using Chrome's Inspect Element – Martyn Ball Aug 19 '15 at 12:55
  • Let me get this straight. You're trying to lift a design that the website sells, and you're asking for help deciphering it? – harris Aug 19 '15 at 12:55
  • I thought that it's Loyalty Free? I read the license, or is this sold!? Crap! – Martyn Ball Aug 19 '15 at 12:57
  • 1
    are you copying the styles from the top right side of chrome's inspect element? – anurupr Aug 19 '15 at 12:59
  • Well it looks like a subscription based service to me, but I couldn't be arsed to go reading through their license. – harris Aug 19 '15 at 13:00
  • @anurupr - Yeah, once it works I want to change them around, it's just getting the layout working. – Martyn Ball Aug 19 '15 at 13:09
  • 1
    understood. but are you saving those changes in a file? if so check the encoding of the file before you save those changes. if you can tell us what editor you are using , then we can look for a more specific solution – anurupr Aug 19 '15 at 13:37
  • @anurupr - no i'm simply typing them into my styles, as they i can understand more what the style is doing. I'm using Dreamwaver – Martyn Ball Aug 19 '15 at 14:29

1 Answers1

4

The \nn<space> syntax is a character escape sequence for the Unicode character U+00nn.

This article describes the topic very nicely.

Using the escape sequences they build valid CSS class identifiers.

Why do they do this? Can only speculate: For brevity, to generate unique names?

EDIT to answer the extended question:

.row.\30 \25 > * is a selector for all elements (*) whose parent element (>) has the CSS class row and the CSS class consisting of the two characters U+0030 and U+0025.

Community
  • 1
  • 1
wero
  • 32,544
  • 3
  • 59
  • 84