Responsive web-design landing page

A website project based on 2 layouts (full and mobile version) with responsive design to all device sizes.

Contents

• Experience
• Demo
• How to Use
• Features and structure
  • Optimization
  • Code flexibility and speed-up
  • Adaptive design
• Layouts
  • Full-size
  • Mobile

Experience 🎓

In this project i practice:

• Some elements of Bootstrap 4: grid.min.css to simplify adaptation; reboot.min.css based on normalize.css.
• SASS preprocessor (pseudoclasses, pseudoelements, mixins and variables);
• CSS animations
• Creating a responsive design based on the combination of adaptive and rubber;
• Using a local icon font for social media logos;
• Writing a small script (on JavaScript) for the mobile version;
• Using vendor prefixes.

Demo

The completed project can be viewed here

How to Use 🔧

Running a project locally

If you wish to run project locally as is, then all that's required is the css, fonts,icons,img, js folders and the index.html file from this repository. Then just need to open index.html.

Features and structure

Optimization 📈

• css/bootstrap-grid.min.css, css/bootstrap-reboot.min.css Using only the necessary minified Bootstrap libraries makes site adaptation convenient (due to the bootstrap grid column system), with minimal impact on the site loading speed.
• css/font.css, fonts/ folder The local icon font, which contains only the elements necessary for the site, is also designed to reduce loading time and make the icon library reusable for future projects.
• css/style.min.css, css/style.min.css.map The resulting style file style.min.css, compiled by the preprocessor, is also minified for optimization purposes.

Code flexibility and speed-up ⚡️

• The use of the CSS preprocessor, in particular SASS, made it possible to speed up the layout and reduce the repeatability of the code.

  📂 sass

  📄 _general.sass 📄 _media.sass 📄 _mixins.sass 📄 _variables.sass 📄 style.sass

• All the main colors of the design are set as variables, which allows you to easily and quickly change the color palette of the site if necessary.

   // _variables.sass (declaration)
   $blue: #1eacc7
   $black: #000000
   $dark: #222222
   $white: #ffffff
   $red: #ff5656

   // _general.sass (using)
   .menu
   	...
   	&_link
   		color: $white
   		...
   		&:hover
   			...
   			color: $blue
   			...

• Using mixins for unified elements (in our case, buttons) in the project makes it easier to change their behavior in one place if necessary

   // _mixins.sass (declaration)
   =btn_hover
   	&:hover
   		background-image: none
   		background-color: $blue
   		box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.12), 1px 1px 5px rgba(0, 0, 0, 0.12)

   // _general.sass (using)
   .subheader
   	...
   	&_btn
   		...
   		+btn_hover

Adaptive design 📐

• Bootstrap grid system made it easier to adapt the site to different displays

   <section  class="promo">
   	<div  class="container">
   		<div  class="row">
   			<!-- Using Bootstrap Grid System for adapting -->
   			<div  class="col-md-12 offset-md-0 col-lg-10 offset-lg-1">
   			...
   			</div>
   		</div>
   	</div>
   </section>

• And using Media Queries is necessary to indicate more specific design changes on different screen sizes.

   // _media.sass (usage example)
   @media (max-width: 1200px)
   	.menu
   		&_item
   			padding-right: 20px
   		&_link
   			font-size: 13px
   	...

  

• The mobile menu script was also written to adapt to the appropriate device type

   // Mobile menu script (hamburger)
   window.addEventListener('DOMContentLoaded',  ()  =>  {
   	const menu = document.querySelector('.menu'),
   	menuItem = document.querySelectorAll('.menu_item'),
   	hamburger = document.querySelector('.hamburger');
   	
   	// switching class when clicking on "hamburger"
   	hamburger.addEventListener('click',  ()  =>  {
   		hamburger.classList.toggle('hamburger_active');
   		menu.classList.toggle('menu_active');
   	});
   	
   	// switching class when clicking on any menu item
   	menuItem.forEach(item  =>  {
   		item.addEventListener('click',  ()  =>  {
   			hamburger.classList.toggle('hamburger_active');
   			menu.classList.toggle('menu_active');
   		})
   	})
   })

  Demo

  

Layouts

The site layouts is shown below. The layouts in other formats is also available in the repository.

Full-size 💻

Mobile 📱