Skip to content

Commit

Permalink
Merge pull request #75 from FAC29A/associateContent
Browse files Browse the repository at this point in the history 
Added associate content
  • Loading branch information
@Luciensday
Luciensday authored Oct 3, 2023
2 parents 1f145a1 + bdc5474 commit d722336
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 93 deletions.
140 changes: 62 additions & 78 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,144 +118,128 @@ <h2>
<h2 class="center">Associates</h2>
<!--Gallery-->
<div class="associate-gallery ">
<!--Card 1-->
<!--Arabella Nozzle-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-1.png"

alt="A card showing one of our associates"
/>
<img class="associateCard" src="images/associate-1.png" alt="A card showing one of our associates"/>
</div>

<img class="associatePocket"
src="images/pocket-red.png"

alt="A pocket"
/>
<img class="associatePocket" src="images/pocket-red.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>Arabella Nozzle</h3>

<ul>
<li>Coquettery</li>
<li>Bamboozlement</li>
<li>"Quiet Work"</li>
</ul>
</div>
</div>
</div>

<!--Card 2-->
<!--William FitzWilliam-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-2.png"
alt="A card showing one of our associates"
/>
</div>
<img class="associateCard" src="images/associate-2.png" alt="A card showing one of our associates"/>
</div>

<img class="associatePocket"
src="images/pocket-blush.png"

alt="A pocket"
/>
<img class="associatePocket" src="images/pocket-blush.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>William FitzWilliam</h3>

<ul>
<li>Embezzlement</li>
<li>Gossip-Mongery</li>
<li>Document Forgery</li>
</ul>
</div>
</div>
</div>

<!--Card 3-->
<!--Dora Haddock-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-3.png"

alt="A card showing one of our associates"
/>
<img class="associateCard" src="images/associate-3.png" alt="A card showing one of our associates"/>
</div>

<img class="associatePocket"
src="images/pocket-violet.png"

alt="A pocket"
/>
<img class="associatePocket" src="images/pocket-violet.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>Dora Haddock</h3>

<ul>
<li>Assault</li>
<li>Aggravated Assault</li>
<li>Protection</li>
</ul>
</div>
</div>
</div>

<!--Card 4-->
<!--Jebediah Scratch-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-4.png"

alt="A card showing one of our associates"
/>
<img class="associateCard" src="images/associate-4.png" alt="A card showing one of our associates"/>
</div>

<img class="associatePocket"
src="images/pocket-red.png"

alt="A pocket"
/>
<img class="associatePocket" src="images/pocket-red.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>Jebediah Scratch</h3>

<ul>
<li>Distraction</li>
<li>Incitement</li>
<li>Tomfoolery</li>
</ul>
</div>
</div>
</div>

<!--Card 5-->
<!--Forget-Me-Not Nightshirt-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-5.png"

alt="A card showing one of our associates"
/>
<img class="associateCard" src="images/associate-5.png" alt="A card showing one of our associates"/>
</div>

<img class="associatePocket"
src="images/pocket-blush.png"

alt="A pocket"
/>
<img class="associatePocket" src="images/pocket-blush.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>Forget-Me-Not Nightshirt</h3>

<ul>
<li>Damselling</li>
<li>Burglary</li>
<li>Blackmail</li>
</ul>
</div>
</div>
</div>

<!--Card 6-->
<!--Erstwhile Crumpkin-->
<div class="associateHolder">
<div class="associate">
<div class="headshotWrapper">
<img class="associateCard"
src="images/associate-6.png"

alt="A card showing one of our associates"
/>
<img class="associateCard" src="images/associate-6.png" alt="A card showing one of our associates"/>
</div>
<img class="associatePocket"
src="images/pocket-violet.png"

alt="A pocket"
/>

<img class="associatePocket" src="images/pocket-violet.png" alt="A pocket"/>

<div class="associateText">
<h3>Oliver twist</h3>
<p>our star associate</p>
<h3>Erstwhile Crumpkin</h3>

<ul>
<li>Arson</li>
<li>Jimmy-Knockery</li>
<li>Infiltration</li>
</ul>
</div>
</div>
</div>
Expand Down
24 changes: 9 additions & 15 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,11 +291,11 @@ h3 {
}

/* Associate section css */
.associate-section {
#associates {
position: relative;
}

.associate-section h2 {
#associates h2 {
color: white;
}

Expand Down Expand Up @@ -335,25 +335,16 @@ h3 {
.associateCard {
position: absolute;
background-color: var(--light-grey);
padding:0.5rem;

padding:0.5rem;
}



.headshotWrapper :hover {
background-color: var(--light-grey);
transform: translateY(-30px);
transition-timing-function: ease-out;
transition: 1s;




}



.associatePocket {
position: relative;
left: 0;
Expand All @@ -369,12 +360,15 @@ h3 {
z-index: 2;
}

.associateText > h3,
.associateText > p {
.associateText h3,
.associateText p,
.associateText ul {
text-align: center;
}


.associateText li {
list-style-type: none;
}

/* enquiry section css */
#brown-background {
Expand Down

0 comments on commit d722336

Please sign in to comment.