Skip to content

Instantly share code, notes, and snippets.

@nakov

nakov/agency.css

Created February 22, 2017 19:09
Show Gist options
  • Save nakov/fb340bb51f46f2d5c8246e61a238706d to your computer and use it in GitHub Desktop.
Save nakov/fb340bb51f46f2d5c8246e61a238706d to your computer and use it in GitHub Desktop.
Download ZIP
ageny softuni feb 2017 part 2
Raw
agency.css
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
font-family: Montserrat, sans-serif;
font-size: 14px;
margin: 0;
}
.site-footer, main section {
border: 1px solid blue;
margin: 10px;
}
.site-header {
background: url('images/Layer-759_02.jpg');
background-size: cover;
min-height: 400px;
}
nav.top-navigation {
width: 80%;
margin: 0 auto;
padding-top: 15px;
}
nav.top-navigation ul {
background: rgba(187, 148, 93, 0.9);
text-align: center;
padding: 0;
margin: 0;
}
nav.top-navigation ul li {
display: inline-block;
padding: 10px;
}
nav.top-navigation ul li a {
color: white;
text-decoration: none;
}
nav.top-navigation ul li a:hover {
color: #f5c686;
}
nav.top-navigation ul li a.selected {
color: #f5c686;
}
section.slider {
text-align: center;
}
section.slider h1 {
color: white;
text-transform: uppercase;
text-shadow: 0px 0px 10px black;
font-size: 3em;
margin-top: 70px;
font-weight: bold;
}
section.slider p {
color: white;
width: 300px;
margin: 0 auto;
padding: 10px;
background: rgba(150, 150, 150, 0.4);
box-shadow: 0px 0px 15px 15px rgba(150, 150, 150, 0.4);
text-shadow: 0px 0px 10px black;
}
section.slider .slider-button {
margin-top: 30px;
display: inline-block;
color: white;
background: #161616;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 0px 3px white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
section.slider .slider-button .fa-chevron-right {
color: #c79d63;
}
section.slider .slider-button:hover,
section.slider .slider-button:hover .fa-chevron-right {
background: #c79d63;
color: black;
}
section.industries {
text-align: center;
max-width: 1300px;
margin: 0 auto;
}
.industries article {
width: 350px;
/*border: 1px solid green;*/
margin: 10px;
display: inline-block;
}
.industries .icon {
width: 45px;
height: 45px;
line-height: 45px;
font-size: 2em;
background: black;
color: white;
border-radius: 50%;
float: left;
}
.industries article h2,
.industries article p {
text-align: left;
margin-left: 64px;
}
.industries article h2 {
font-size: 1.2em;
}
.benefits article {
width: 300px;
border: 1px solid green;
margin: 10px;
display: inline-block;
}
.site-footer section {
width: 300px;
border: 1px solid green;
margin: 10px;
display: inline-block;
}
Raw
agency.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Consulting Agency</title>
<link rel="stylesheet" href="agency.css">
</head>
<body>
<header class="site-header">
<nav class="top-navigation">
<ul>
<li><a href="#" class="selected">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">cases</a></li>
<li><a href="#">news</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contacts</a></li>
</ul>
</nav>
<section class="slider">
<h1>video slider</h1>
<p>Challenging established thinking,
achieving sustainable advantage</p>
<a href="#" class="slider-button">
our services
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</section>
</header>
<main>
<section class="industries">
<h1>Industries</h1>
<article>
<div class="icon">
<i class="fa fa-plane" aria-hidden="true"></i>
</div>
<h2>Travel and Aviation Consulting</h2>
<p>We are a company that offers design and
build services for you from initial
sketches to the final construction.</p>
</article>
<article>
<div class="icon">
<i class="fa fa-line-chart"
aria-hidden="true"></i>
</div>
<h2>Business Services Consulting</h2>
<p>The sector is diverse, including
professional services, education
and training, and support services
and outsourcing.</p>
</article>
<article>
<div class="icon">icon</div>
<h2>Consumer Products Consulting</h2>
<p>We are a company that offers design
and build services for you from
initial sketches to the final
construction.</p>
</article>
<article>
<div class="icon">icon</div>
<h2>Financial Services Consulting</h2>
<p>We are a company that offers design and
build services for you from initial
sketches to the final construction.</p>
</article>
<article>
<div class="icon">icon</div>
<h2>Energy and Environment Consulting</h2>
<p>We are a company that offers design and
build services for you from initial
sketches to the final construction.</p>
</article>
<article>
<div class="icon">icon</div>
<h2>Surface Transport & Logistics Consultin</h2>
<p>We are a company that offers design and
build services for you from initial
sketches to the final construction.</p>
</article>
</section>
<section class="mission">
<h1>
<div class="accent">To help entrepreneurs
get their act together</div>
before they talk to investors.
</h1>
</section>
<section class="benefits">
<h1>Why traders choose us</h1>
<article>
<h1>Raw Spreads</h1>
<p>Receive premium pricing from
Top Tier financial institutions.
Pricing from Top Tier financial
institutions.</p>
</article>
<article>
<h1>No Dealing Desk</h1>
<p>With Consulting WP you’ll get
no re-quotes, no dealer intervention
and fair order execution.
</p>
</article>
<article>
<h1>State of the Art</h1>
<p>Trade Forex and CFDs with the
world’s best trading platforms
on your desktop or mobile device.
</p>
</article>
</section>
<section class="testimonials">
<article class="testimonial">
<p class="text">
We were amazed by how little effort
was required on our part to have
Consulting WP prepare these materials.
We exchanged a few phone calls
and e-mails, and they… handled the rest.
</p>
<div class="author">
<div class="position">Founder & CEO,
Arcade Systems</div>
<div class="name">Amanda Seyfried</div>
</div>
</article>
</section>
<section class="partners">
<ul>
<li><a href="#"><img src="images/partner-arcade.png"
height="75" width="151"/></a></li>
<li><a href="#"><img src="images/partner-Edtech.png"
height="86" width="162"/></a></li>
<li><a href="#"><img src="images/partner-fast-brothers.png"
height="96" width="180"/></a></li>
<li><a href="#"><img src="images/partner-KPhone.png"
height="62" width="156"/></a></li>
<li><a href="#"><img src="images/partner-TVC.png"
height="96" width="180"/></a></li>
<li><a href="#"><img src="images/partner-Volker-Stevin.png"
height="35" width="134"/></a></li>
</ul>
</section>
</main>
<footer class="site-footer">
<section class="consulting">
<h1>Consulting</h1>
<p class="location">1010 Avenue of the
Moon New York, NY 10018 US.</p>
<p class="work-hours">Mon - Sat 8.00 - 18.00
Sunday CLOSED</p>
<p class="phone-number">212 386 5578
Free call</p>
<a href="#">
<i class="fa fa-facebook"
aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter"
aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin"
aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-youtube"
aria-hidden="true"></i>
</a>
</section>
<section class="extra-links">
<h1>Extra Links</h1>
<div class="first-column">
<a href="#">About</a>
<a href="#">Contacts</a>
<a href="#">Typography</a>
<a href="#">Careers</a>
<a href="#">Shop</a>
<a href="#">News</a>
</div>
<div class="second-column">
<a href="#">Testimonials</a>
<a href="#">Services</a>
<a href="#">Our team</a>
<a href="#">Our approach</a>
</div>
</section>
<section class="instagram-widget">
<h1>Instagram Widget</h1>
<ul>
<li><a href="#"><img
src="images/footer-widget(1).jpg"
height="150" width="150"/></a></li>
<li><a href="#"><img
src="images/footer-widget(2).jpg"
height="150" width="150"/></a></li>
<li><a href="#"><img
src="images/footer-widget(3).jpg"
height="150" width="150"/></a></li>
<li><a href="#"><img
src="images/footer-widget(4).jpg"
height="150" width="150"/></a></li>
<li><a href="#"><img
src="images/footer-widget(5).jpg"
height="150" width="150"/></a></li>
<li><a href="#"><img
src="images/footer-widget(6).jpg"
height="150" width="150"/></a></li>
</ul>
</section>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment