A Flutter Package That Provides Responsive Units That Scale

Responsive Units

Responsive Units is a simple flutter package that aims to aide with the development of responsive apps by providing responsive units that scale with the device's screen size.

While a number of other implementations on pub exist to tackle this particular issue, I found them to not work well on desktop and therefore decided to create a new one.

Demo

Installation

Add Responsive Units as a dependency in your pubspec.yaml

dependencies:
  ...
  responsive_units: ^0.2.0

Supported units

UnitDescription
.wWidth in pixels calculated as a percentage of the screen's width. (ex: 50.w return 50% of the screen's width)
.hHeight in pixels calculated as a percentage of the screen's height. (ex: 50.h return 50% of the screen's height)
.dgDiagonal length in pixels calculated as a percentage of the screen's diagonal. (ex: 50.dg return 50% of the screen's diagonal)
.sfwThe (safe) width in pixels calculated as a percentage of the screen's width excluding the parts of the display that are partially obscured by system UI (such as notches and the status bar) ex: 50.sfw returns 50% of the screen's safe width
.sfhThe (safe) height in pixels calculated as a percentage of the screen's height excluding the parts of the display that are partially obscured by system UI (such as notches and the status bar) ex: 50.sfh returns 50% of the screen's safe height
.sfdgThe (safe) diagonal length in pixels calculated as a percentage of the screen's diagonal length excluding the parts of the display that are partially obscured by system UI (such as notches and the status bar) ex: 50.sfdg returns 50% of the screen's safe diagonal
.spReturns a scalable pixel value that scales with the user selected text scale factor
Tip: chain .sp to any other unit to scale with the text factor (ex: 5.dg.sp will scale with both the diagonal and the text scale factor)

Usage

To start using the responsive units, simply add the following builder argument to your WidgetsApp

MaterialApp(
  ...
  builder: (context, child) => AppSizer(
    child: child,
  ),
  ...
)

Now you can use the responsive units anywhere in your source code by just importing the package

import 'package:responsive_units/responsive_units.dart';

Minimal Example

import 'package:flutter/material.dart';
import 'package:responsive_units/responsive_units.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => AppSizer(
        child: child,
      ),
      home: const ResponsiveBox(),
    );
  }
}

class ResponsiveBox extends StatelessWidget {
  const ResponsiveBox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.shade300,
      child: Center(
        child: Container(
          width: 50.w,
          height: 50.h,
          color: Colors.lightGreen,
          child: Center(
            child: Text(
              "This box (and text) scales with the window size",
              style: Theme.of(context)
                  .textTheme
                  .headline4
                  ?.copyWith(fontSize: 4.dg.sp, color: Colors.black),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

Feedback

If you have any feedback you'd like to share or issues with the package, feel free to submit a new issue at https://github.com/peter-sidra/responsive_units/issues

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add responsive_units

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  responsive_units: ^0.2.0+1

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:responsive_units/responsive_units.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsive_units/responsive_units.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => AppSizer(
        child: child,
      ),
      home: const ResponsiveBox(),
    );
  }
}

class ResponsiveBox extends StatelessWidget {
  const ResponsiveBox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.shade300,
      child: Center(
        child: Container(
          width: 50.w,
          height: 50.h,
          color: Colors.lightGreen,
          child: Center(
            child: Text(
              "This box (and text) scales with the window size",
              style: Theme.of(context)
                  .textTheme
                  .headline4
                  ?.copyWith(fontSize: 4.dg.sp, color: Colors.black),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
} 

Download Details:

Author: peter-sidra

Source Code: https://github.com/peter-sidra/responsive_units

#flutter #responsive 

A Flutter Package That Provides Responsive Units That Scale
Scott Hann

Scott Hann

1641043390

Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE

LEARN HOW TO BUILD AND DEPLOY FULL RESPONSIVE ECOMMERCE WEBSITE USING HTML CSS & JAVASCRIPT. This is a free HTML CSS Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step. Will Create from responsive navbar using html CSS JavaScript to responsive footer in one video.

Why This Course?
- Responsive Ecommerce Website Tutorial Using HTML CSS & JavaScript.
- Completely For Beginners.
- Multipage Ecommerce Website Project.
- Best Beginner Friendly Free Course On YouTube.
- Learn How to build amazing professional and responsive websites.
- Learn the fundamentals of web design.
- Modern CSS, including flexbox and CSS Grid for layout.
- Modern CSS techniques to create stunning designs and effects.
- How to use common components and layout patterns for professional website design and development.
- Advanced responsive design using media queries.
- And Many More.

PART 2: https://youtu.be/99muDSuP55s

Images: https://www.patreon.com/posts/60118753
Source Code 1: https://www.buymeacoffee.com/tech2etc...
Source Code 2: https://ko-fi.com/s/06e4db9e09
Icons: https://fontawesome.com/
Fonts: https://fonts.google.com/
All Source Codes: https://www.buymeacoffee.com/tech2etc
⛔❌Do Not CLICK This Link: https://bit.ly/3lJLyLY
Need any help? Join my Discord: https://discord.gg/C58ZQAk2DE

Recommended Course:
Multipage Responsive Ecommerce Website With Bootstrap HTML CSS & JAVASCRIPT:
https://cutt.ly/8Uqt5MQ
Multipage Responsive Online Course/LMS Website HTML CSS & JavaScript:
https://cutt.ly/7UqyeiR

Timestamps:
0:00 Course Intro
0:58 Final Project Preview
7:40 Final Responsive Website Preview
10:20 What You Will Achieve
10:54 Create Folder Directory/Project Setup
11:19 HTML CSS JavaScript File Overview
13:35 Header & Nav Menu
27:28 Hero Section
34:10 Sticky Navbar In CSS
35:45 Features Section
46:16 Featured Product Section
1:01:41 Big Shoutout To My Supporters
1:02:18 Call To Action Banner
1:10:33 New Arrival Products
1:12:32 Call To Action Banners
1:23:06 Text Banners
1:28:23 Newsletter Section
1:37:07 Footer Section
1:51:36 Responsive Breakpoint 1
1:52:50 Responsive Sidebar Menu
2:14:16 Responsive Breakpoint 2
2:22:29 Final Project

#html #css #responsive #webdev #javascript 

Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE

Create Beautiful & Responsive Cards with Flexbox CSS | Flexbox Example 1

Create Beautiful & Responsive Cards with Flexbox CSS | Flexbox Example 1

Kindly Subscribe for more videos : https://youtu.be/0T0GQmnVGZs

#css  #flexbox #flexlayout #responsive 

https://youtu.be/0T0GQmnVGZs

Create Beautiful & Responsive Cards with Flexbox CSS  |  Flexbox Example 1

CSS: Flexbox Tutorial in 20 Minutes | Flexbox for beginners

CSS FlexBox Tutorial | Flexbox for Beginners

Flexbox is a one-dimensional layout method for arranging items in rows or columns.
Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

🔥🔥🔥 Happy Learning 🔥🔥🔥
Timeline :
00:48 4 Main Concepts you must know
01:57 Creating Flex Container

Flex Container Properties

03:31 Flex-Direction-Row
05:11 Justify-Content
06:31 Align-Items
08:55 Flex-Direction-Column
10:45 Flex-Wrap
19:25 Align Content Flex Item Properties

11:39 Flex Item Properties Starts

11:44 Align-Self
12:38 Order Property
14:23 Flex-Grow
16:10 Flex-Basis
16:48 Flex-Shrink
18:25 Flex Shorthand Property

#css #flexbox #javascript #webdesign #responsive #Beginners #tutorial 

https://youtu.be/dVGyTeJj1dU

CSS: Flexbox Tutorial in 20 Minutes | Flexbox for beginners
Palash Roy

Palash Roy

1635176585

How To Make Login Form On Hero Image Responsive Design Only HTML And CSS Tutorial

How To Make Login Form On Hero Image Responsive Design Only HTML And CSS Tutorial #tutorial #css #html #login #responsive 

https://youtu.be/Gw2HSuDMyxA

How To Make Login Form On Hero Image Responsive Design Only HTML And CSS Tutorial

Components for Responsive Design with Flutter

Components for responsive design.

Features

SplitTwo

A container that supports two child widgets and you can adjust the child size via the split bar.

SplitTwo(
    childA: Center(child: Text("A")),
    childB: Center(child: Text("B")),
),

More features will be added in future updates

Use this package as a library

Depend on it

Run this command:

With Dart:

 $ dart pub add xinlake_responsive

With Flutter:

 $ flutter pub add xinlake_responsive

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  xinlake_responsive: ^0.1.1

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:xinlake_responsive/container/split_two.dart';
import 'package:xinlake_responsive/responsive.dart'; 

Download Details:

Author: xinlake

Source Code: https://github.com/xinlake/armoury/tree/main/xinlake-responsive

#responsive  #flutter 

Components for Responsive Design with Flutter
Scott Hann

Scott Hann

1633065054

Download Free HTML Resume/CV Templates For Your Portfolio

If you are looking for some Creative and Professional Looking Resume/CV Templates. Then you are in the right place. Here I have collected some Creative HTML CSS Resume Templates for you.

In this Resume/CV HTML & CSS collection, you will find some professional looking templates, which would surely make your Portfolio more impressive.

Professional HTML & CSS Resume Templates Collections 👇

  1. BreezyCV – CV Resume Template
  2. Maha CV/Resume
  3. RyanCV – CV Resume Template
  4. Watson Resume Template
  5. Leven | CV Resume Template
  6. Material Resume / CV
  7. ShiftCV | Blog, Resume, Portfolio
  8. MEE – Responsive Resume / Personal Portfolio
  9. vCard – Resume / CV / Portfolio
  10. Bolby – Portfolio/CV/Resume HTML Template
  11. cvCard – Responsive Resume Template
  12. Flato – Responsive Resume, Personal Portfolio Temp
  13. Material CV / Resume & vCard

See all the templates here

#HTML #css #responsive #design 

Download Free HTML Resume/CV Templates For Your Portfolio

Responsive Flutter Package That Control Size and Font

Responsive_s

Build any app with your optional responsive for width ,height and font size.

Responsive give many optional parameters to control responsive way:

  • fromPhysicalDimension means the length and all value will be calculated from device width and height.
  • fromRealDimension means the length and all value will be calculated from real width and height depending on device orientation.
  • Now,you can initial value for any device or for all device through "forUnInitialDevices" parameter.
  • The package automatically detect screen type;

Usage

@override
Widget build(BuildContext context) {
  Responsive _responsive = new Responsive(context);
  List<Widget> _circularAvatar = List<Widget>.generate(
      3,
          (index) =>
          CircleAvatar(
            radius: _responsive.responsiveValue(
                forUnInitialDevices: 5,
                forDesktopScreen: 10,
                forPortraitMobileScreen: 5),
          ));

  Container _container = Container(
      color: Colors.red,
      //responsive value can be used as responsive font size.
      child: Text(_responsive.screenType.toString(), style: TextStyle(
          fontSize: _responsive.responsiveValue(forUnInitialDevices: 5)
      ),),
      width: _responsive.responsiveWidth(forUnInitialDevices: 80),
      height: _responsive.responsiveHeight(forUnInitialDevices: 60));
  Widget _mobile = Column(
    mainAxisSize: MainAxisSize.max,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: _circularAvatar,
      ),
      _container
    ],
  );
  Widget _desktop = Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: _circularAvatar,
      ),
      SizedBox(width: _responsive.responsiveWidth(forUnInitialDevices: 2),),
      _container
    ],
  );
  return Scaffold(
      appBar: AppBar(),
      body: _responsive.responsiveWidget(
          forUnInitialDevices: _desktop,
          forPortraitMobileScreen: _mobile,
          forPortraitTabletScreen: _mobile)
  );
}

Result:

desktop size tablet landscape

tablet portriat test result

Overview:

Until now,this package offer many responsive function depending on device:

  • you can now initial different length and value depending on device to make your app responsive.
  • Responsive value is created to use it as responsive value for font size , radius or any another value.
  • Responsive function and responsive widget return function and widget depending on screen.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add responsive_s

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  responsive_s: ^1.0.1+1

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:responsive_s/responsive_s.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsive_s/responsive_s.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Responsive overview'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Responsive _responsive = new Responsive(context);
    List<Widget> _circularAvatar = List<Widget>.generate(
        3,
            (index) =>
            CircleAvatar(
              radius: _responsive.responsiveValue(
                  forUnInitialDevices: 5,
                  forDesktopScreen: 10,
                  forPortraitMobileScreen:5),
            ));

    Container _container = Container(
        color: Colors.red,
        child: Text(_responsive.screenType.toString(),style: TextStyle(
          fontSize: _responsive.responsiveValue(forUnInitialDevices: 5)
        ),),
        width: _responsive.responsiveWidth(forUnInitialDevices: 80),
        height: _responsive.responsiveHeight(forUnInitialDevices: 60));
   Widget _mobile=Column(
      mainAxisSize: MainAxisSize.max ,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: _circularAvatar,
        ),
        _container
      ],
    );
   Widget _desktop = Row(
     mainAxisSize: MainAxisSize.max,
     children: [
       Column(
         mainAxisSize: MainAxisSize.max,
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: _circularAvatar,
       ),
       SizedBox(width: _responsive.responsiveWidth(forUnInitialDevices:2),),
       _container
     ],
   );
    return Scaffold(
        appBar: AppBar(),
        body: _responsive.responsiveWidget(
                forUnInitialDevices: _desktop,
                forPortraitMobileScreen:_mobile,
                forPortraitTabletScreen:_mobile)
        );
  }
} 

Download Details:

Author: adelhammoda

Source Code: https://github.com/adelhammoda/responsive_s

#responsive  #flutter 

Responsive Flutter Package That Control Size and Font

9 of the Best Responsive Website Design Testing Tools and Sites

9 of the Best Responsive Website Design Testing Tools and Sites

In today’s video, we’ll check out some of the best responsive website design testing tools and sites.

#responsive #design #elegantthemes

9 of the Best Responsive Website Design Testing Tools and Sites
Vada  Dare

Vada Dare

1625715793

The LayoutBuilder (App Responsiveness + Know The Width/Height of A Widget) - Flutter

LayoutBuilders are the best way to know what the height of your widgets is.

Now, if you need such information before returning the build method, then you’d have to use a MediaQuery (video for that here: https://www.youtube.com/watch?v=q8t0kPwBfl8).

But if you’d just like to know a widget’s dimensions after the return method, then the LayoutBuilder will be your best friend!

Simply make it the CHILD of whatever widget it is that you want to know the dimensions of and that’s it!

00:00 - Intro
00:32 - Code Overview
01:17 - Using The LayoutBuilder
04:50 - Conditionals With LayoutBuilder
05:43 - Final Conclusions & Advice
06:30 - Like & Subscribe
06:38 - Flutter Mentor Out

#flutter #layoutbuilder #responsive

Credits:

OUTRO SONG:
Mitsubachi by Smith The Mister https://smiththemister.bandcamp.com
Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: http://bit.ly/mitsubachi
Music promoted by Audio Library https://youtu.be/0IgndUb1YQI

#flutter #layoutbuilder #responsive

The LayoutBuilder (App Responsiveness + Know The Width/Height of A Widget) - Flutter

John Phil

1624252370

Leverage the Power Of Responsive Design: Boost Your Google Ranking

We are now living in a mobile-first era where mobile web browsing has overtaken desktop browsing. Considering this mobile-centric attitude that society has adopted, Google announced mobile-first indexing for the whole web. After this major announcement by Google, mobile responsiveness has become a standard component of any SEO plan, regardless of industry.

Still, thinking why you should have a mobile responsive site? Here are the top 10 SEO benefits of responsive web design. But before moving to the benefits of responsive design, we will start with the basic understanding of, what is a responsive website? And what is the importance of responsive web design?

What is responsive web design?
Responsive web design is a web development approach that creates dynamic changes to the appearance of a web page, depending on the screen size and orientation of the device, page elements reshuffle themselves, and easily adjusted for different-sized screens and viewports especially ideal for mobile viewing.

Importance of Responsive Web Design

Google is more user-focused, going to favor websites that are optimized for mobile devices. Google responsive websites are typically the ones that have incorporated a mobile responsive design.
Google announcement not only necessitated the incorporation of a responsive web design to an SEO’s mobile website but also released its own guide on Mobile SEO, helping webmasters make a transition, if necessary, to a responsive website design.
Google recommends Responsive Web Design, having a mobile responsive website affects your SEO through positive user behavior signals. After Google’s announcement, it started recognizing mobile versions of websites as their primary version.

Top 10 SEO benefits of responsive web design.
Here we have listed the advantages of responsive web design, explaining why you should upgrade your website to a mobile responsive design.

Easy Indexing.
Increases Organic Traffic.
Improves Website performance.
Improves Page Loading Speed
Reduces bounce rates.
Enhances user experience.
More Cost-effective.
Stronger Backlinking.
Reduces Content Duplicacy.
Boosts Social Sharing.

1. Easy Indexing
The fundamental benefit of responsive web design is that it provides an optimal user experience regardless of the device or screen size the user prefers for web browsing, as it adapts itself accordingly. Responsive web design not only enhances user experience but also makes it easier for search engines to index your website on any device.

2.Increases Organic Traffic
One of the biggest benefits of responsive web design is it can increase organic traffic to your site. Since the website with responsive web design gains a better organic ranking on Google SERP, they can increase organic traffic to your site, improve your mobile SEO, and help convert mobile visitors with the streamlined design and navigation.

3.Improves Website performance
Responsive websites are much faster than non-responsive ones. The very approach to creating a responsive web design is compliant with all modern web standards, and following Google’s guidelines ensures that your website is optimized for speed and cross-browser compatibility on different devices.

4. Improves Page Loading Speed
Websites with responsive designs typically load faster than mobile-only sites and also help you gain a massive SEO advantage in terms of better ranking. Page load speed is one of the crucial ranking factors considered by Google so making your site responsive is good for SEO as well.

5. Reduces bounce rate
Another major benefit of responsive design is, it reduces your site bounce rate. Google analyzes your site bounce rate — your site bounce rate determines your website quality score depending on this statistic. A high bounce rate will lead to a lower SEO ranking. By having a responsive website, you can ensure that users across all screen sizes and devices will have an optimal experience on your site. This will increase user engagement on your site and lower the bounce rate.

6. Enhances user experience
One of the major purposes and benefits of responsive web design is to enhance and improve the user experience for those who visit your website. Responsive web design offers an inherent fluidity that not only optimizes the viewer experience but also adapts different screen devices that the website is being viewed on. Enhanced user experience contributes to your site’s organic ranking.

7. More Cost-effective
With responsive web design, you don’t need to create two separate websites one for desktop, one for mobile. Additionally, websites with responsive design gain better SEO ranking and allow you to decrease any dependency you may have on Paid advertising campaigns. Your website can easily get relevant web traffic without any extra expenditure on advertising.

8. Stronger Backlinking
Backlinks are the external website links that are linked back to your website. A website with more backlinks has a higher domain authority and higher organic ranking. With a responsive website, your backlinks will connect with a single domain, boost your site popularity, and search rank. Strong backlinking is one of the most crucial factors affecting your online presence.

9. Reduce Content Duplicacy
Prior to responsive web design, web developers have to create separate versions of a website designed specifically for mobile devices. In addition to the increased cost in creating both websites, they created a colossal problem with search engines because creating two websites with the same content gives rise to content duplicacy issues. Responsive websites have completely addressed this issue as all of the content for both desktop and mobile resides on a single domain.

10. Boosts Social Sharing
Another big benefit of responsive web design is that it can easily extend your reach to social media audiences and boost social sharing, which constitutes the majority of social media consumption on the web. Since responsive websites are easily accessible by mobile users, your website will get top-tier quality backlinks from social media juggernauts like Facebook, Instagram, Facebook, Linked In, and Twitter.

Conclusion:
Hope the above-listed benefits of responsive design help you understand why you should upgrade your website to responsive design.

Switching to google responsive websites will help you rank better organically as you are more focused to provide your visitor with the best user experience for their preferred device. With all statistics and trends pointing that responsive web design is the leading source of website traffic. If you are looking for continued success with search marketing then complement your SEO efforts with responsive web design to improve websites’ performance in Google’s SERP.

Yes, it’s true that incorporating a responsive web design into your website needs a lot of time, effort, and energy, but trust us it will be worth it!

#power of responsive design #boost #goolge #ranking #with #responsive

Leverage the Power Of Responsive Design: Boost Your Google Ranking

Rahul Jangid

1623638760

100% Responsive Website Footer | Awesome Footer Design 2021

Hello guys, today I am going to show you how to create a 100% Responsive Website Footer, in this video you will learn how do you create an awesome footer design using html & css

What is footer in the html?

As the name suggests, the footer is the bottom part of a web page or a section.

What is the definition of a footer the tag?

The <footer> tag defines the footer of a web page or a section. Usually, it contains contact details, navigation links, copyright information etc.

What we can display in the footer?

  1. Privacy Policy
  2. Contact
  3. Address
  4. Navigation
  5. Social Icons
  6. Email Signup
  7. Copyright etc.

These are some basics we can use in our footer section in html.

Simple Code sample

<footer>
  <ul>
      <li><a href="mailto:info@stackfindover.com"><i class="fa fa-envelope-open"></i> info@stackfindover.com</a></li>
      <li><a href="#"><i class="fa fa-twitter"></i>@stackfindover</a></li>
      <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin</a></li>
  </ul>
</footer>

In this article, we will be going to build a responsive website footer using HTML and CSS, Let’s get started with Coding!

Responsive website footer design step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating an awesome responsive website footer. In the next step, you will start creating the structure of the webpage.

You may like these also:

  1. Creative Contact Us Page Design
  2. How to create navigation like IMB style

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to create an awesome responsive footer design using HTML and CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css"> </head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;800&display=swap" rel="stylesheet">
<body>
    
</body>

</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<footer class="footer">
        <div class="start-learning">
            <div class="footer-start">
                <div class="texts">
                    <h2 class="section-title">Start learning now</h2>
                    <h3 class="section-sub-heading">
                        <span>Only</span><strong>$95</strong>
                        <span>for a</span> <strong>40 hour</strong>
                        <span>complete course</span>
                    </h3>
                </div>
                <a href="#" class="button">
                    <span class="label">Join the course</span>
                </a>
                <img class="illustration" src="illustration-student.png" alt="illustration" width="120" height="94">
            </div>
        </div>

        <div class="inner">
            <div class="column is-logo">
                <a href="#" class="main-logo">
                    <div class="logo">
                        <img src="logo.png" alt="stackfindover">
                    </div>
                    <div class="logo-info">
                        <div class="text">Stackfindover</div>
                        <span class="copyright">© 2021. All rights reserved.</span>
                    </div>
                </a>
            </div>
            <div class="column is-nav">
                <div class="column-title">Navigation</div>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Join</a></li>
                </ul>
            </div>

            <div class="column is-nav">
                <div class="column-title">Contact</div>
                <ul>
                    <li><a href="#"><i class="fa fa-envelope-open"></i> info@stackfindover.com</a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i>@stackfindover</a></li>
                    <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin</a></li>
                </ul>
                <div class="column-title">Other</div>
                <ul>
                    <li><a href="#">Quiz</a></li>
                </ul>
            </div>

            <div class="column is-nav">
                <div class="column-title">Blog</div>
                <ul>
                    <li><a href="#">What is jQuery</a></li>
                    <li><a href="#">What is JavaScript</a></li>
                    <li><a href="#">How to make money with a blog</a></li>
                </ul>
            </div>
        </div>
    </footer>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
ul { list-style: none; }
a { text-decoration: unset; }
a:hover { text-decoration: underline; }
ul > li > a { color:#fff; }
ul > li { line-height: 1.5em; }


.footer {
    display: block;
    width: 100%;
    position: relative;
    background: #150c21;
    padding: 150px 25px 50px 25px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.footer-start {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    width: 90%;
    margin: auto;
    padding: 80px 100px;
    background: #705df2;
    border-radius: 15px;
}
.start-learning {
    position: absolute;
    left: 0;
    right: 0;
    top: -150px;
}
.footer .inner {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 20px;
    max-width: 1180px;
    margin: auto;
    text-align: left;
}
.main-logo {
    position: relative;
    display: flex;
    align-items: center;
}
.main-logo .logo {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.main-logo .logo > img {
    display: block;
    width: 100%;
    min-width: 40px;
}
.logo-info {
    text-align: left;
    line-height: 20px;
}
.text {
    font-size: 17px;
    line-height: 17px;
    color: #fff;
    letter-spacing: .18em;
    font-weight: 600;
}
.copyright {
    color: #fff;
    font-size: 12px;
    line-height: 12px;
}
.footer .column {
    width: 100%;
    font-size: 14px;
    text-align: left;
}
.footer .column .column-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0.5em;
    color: #fff;
}
.footer .column .column-title:not(:first-child) {
    margin-top: 1em;
}
.illustration {
    left: 8%;
    position: absolute;
    top: -28px;
}
a.button {
    display: inline-flex;
    position: relative;
    height: 60px;
    margin-right: 20px;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    background: #fff;
    color: #705df2;
    border-radius: 36px;
    font-size: 16px;
    font-weight: 700;
    padding: 0 30px;
    text-decoration: unset;
    box-shadow: 0px 24px 74px rgb(60 0 189 / 20%);
}
.section-title {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
}
.section-sub-heading {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}
.section-sub-heading span {
    opacity: 0.6;
}
.section-sub-heading strong {
    font-weight: 600;
}

@media only screen and (max-width: 990px) and (min-width: 200px) {
    body {
        height: 200vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .footer .inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .start-learning {
        position: unset;
    }
    .footer-start {
        width: 100%;
        display: block;
        padding: 30px 20px;
        margin: 30px 0;
    }
    .section-title {
        font-size: 30px;
    }
    .section-sub-heading {
        font-size: 18px;
    }
    footer.footer {
        padding-top: 0;
    }
    a.button {
        height: 50px;
        margin-top: 10px;
    }
    .column.is-logo {
        order: 4;
    }
}

#Final Result

Watch Now


Responsive Website Footer Source code ZIP

#html #css #responsive #footer

100% Responsive Website Footer | Awesome Footer Design 2021

w3hubs com

1621402301

Bootstrap 5 Responsive Sidebars With JavaScript

Sidebar or side navbar is mostly used in web application side in a vertical view with important link/menu. So here we made Responsive Sidebars in Bootstrap 5 With JavaScript.

In this element, we used bootstrap 5 Navs and tabs components in a vertical menu. Also, we used bootstrap grids and utilities class with javascript to make dynamic clickable. Here we modify some bootstrap class and also used own custom class for background-colors. This is fully responsive Sidebars for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

#css #html #html5 #css3 #responsive #bootstrap

Bootstrap 5 Responsive Sidebars With JavaScript