Skip to content

Commit

Permalink
feat: implement unique styling and purpose to page
Browse files Browse the repository at this point in the history 
Implement a theme of a landing page for a pub, with fitting assets to
boot.
  • Loading branch information
@wolfdaemon
wolfdaemon committed Nov 6, 2023
1 parent 3a2fc84 commit 7c11224
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 44 deletions.
Binary file added images/7844635708_a6fd45aa71_b.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/axe.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/cuirass.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/helmet.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mug.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 32 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
<div class="section-hero">
<nav>
<header>
<h1>Header Logo</h1>
<h1>Cain's Pub</h1>
</header>
<ul>
<li><a>header link one</a></li>
<li><a>header link two</a></li>
<li><a>header link three</a></li>
<li><a href="/index.html">home</a></li>
<li><a href="https://www.example.com">about</a></li>
<li><a href="https://www.gnu.org/licenses/agpl-3.0.en.html">legal</a></li>
</ul>
</nav>

Expand All @@ -26,79 +26,72 @@ <h1>Header Logo</h1>
<main>
<hgroup>
<div class="hero-message">
<h2>This website is awesome</h2>
<p>This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast.
</p>
<h2>Have a drink with your old friends</h2>
<p>From the Isles comes a piece of home from the motherland. While you're not there, you're there when here.</p>
<button class="button-hero">Sign up</button>
</div>
<img class="hero-img" />
<img class="hero-img" src="./images/7844635708_a6fd45aa71_b.jpg">
</hgroup>
</div>
</main></div>

<section class="randinfo">
<h2>Some random information.</h2>
<h2>Artifacts and Features from the Old Ruins</h2>
<div class="randinfo-images">
<div class="randinfo-image">
<figure>
<img/>
<img src="./images/helmet.jpg">
</figure>
<figcaption>
this is some subtext under an illustration or image
</figcaption>
<figcaption>Take a look from our boutique selection of armor.</figcaption>
</div>
<div class="randinfo-image">
<figure>
<img/>
<img src="./images/cuirass.jpg">
</figure>
<figcaption>
this is some subtext under an illustration or image
</figcaption>
<figcaption>Observe artifacts from great warriors of old.</figcaption>
</div>
<div class="randinfo-image">
<figure>
<img/>
<img src="./images/axe.jpg">
</figure>
<figcaption>
this is some subtext under an illustration or image
</figcaption>
<figcaption>Procure the finest tools, from our home to yours.</figcaption>
</div>
<div class="randinfo-image">
<figure>
<img/>
<img src="./images/mug.jpg">
</figure>
<figcaption>
this is some subtext under an illustration or image
</figcaption>
<figcaption>Gather some of the finest mead.</figcaption>
</div>
</div>
</section>

<section class="quote">
<blockquote>
This is an inspiring quote, or a testimonial from a customer.
Maybe it's just filling up space, or maybe people will actually read it.
Who knows?
All I know is that it looks nice.
</blockquote>
<cite>-Thor, God of Thunder</cite>
<blockquote>"The lively atmosphere, warm hospitality, and authentic Eldorian ambiance at this pub truly make it a home away from home. From the moment you step inside, you're greeted with the sounds of laughter, clinking glasses, and traditional Irish music. It's the perfect place to unwind, connect with friends, and savor some delicious pints of Guinness. Sláinte!"</blockquote>
<cite>-Fiachra Doyle </cite>
</section>

<section class="action-call">
<div class="action-call">
<div class="action-call-text">
<h2>Call to action! It's time!</h2>
<p>Sign up for our product by clicking that button right over there!</p>
<h2>Sign up for your next reservation!</h2>
<p>Get a reserved spot while it lasts to guarantee the right occasion.</p>
</div>
<button>Sign up</button>
</div>
</section>

</main>


<!-- Page's main footer used across all of the website -->
<footer>
Copyright © The Odin Project 2023
<p class="copyright">Copyright © The Odin Project 2023</p>
Other attributions:
<p class="attribution">"<a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/41132143@N00/7844635708">mountains</a>" by <a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/41132143@N00">danoxster</a> is licensed under <a target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/licenses/by-sa/2.0/?ref=openverse">CC BY-SA 2.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" style="height: 1em; margin-right: 0.125em; display: inline;"></a>. </p>
<p class="attribution">"<a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/81677556@N00/52329932592">Viking helmets</a>" by <a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/81677556@N00">sebilden</a> is licensed under <a target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/licenses/by/2.0/?ref=openverse">CC BY 2.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="height: 1em; margin-right: 0.125em; display: inline;"></a>. </p>
<p class="attribution">"<a target="_blank" rel="noopener noreferrer" href="https://clevelandart.org/art/1916.1521">Breastplate from Hussar's Cuirass</a>" is marked with <a target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse">CC0 1.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/zero.svg" style="height: 1em; margin-right: 0.125em; display: inline;"></a>. </p>
<p class="attribution">"<a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/7503937@N04/2353072999">Viking axe</a>" by <a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/7503937@N04">arnybo</a> is licensed under <a target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/licenses/by-sa/2.0/?ref=openverse">CC BY-SA 2.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" style="height: 1em; margin-right: 0.125em; display: inline;"></a>. </p>
<p class="attribution">"<a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/30478819@N08/50388086947">A mug of dark unfiltered beer with hops and barley</a>" by <a target="_blank" rel="noopener noreferrer" href="https://www.flickr.com/photos/30478819@N08">wuestenigel</a> is licensed under <a target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/licenses/by/2.0/?ref=openverse">CC BY 2.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1em; margin-right: 0.125em; display: inline;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="height: 1em; margin-right: 0.125em; display: inline;"></a>. </p>
</footer>
</body>


</body>
</html>
26 changes: 21 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ body > * > * {
margin: 0 20%;
}

a {
color: goldenrod;
}

nav {
display: flex;
}
Expand All @@ -23,7 +27,7 @@ nav ul {
button {
border: 2px solid #FFF;
border-radius: 6px;
background-color: #3882F6;
background-color: #F63838;
color: #FFFFFF;
width: 8rem;
height: 2.5rem;
Expand All @@ -42,16 +46,20 @@ hgroup {
}

figure {
border: 3px solid #498bf6;
border: 3px solid #f64949;
}

footer {
background-color: #1F2937;
background-color: #1F3725;
color: #F9FAF8;
text-align: center;
padding: 3rem 0;
}

footer p.copyright {
margin: 0 0 2rem 0;
}

blockquote {
font-family: Ubuntu, sans-serif;
padding: 0 150px;
Expand Down Expand Up @@ -81,7 +89,7 @@ div.hero-message {
}

div.section-hero {
background-color: #1F2937;
background-color: #1F3725;
color: #E5E7EB;
font-size: 18px;
}
Expand All @@ -104,7 +112,7 @@ div.section-hero h2 {
div.action-call {
display: flex;
border-radius: 8px;
background-color: #3882F6;
background-color: goldenrod;
color: #FFFFFF;
justify-content: center;
gap: 13rem;
Expand Down Expand Up @@ -136,6 +144,12 @@ div.randinfo-image {
margin: 0;
}

div.randinfo-image figure img {
width: 8rem;
height: 8rem;
border-radius: .5rem;
}

div.randinfo-images div.randinfo-image figcaption {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -182,6 +196,8 @@ nav ul li {

nav ul li a {
margin: 0 0 0 2rem;
color: #F9FAF8;
text-decoration: none;
}

section {
Expand Down

0 comments on commit 7c11224

Please sign in to comment.