Last active
July 24, 2017 21:55
-
-
Save James-Vines/76da75cb09dc9a7a46f1379be1d6eda8 to your computer and use it in GitHub Desktop.
Soda-Visual - Example of HTML/CSS Skills
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
<title>Soda Visual</title> | |
<!-- Bootstrap core CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<!-- Custom styles for this template go here --> | |
<link rel="stylesheet" href="style.css"> | |
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="social-media"> | |
<ul> | |
<li> | |
<a href="https://www.facebook.com" target="_blank"> | |
<div class="sm-fb"> | |
<img class="sm-image" src="img/facebook.png" alt="facebook"> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="https://www.twitter.com" target="_blank"> | |
<div class="sm-tw"> | |
<img class="sm-image" src="img/twitter.png" alt="twitter"> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="https://www.instagram.com" target="_blank"> | |
<div class="sm-in"> | |
<img class="sm-image" src="img/instagram.png" alt="instagram"> | |
</div> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<section class="jumbotron"> | |
<div class="header"> | |
<div class="container"> | |
<div class="logo"> | |
<img src="img/soda-logo.png" alt="Soda Visual Logo"> | |
</div> | |
<div class="jumbotron-text"> | |
<h1> | |
<span>Pushing Boundaries,</span> | |
<span>Realising Ideas.</span> | |
</h1> | |
<hr> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="about"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-lg-4 col-md-4 col-sm-12"> | |
<div class="about-heading"> | |
<h2>A little bit about our company</h2> | |
</div> | |
</div> | |
<div class="col-lg-8 col-md-8 col-sm-12"> | |
<div class="paragraph"> | |
<p>SODA Visual is an agency with years of experience in Creative Commercial Photography. Whether you're creating a campaign from scratch or want to give your existing campaign an extra creative touch, we have the tools and the skills to make things happen.</p> | |
<br> | |
<p>Paul & Romain are 2 professional photographers who work alongside you and your team to help you create and launch new products and strengthen your brand.</p> | |
<br> | |
<p>We help clients bring concept and ideas to life with stills and video work and lots of other cool stuff ' We try and bring a little bit of our personalities into every job we do, and we think that's what makes us a little different.</p> | |
<br> | |
<p>We try not to bark orders, but know when to step in, and the open collaborative approach we bring to each job ensures we meet the clients needs.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="clients"> | |
<div class="container"> | |
<div class="clients-text"> | |
<h2>Our Clients</h2> | |
</div> | |
<div class="row"> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/gu-logo.png" alt="Grand Union Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/kings-logo.png" alt="King's College London Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/peldonrose-logo.png" alt="Peldonrose Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/sr-logo.png" alt="Studio Output Logo"> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/barclays-logo.png" alt="Barclays Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/mos-logo.png" alt="Ministry of Sound Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/freeview-logo.png" alt="Freeview Logo"> | |
</div> | |
</div> | |
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> | |
<div class="box"> | |
<img class="client-logo" src="img/sony-logo.png" alt="Sony Music Logo"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="contact"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-lg-8 col-md-8 col-sm-12"> | |
<div class="contact-heading"> | |
<h2>Contact Soda Visual</h2> | |
</div> | |
<div> | |
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.<br> | |
Maecenas faucibus mollis interdum. Aenean eu leo quam.<br> | |
Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras <br> | |
mattis consectetur purus sit amet fermentum.</p> | |
</div> | |
<div class="phone"> | |
<p><span style="font-weight: 500;">PAUL:</span> +44 (0)794 921 2037</p> | |
<p><span style="font-weight: 500;">ROMAIN:</span> +44 (0)794 921 2037</p> | |
<p><span style="font-weight: 500;">EMAIL:</span> info@soda-visual.com</p> | |
</div> | |
</div> | |
<div class="col-lg-4 col-md-4 col-sm-12"> | |
<form> | |
<div class="form-group"> | |
<input type="email" class="form-control" id="email" placeholder="EMAIL ADDRESS" name="email"> | |
</div> | |
<div class="form-group"> | |
<input type="text" class="form-control" id="pwd" placeholder="NAME" name="name"> | |
</div> | |
<div class="form-group"> | |
<textarea class="form-control" id="exampleTextarea" placeholder="MESSAGE"></textarea> | |
</div> | |
<button type="submit" class="btn btn-default">Submit</button> | |
</form> | |
</div> | |
</div> | |
</div> | |
</section> | |
<footer> | |
<div class="container"> | |
<div class="copyright"> | |
<p>Copyright Soda Visual ® 2015</p> | |
</div> | |
<div class="tc"> | |
<p>Terms & Conditions</p> | |
</div> | |
</div> | |
</footer> | |
<!-- Bootstrap core JS --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
</body> | |
</html> |
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
/** ------- | |
General | |
------- **/ | |
body { | |
font-family: "Avenir Next", sans-serif; | |
} | |
h1 span { | |
display: block; | |
color: #fff; | |
font-family: "Avenir Next", sans-serif; | |
font-size: 40px; | |
text-transform: uppercase; | |
line-height: 1.238; | |
text-align: center; | |
letter-spacing: 8px; | |
font-weight: 600; | |
margin-bottom: 0px; | |
} | |
h2 { | |
color: #286191; | |
font-family: "Avenir Next", sans-serif; | |
font-size: 22px; | |
line-height: 1.545; | |
text-transform: uppercase; | |
font-weight: 600; | |
border-top: 8px solid #286191; | |
padding: 30px 0px; | |
letter-spacing: 3.8px; | |
} | |
p { | |
font-size: 22px; | |
font-weight: 100; | |
color: #13364f; | |
line-height: 1.545; | |
} | |
ul { | |
list-style-type: none; | |
padding: 0px; | |
} | |
li { | |
display: inline-block; | |
padding-right: 5px; | |
padding-left: 5px; | |
} | |
section { | |
padding: 80px 0px; | |
} | |
.container { | |
width: 1050px; | |
padding: 0px 10px; | |
} | |
hr { | |
margin-top: 20px; | |
} | |
.col-lg-3, | |
.col-md-3, | |
.col-sm-6, | |
.col-xs-12 { | |
padding: 0px; | |
} | |
/** --------- | |
Jumbotron | |
--------- **/ | |
.jumbotron { | |
background-image: url(img/header-bg.jpg); | |
background-repeat: no-repeat; | |
-webkit-background-size:cover; | |
-moz-background-size:cover; | |
-o-background-size:cover; | |
background-size: cover; | |
background-position: center; | |
padding-top: 0px; | |
padding-bottom: 0px; | |
margin-bottom: 0px; | |
} | |
.header { | |
height: 637px; | |
text-align: center; | |
} | |
.logo { | |
margin-top: 160px; | |
margin-bottom: 42px; | |
} | |
.logo img { | |
display: block; | |
margin: 0 auto; | |
} | |
.jumbotron-text { | |
display: inline-block; | |
} | |
/** ------------ | |
Social-Media | |
------------ **/ | |
.social-media { | |
position: relative; | |
display: block; | |
float: left; | |
z-index: 1; | |
margin-left: 25px; | |
margin-top: 22px; | |
} | |
.sm-fb, | |
.sm-tw, | |
.sm-in { | |
width: 40px; | |
height: 40px; | |
margin-right: auto; | |
margin-left: auto; | |
padding: 0px 0px; | |
border-radius: 32px; | |
cursor: pointer; | |
} | |
.sm-fb { | |
background-color: #256299; | |
} | |
.sm-tw { | |
background-color: #378bb7; | |
} | |
.sm-in { | |
background-color: #246485; | |
} | |
.sm-image { | |
width: 40px; | |
height: 40px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
/** ----- | |
About | |
----- **/ | |
.about-heading { | |
padding-right: 42px; | |
} | |
.paragraph { | |
border-top: 8px solid transparent; | |
} | |
/** ------- | |
Clients | |
------- **/ | |
.clients h2 { | |
color: #fff; | |
font-size: 40px; | |
text-align: center; | |
padding: 0px 0px; | |
border-top: 0px; | |
border-bottom: 1px solid #fff; | |
letter-spacing: 9px; | |
margin: 0px; | |
} | |
.clients { | |
background-image: url(img/clients-bg.jpg); | |
background-repeat: no-repeat; | |
-webkit-background-size:cover; | |
-moz-background-size:cover; | |
-o-background-size:cover; | |
background-size: cover; | |
background-position: center; | |
text-align: center; | |
} | |
.clients .container { | |
padding: 0px 50px; | |
} | |
.clients-text { | |
display: inline-block; | |
margin-bottom: 80px; | |
} | |
.box { | |
width: 225px; | |
height: 225px; | |
margin-right: auto; | |
margin-left: auto; | |
margin-bottom: 15px; | |
padding: 0px 0px; | |
background-color: rgba(32,47,61,.95); | |
} | |
/** ------- | |
Contact | |
------- **/ | |
.contact h2 { | |
color: #1e2f3e; | |
font-size: 40px; | |
padding: 0px 0px; | |
border-top: 0px; | |
border-bottom: 1px solid #1e2f3e; | |
display: inline-block; | |
letter-spacing: 8.5px; | |
margin: 0px; | |
} | |
.contact p { | |
color: #1e2f3e; | |
font-size: 20px; | |
line-height: 1.7; | |
margin: 40px 0px 30px 0px; | |
} | |
.phone p { | |
font-size: 18px; | |
margin: 0px 0px 18px 0px; | |
} | |
form { | |
margin-top: 35px; | |
} | |
.form-control { | |
width: 100%; | |
height: 54px; | |
color: #1e2f3e; | |
font-family: "Avenir", sans-serif; | |
font-size: 16px; | |
background-color: #f2f3f3; | |
border-style: solid; | |
border-width: 0px 0px 5px 0px; | |
border-color: transparent transparent #c9d7e3 transparent; | |
border-radius: 0px; | |
} | |
textarea.form-control { | |
height: 128px; | |
} | |
button.btn { | |
width: 100%; | |
height: 51px; | |
color: #fff; | |
font-family: "Avenir", sans-serif; | |
font-size: 16px; | |
text-transform: uppercase; | |
background-color: #286191; | |
border-radius: 0px; | |
border-style: solid; | |
border-width: 0px; | |
border-color: transparent; | |
} | |
button.btn :focus { | |
color: #286191; | |
font-family: "Avenir", sans-serif; | |
font-size: 16px; | |
text-transform: uppercase; | |
background-color: #f2f3f3; | |
border-radius: 0px; | |
} | |
/** ------ | |
Footer | |
------ **/ | |
footer { | |
height: 90px; | |
background-color: #0d171f; | |
padding: 35px 0px; | |
} | |
footer p{ | |
color: #fff; | |
font-size: 14px; | |
letter-spacing: 0.5px; | |
} | |
footer .copyright { | |
float: left; | |
padding-left: 15px; | |
} | |
footer .tc { | |
float: right; | |
} | |
/** -------------- | |
Mobile-Styling | |
-------------- **/ | |
@media (max-width: 1050px) { | |
.container { | |
width: 900px; | |
padding: 0px; | |
} | |
.clients .container { | |
padding: 0px 0px; | |
} | |
.box { | |
width: auto; | |
height: auto; | |
margin-left: 2px; | |
margin-right: 2px; | |
} | |
} | |
@media (max-width: 991px) { | |
h2 { | |
border-top: 5px solid #286191; | |
padding: 20px 0px; | |
} | |
.container { | |
width: 740px; | |
} | |
.section-heading { | |
padding-right: 0px; | |
} | |
.paragraph { | |
border-top: 0px solid transparent; | |
padding: 0px; | |
} | |
.client-logo { | |
width: 80%; | |
} | |
} | |
@media (max-width: 767px) { | |
h1 span, | |
.clients h2, | |
.contact h2 { | |
font-size: 30px; | |
} | |
h2, p, .contact p { | |
font-size: 17px; | |
} | |
footer p { | |
font-size: 12px; | |
} | |
.container { | |
width: 90%; | |
} | |
} | |
@media (max-width: 580px) { | |
h1 span { | |
font-size: 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment