A demo of Verge-Style colored homepage tiles. Pure-CSS, using Sass and Prefix-free mode. Linear gradients and pseudo-elements galore!
Created
January 22, 2023 16:14
-
-
Save landsurveyorsunited/e601b3ae724a0e9d7411f629e2e6fa3f to your computer and use it in GitHub Desktop.
Verge-Style Homepage Tiles w buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" src="//use.typekit.net/qqh1pgl.js"></script> | |
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> | |
<div class="qwrapper"> | |
<nav role='navigation'> | |
<ul> | |
<li><a href="#">Land Surveyors United Community</a></li> | |
</ul> | |
</nav> | |
<div class="features"> | |
<article> | |
<a href="#"> | |
<h3>Global Surveyor Community Relaunch</h3> | |
<div href="#" class="comments">🌏️</div> | |
<p class="meta"> | |
in <strong>Community News</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/Fm2xvtJWABUT2q6?format=jpg&name=medium);"></div> | |
</a> | |
</article> | |
<article> | |
<a href="/hubs"> | |
<h3>Surveying Jobs Board Rebirth</h3> | |
<div href="#" class="comments">10</div> | |
<p class="meta"> | |
in <strong>Employment Ops</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/Fmw1EUfWIAEBo-Y?format=jpg&name=small);"></div> | |
</a> | |
</article> | |
<article> | |
<a href="#"> | |
<h3>Remaining Community Committed</h3> | |
<div class="comments">10</div> | |
<p class="meta"> | |
in <strong>Surveyor Resources</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/Fmw0rbCWQAIfSsv?format=jpg&name=medium);"></div> | |
</a> | |
</article> | |
<article> | |
<a href="#"> | |
<h3>A Surveying Future Powered by Your Past</h3> | |
<div class="comments">10</div> | |
<p class="meta"> | |
in <strong>Mentorship for Surveyors</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/Fmwq3rPXwAAgWIx?format=jpg&name=900x900);"></div> | |
</a> | |
</article> | |
<article><a href="#"> | |
<h3>A Surveyor Marketplace Powered by Support</h3> | |
<div class="comments">10</div> | |
<p class="meta"> | |
in <strong>Marketplace</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/FmH5YgSXEAIICxh?format=jpg&name=medium);"></div> | |
</a></article> | |
<article> | |
<a href="#"> | |
<h3>You want more business, don't you?</h3> | |
<div class="comments">10</div> | |
<p class="meta"> | |
in <strong>Surveyor Directory</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/FmCcEJpWQAAmPjF?format=jpg&name=medium);"></div> | |
</a> | |
</article> | |
<article> | |
<a href="#"> | |
<h3>Because Surveying isn't just something you "Do"</h3> | |
<div class="comments">10</div> | |
<p class="meta"> | |
in <strong>New Beginnings</strong> | |
</p> | |
<div class="thumbnail" style="background-image: url(https://pbs.twimg.com/media/Fl-eXYBWYAEI1fU?format=jpg&name=small);"></div> | |
</a> | |
</article> | |
</div> | |
<div id="ddemo"> | |
<div class="nwrapper"> | |
<div class="content"> | |
<ul> | |
<a href="#"><li>Mentorship Hub</li></a> | |
<a href="#"><li>Surveying Tutorials</li></a> | |
<a href="#"><li>Surveying Videos</li></a> | |
<a href="#"><li>Surveying History</li></a> | |
</ul> | |
</div> | |
<div class="parent">Education</div> | |
</div> | |
<div class="nwrapper"> | |
<div class="content"> | |
<ul> | |
<a href="#"><li>Smarketplace</li></a> | |
<a href="#"><li>Marketplace Hubs</li></a> | |
<a href="#"><li>Equipment Deals</li></a> | |
<a href="#"><li>+ Sell Equipment</li></a> | |
</ul> | |
</div> | |
<div class="parent">Marketplace</div> | |
</div> | |
<div class="nwrapper"> | |
<div class="content"> | |
<ul> | |
<a href="/hubs/jobs"><li>Survey Jobs Hub</li></a> | |
<a href="#"><li>+ Post Job</li></a> | |
<a href="#"><li>Job by Location</li></a> | |
<a href="/jobs"><li>Surveying Jobs</li></a> | |
</ul> | |
</div> | |
<div class="parent">Employment</div> | |
</div> | |
<center> Today, I would like to help ignite the industry by <div class="dropdown" id="dropdown"> | |
<input type="checkbox" id="drop1" /> | |
<label for="drop1" class="dropdown_button">PICK HERE <span class="arrow"></span></label> | |
<ul class="dropdown_content"> | |
<li class="active"><a href="/video">Share a helpful video</a></li> | |
<li class="active"><a href="/photo">Share Surveying Photos</a></li> | |
<li ><a href="/events/event/new">Add Upcoming Local Event</a></li> | |
<li><a href="/forum/topics/discussion/new">Ask a question or share information</a></li> | |
<li><a href="/articles/article/new">Post an Article</a></li> | |
<li><a href="/hubs/Locations">Find my local hub</a></li> | |
<li><a href="/hubs/Locations">Find a surveying job</a></li> | |
<li><a href="https://landsurveyorsunited.com/hubs/jobs/post-job">Post a surveying job</a></li> | |
<li><a href="/hi">More stuff I can do</a></li> | |
</ul> | |
</div> representing land surveying locally.</center> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Colors | |
$orange: rgb(250,96,42); | |
$yellow: rgb(252,180,0); | |
$purple: rgb(158,12,128); | |
$blue: rgb(0,226,255); | |
$green: rgb(149,174,32); | |
$neutral: rgb(51,51,51); | |
$light: #ffffff; | |
// Fonts | |
$adelle: "adelle", Georgia, serif; | |
$helvetica: 'Helvetica Neue', Helvetica, sans-serif; | |
$din: "din-condensed-web", sans-serif; | |
$font: $helvetica; | |
$font-secondary: $adelle; | |
// Units | |
$pad: 1rem; | |
$space: 1rem; | |
// Breakpoints | |
$bp-medium: 40em; | |
$bp-large: 70em; | |
* { | |
box-sizing: border-box; | |
} | |
.qwrapper { | |
max-width: $bp-large; | |
margin: 0 auto; | |
} | |
.dropdown { | |
display: block; | |
display: inline-block; | |
margin: 0px 3px; | |
position: relative; | |
} | |
/* ===[ For demonstration ]=== */ | |
.dropdown { margin-top: 30px } | |
/* ===[ End demonstration ]=== */ | |
.dropdown .dropdown_button { | |
cursor: pointer; | |
width: auto; | |
display: inline-block; | |
padding: 4px 5px; | |
border: 1px solid #AAA; | |
-webkit-border-radius: 2px; | |
-moz-border-radius: 2px; | |
border-radius: 2px; | |
font-weight: bold; | |
color: #717780; | |
line-height: 16px; | |
text-decoration: none !important; | |
background: white; | |
} | |
.dropdown input[type="checkbox"]:checked + .dropdown_button { | |
border: 1px solid #3B5998; | |
color: white; | |
background: #6D84B4; | |
-moz-border-radius-topleft: 2px; | |
-moz-border-radius-topright: 2px; | |
-moz-border-radius-bottomright: 0px; | |
-moz-border-radius-bottomleft: 0px; | |
-webkit-border-radius: 2px 2px 0px 0px; | |
border-radius: 2px 2px 0px 0px; | |
border-bottom-color: #6D84B4; | |
} | |
.dropdown input[type="checkbox"] + .dropdown_button .arrow { | |
display: inline-block; | |
width: 0px; | |
height: 0px; | |
border-top: 5px solid #6B7FA7; | |
border-right: 5px solid transparent; | |
border-left: 5px solid transparent; | |
} | |
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent } | |
.dropdown .dropdown_content { | |
position: absolute; | |
border: 1px solid #777; | |
padding: 0px; | |
background: white; | |
margin: 0; | |
display: none; | |
} | |
.dropdown .dropdown_content li { | |
list-style: none; | |
margin-left: 0px; | |
line-height: 16px; | |
border-top: 1px solid #FFF; | |
border-bottom: 1px solid #FFF; | |
margin-top: 2px; | |
margin-bottom: 2px; | |
} | |
.dropdown .dropdown_content li:hover { | |
border-top-color: #3B5998; | |
border-bottom-color: #3B5998; | |
background: #6D84B4; | |
} | |
.dropdown .dropdown_content li a { | |
display: block; | |
padding: 2px 7px; | |
padding-right: 15px; | |
color: black; | |
text-decoration: none !important; | |
white-space: nowrap; | |
} | |
.dropdown .dropdown_content li:hover a { | |
color: white; | |
text-decoration: none !important; | |
} | |
.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block } | |
.dropdown input[type="checkbox"] { display: none } | |
nav { | |
background: $neutral; | |
color: $light; | |
font-family: $din; | |
text-transform: uppercase; | |
padding: $pad; | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
a { | |
color: $light; | |
text-decoration: none; | |
} | |
} | |
.features { | |
h3 { | |
margin-top: 0; | |
font-weight: 300; | |
} | |
p { | |
margin-bottom: 0; | |
} | |
} | |
article { | |
background: linear-gradient(45deg, $purple, $orange); | |
position: relative; | |
&:first-child { | |
h3 { | |
font-size: 3em; | |
} | |
} | |
&:nth-child(2) { | |
background: linear-gradient(45deg, $orange, $yellow); | |
} | |
&:nth-child(3) { | |
background: linear-gradient(45deg, $blue, $orange); | |
} | |
&:nth-child(4) { | |
background: linear-gradient(45deg, $purple, $yellow); | |
} | |
&:nth-child(5) { | |
background: linear-gradient(45deg, $orange, $blue); | |
} | |
&:nth-child(6) { | |
background: linear-gradient(45deg, $purple, $blue); | |
} | |
&:last-child { | |
h3 { | |
font-size: 3em; | |
} | |
} | |
} | |
article > a { | |
display: block; | |
text-decoration: none; | |
position: relative; | |
padding: $pad; | |
color: $light; | |
height: 100%; | |
&:hover .thumbnail { | |
opacity: 0.2; | |
} | |
} | |
article .thumbnail { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 0; | |
opacity: 0.4; | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: top; | |
box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9); | |
} | |
article { | |
h3, .comments, .meta { | |
position: relative; | |
z-index: 1; | |
} | |
h3 { | |
font-family: $font-secondary; | |
text-shadow: 1px 1px 1px $neutral; | |
font-size: 2em; | |
line-height: 1; | |
margin-bottom: $space*2; | |
} | |
.comments { | |
float: right; | |
background: $green; | |
color: $neutral; | |
font-family: $din; | |
padding: $pad/4; | |
} | |
} | |
@media all and (min-width: $bp-medium) { | |
.features { | |
font-size: 0px; | |
} | |
article { | |
display: inline-block; | |
width: 50%; | |
min-height: 200px; | |
vertical-align: top; | |
font-size: 1rem; | |
overflow: hidden; | |
&:last-child { | |
width: 100%; | |
} | |
} | |
article > a { | |
position: absolute; | |
width: 100%; | |
} | |
} | |
@media all and (min-width: $bp-large) { | |
$height: 600px; | |
.features { | |
position: relative; | |
overflow: auto; | |
margin-bottom: $space*2; | |
} | |
.wrapper { | |
margin-top: $space*2; | |
} | |
article { | |
display: block; | |
float: left; | |
min-height: ($height / 3); | |
width: 33.3%; | |
&:first-child, &:last-child { | |
min-height: ($height * 2/3); | |
width: 33.3%; | |
} | |
&:nth-child(5) { | |
clear: left; | |
} | |
&:last-child { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
margin-right: .1%; | |
} | |
} | |
} | |
#ddemo { | |
margin: 30px 0 50px 0; | |
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
} | |
#ddemo .nwrapper { | |
display: inline-block; | |
width: 150px; | |
margin: 0 10px 0 0; | |
height: 20px; | |
position: relative; | |
} | |
#ddemo .parent { | |
height: 100%; | |
width: 100%; | |
display: block; | |
cursor: pointer; | |
line-height: 30px; | |
height: 30px; | |
border-radius: 5px; | |
background: #F9F9F9; | |
border: 1px solid #AAA; | |
border-bottom: 1px solid #777; | |
color: #282D31; | |
font-weight: bold; | |
z-index: 2; | |
position: relative; | |
-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear; | |
-webkit-transition-delay: .8s; | |
text-align: center; | |
} | |
#ddemo .parent:hover, | |
#ddemo .content:hover ~ .parent { | |
background: #fff; | |
-webkit-transition-delay: 0s, 0s, 0s; | |
} | |
#ddemo .content:hover ~ .parent { | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
z-index: 0; | |
} | |
#ddemo .content { | |
position: absolute; | |
top: 0; | |
display: block; | |
z-index: 1; | |
height: 0; | |
width: 150px; | |
padding-top: 30px; | |
-webkit-transition: height .5s ease; | |
-webkit-transition-delay: .4s; | |
border: 1px solid #777; | |
border-radius: 5px; | |
box-shadow: 0 1px 2px rgba(0,0,0,.4); | |
} | |
#ddemo .nwrapper:active .content { | |
height: 123px; | |
z-index: 3; | |
-webkit-transition-delay: 0s; | |
} | |
#ddemo .content:hover { | |
height: 123px; | |
z-index: 3; | |
-webkit-transition-delay: 0s; | |
} | |
#ddemo .content ul { | |
background: #fff; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
height: 100%; | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
} | |
#ddemo .content ul a { | |
text-decoration: none; | |
} | |
#ddemo .content li:hover { | |
background: #eee; | |
color: #333; | |
} | |
#ddemo .content li { | |
list-style: none; | |
text-align: left; | |
color: #888; | |
font-size: 14px; | |
line-height: 30px; | |
height: 30px; | |
padding-left: 10px; | |
border-top: 1px solid #ccc; | |
} | |
#ddemo .content li:last-of-type { | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment