Skip to content

A simple landing page based on the layout using HTML+CSS with adaptation to different device screens

Notifications You must be signed in to change notification settings

rimerian/Uber-landing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 🎓

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
     	...

    Animation showing site adaptation

  • 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 💻

Full-size site layout

Mobile 📱