Full project live: https://evandcp.github.io/#https://evandcp.github.io/MyWebsite/
Full project live: https://evandcp.github.io/#
Full project live: https://evandcp.github.io/MyWebsite/
Website using HTML/CSS/SASS/Bootstrap/JQuery
I'm learning Sass and responsive websites, I've made this simple portfolio website with the help of a bootstrap template (freelancer) and I'd like to know if I'm doing SASS correctly and ways to improve my website code. Also is my project structure correct as a standard? Thanks in advance!
index.html
<body id="page--top">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle navbar__button" data-toggle="collapse" data-target="#mainNavCollapse">Menú</button>
<a class="navbar-brand navbar__brand" href="#page--top">Evan</a>
</div>
<div class="collapse navbar-collapse navbar__collapsingNav" id="mainNavCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page--top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio" class="navbar__item">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about" class="navbar__item">About</a>
</li>
<li class="page-scroll">
<a href="#contact" class="navbar__item">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header>
<div class="container header" tabindex="-1">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive header__profileimage" src="assets/img/profile.jpg" alt="myPhoto">
<div class="header__textbox">
<h1 class="header__textbox--title">EVAN SURNAME</h1>
<h4 class="header__textbox--subtitle">Web Developer</h4>
</div>
</div>
</div>
</div>
</header>
<!-- Portfolio Section1 -->
<section id="portfolio" class="section1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section1__title">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project1">
</a>
</div>
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project2">
</a>
</div>
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project3">
</a>
</div>
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project4">
</a>
</div>
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project5">
</a>
</div>
<div class="col-sm-4 section1__item">
<a href="#" class="section1__item--link">
<img src="assets/img/placeholder.png" class="img-responsive section1__image--last" alt="Project6">
</a>
</div>
</div>
</div>
</section>
<!-- About Section2 -->
<section class="section2" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section2__title">About</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="section2__text">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p class="section2__text">Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
</div>
</div>
</section>
<!-- Contact Section3 -->
<section id="contact" class="section3">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section3__title">Contact Me</h2>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="text" class="form-control section3__form--input" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="email" class="form-control section3__form--input" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="tel" class="form-control section3__form--input" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<textarea rows="5" class="form-control section3__form--input" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg section3__button">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer--above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3 class="footer--above__title">Location</h3>
<p class="footer--above__text">3481 Melrose Place
<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<iframe class="footer--above__map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d183615.334415116!2d1.2244688902059417!3d44.02160942347321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12ac0de6de9463e9%3A0xc7fb153793253908!2sMontauban%2C+France!5e0!3m2!1sen!2sie!4v1490815128696" frameborder="0" allowfullscreen></iframe>
</div>
<div class="footer-col col-md-4">
<h3 class="footer--above__title">Social Media</h3>
<ul class="footer--above__list">
<li>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--fb"></span></a>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--tw"></span></a>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--lkin"></span></a>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--ghub"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer--below">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="footer--below__text">Copyright © Evan 2017</p>
</div>
</div>
</div>
</div>
</footer>
sass
/* FONT FAMILY AND SIZE */
$text__family--sans: "Lucida Sans Unicode",
"Lucida Grande",
sans-serif !default;
$text__size--base: 15px !default;
$text__size--xbig: 70px !default;
$text__size--big: 50px !default;
$text__size--md: 35px !default;
$text__size--lowmd: 25px !default;
$text__size--sm: 17px !default;
$text__size--xsm: 13px !default;
/* TEXT COLORS */
$text__color--white: #FFFFFF !default;
$text__color--black: #000000 !default;
$text__color--base: #333333 !default;
$text__color__secondary--light: #ffc03d !default;
$text__color__secondary: #e09f16 !default;
/* BACKGROUND COLORS */
$background__color--navbar: #990000 !default;
$background__color--footer--above: #e81e1e !default;
$background__color--secondary: #e09f16 !default;
$background__color--white: #FFFFFF !default;
/* LAYOUT */
$padding--xbig: 100px !default;
$padding--big: 60px !default;
$padding--sm: 30px !default;
$padding--xsm: 15px !default;
/* ICONS */
$bars-icon: "\f0c9";
$facebook-icon: "\f09a";
$twitter-icon: "\f099";
$linkedin-icon: "\f0e1";
$github-icon: "\f09b";
/* ------ MIXINS ------ */
@mixin text($size, $family: $text__family--sans, $color: $text__color--base, $align: center, $line: normal, $weight: normal) {
font-size: $size;
font-family: $family;
color: $color;
text-align: $align;
line-height: $line;
font-weight: $weight;
}
@mixin img($height: auto, $width: auto, $border: auto, $radius: 0, $shadow: 0, $display: block) {
height: $height;
width: $width;
border: $border;
border-radius: $radius;
box-shadow: $shadow;
display: $display;
}
@mixin layout($padding: auto, $margin: 0 auto, $minheight: auto) {
padding: $padding;
min-height: $minheight;
margin: $margin;
}
@mixin icon($icon, $color: $background__color--white) {
content: $icon;
color: $color;
font-family: FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ------------------- STYLES ------------------- */
body {
margin-bottom: 25px;
}
p {
@include text($size: $text__size--base, $color: $text__color--base);
}
/* NAVBAR */
.navbar {
background: $background__color--navbar;
text-transform: uppercase;
border: none;
@include layout($padding: 10px);
.navbar__button {
@include text($size: $text__size--md, $color: $text__color--white);
background: $background__color--secondary;
border: 1px solid $background__color--secondary;
&:hover,
&:focus {
background: $background__color--secondary;
}
&:after {
@include icon($bars-icon);
@include layout($margin: 0 0 0 6px)
}
}
.navbar__brand {
@include text($size: $text__size--md, $color: $text__color--white, $line: 28px, $weight: bold);
&:hover,
&:active,
&:focus {
color: $text__color--white;
}
}
.navbar__collapsingNav li.active a {
color: $background__color--white;
background: $background__color--secondary;
&:hover,
&:active,
&:focus {
color: $background__color--white;
background: $background__color--secondary;
}
}
.navbar__collapsingNav .navbar__item {
@include text($size: $text__size--sm, $color: $text__color--white, $weight: bold);
&:hover,
&:focus {
color: $text__color__secondary--light;
}
}
}
/* HEADER */
.header {
background-image: url('../../../assets/img/header-background.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
@include layout($padding: $padding--big 0 90px 0);
.header__profileimage {
@include img(300px,
300px,
$radius: 50%, $shadow: 2px 2px 8px 2px gray);
@include layout($margin: 10px auto 0 auto);
}
.header__textbox--title {
@include text($size: $text__size--xbig, $color: $text__color--white, $weight: bold);
}
.header__textbox--subtitle {
@include text($size: $text__size--lowmd, $color: $text__color--white, $line: 50%, $weight: bold);
@include layout($padding: 0 0 $padding--big 0);
}
}
/* SECTIONS */
.section1 {
background-color: $background__color--white;
@include layout($padding: $padding--sm auto $padding--big auto);
.section1__title {
@include text($size: $text__size--big, $color: $text__color--base, $weight: bold);
@include layout($padding: $padding--big);
text-transform: uppercase;
}
.section1__image,
.section1__image--last {
text-align: center;
@include img(250px,
300px,
5px);
@include layout($margin: 20px 20px 20px 20px);
}
.section1__image--last {
@include layout($margin: 20px 20px 100px 20px);
}
}
.section2 {
background-color: $background__color--secondary;
@include layout($padding: $padding--sm 0 $padding--sm 0, $minheight: 500px);
.section2__title {
@include text($size: $text__size--big, $color: $text__color--white, $weight: bold);
@include layout($padding: $padding--big);
text-transform: uppercase;
}
.section2__text {
@include text($size: $text__size--base, $color: $text__color--white, $align: justify);
}
}
.section3 {
background-color: $background__color--white;
@include layout($padding: $padding--sm 0 $padding--big 0);
.section3__title {
@include text($size: $text__size--big, $color: $text__color--base, $weight: bold);
@include layout($padding: $padding--big 0 $padding--sm 0);
text-transform: uppercase;
}
.section3__form--input {
@include text($size: $text__size--base, $color: $text__color--base, $align: left);
}
.section3__button {
@include text($size: $text__size--base, $color: $text__color--white, $weight: bold);
@include layout($margin: 0 0 80px 0);
}
}
/* FOOTER */
.footer .footer--above {
background-color: $background__color--footer--above;
.footer--above__title {
@include text($size: $text__size--md, $color: $text__color--white, $weight: bold);
@include layout($padding: $padding--sm 0 20px 0);
transform: uppercase;
}
.footer--above__text {
@include text($size: $text__size--base, $color: $text__color--white);
@include layout($padding: $padding--xsm 0 $padding--big 0);
}
.footer--above__map {
@include img(200px,
350px);
@include layout($padding: $padding--xsm 0 $padding--xsm 0);
}
.footer--above__list {
list-style-type: none;
text-align: center;
.footer--above__btnicon {
@include layout();
@include img(50px,
50px,
$border: 2px solid $background__color--white, $radius: 100%, $shadow: 2px 2px 2px 2px $background__color--navbar, $display: inline-block);
text-align: center;
font-size: 25px;
&:focus,
&:hover,
&:active {
background: red;
}
.footer--above__btnicon--fb:after {
@include icon($facebook-icon);
}
.footer--above__btnicon--tw:after {
@include icon($twitter-icon);
}
.footer--above__btnicon--lkin:after {
@include icon($linkedin-icon);
}
.footer--above__btnicon--ghub:after {
@include icon($github-icon);
}
}
}
}
.footer--below {
background: $background__color--navbar;
.footer--below__text {
@include text($size: $text__size--xsm, $color: $text__color--white);
@include layout($padding: 14px);
}
}
/* MEDIA */
@media (max-width: 767px) {
.header {
margin-top: 90px;
}
section {
padding: 75px 0;
}
section.first {
padding-top: 75px;
}
}
@media (min-width: 768px) {
.navbar {
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
.navbar__brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
}
.navbar.affix {
padding: 10px 0;
}
.navbar.affix .navbar__brand {
font-size: 1.5em;
}
.header {
padding-top: 200px;
padding-bottom: $padding--xbig;
.header__textbox--title {
font-size: 4.75em;
}
.header__textbox--subtitle {
font-size: 1.75em;
}
}
.section1 .section1__item {
margin: 0 0 30px;
}
}
Full project live: https://evandcp.github.io/#
lang-css