Züs
Search
K
Comment on page

Adding Styling Elements to Website

--scss(directory)
--chalkInfo.scss
--chimneyInfo.scss
--color.scss
--containerwithicon.scss
--features.scss
--fonts.scss
--globals.scss
--hero.scss
--include-media.scss
--main.scss
--mainfeature.scss
--mixins.scss
--showcase.scss
--variables.scss
chalkInfo.scss
Source File : chalkInfo.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by chalk containers in scss code.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 defines screen size definitions for tablet and smallDesktop opening the website.
  • Line 11 to 19 defines dimensions for chalkInfo container
  • Line 21 to 32 defines margin and padding for textContent container.
  • Line 38 to 51 defines ,position, dimensions and color settings for the ellipseTop container.
  • Line 54 to 116 defines margin ,padding and color settings for website media that will be displayed on a screen size greater than tablet(768px+)
  • Line 118 to 143 defines margin ,padding and color settings for website media that will be displayed on a screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)
Sample Screenshot :
chimneyInfo.scss
Source Code : chimneyInfo.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by chimney information containers in scss code.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 defines screen size definitions for tablet(768 px) and smallDesktop(1200px) opening the website.
  • Line 11 to 47 defines subcontainers for chimneyInfo container.
  • Line 12 to 17 defines position and dimensions for chimneyArt sub-container inside chimneyInfo container.
  • Line 20 to 31 defines margin and padding for textContent sub-container inside chimneyInfo container.
  • Line 33 to 47 defines ,position, dimensions and color settings for the ellipseTop sub container inside chimneyInfo container .
  • Line 49 to 108 defines margin ,padding and color settings for chimney info containers that will be displayed on a screen size greater than tablet(768px+)
  • Line 110 to 134 defines margin ,padding and color settings for chimney info containers that will be displayed on a screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)
Sample Screenshot :
color.scss
1
$lightgray: #81858e66;S
2
$blobber-primary-blue: #009eff;
3
$blobber-text-white: #e6e7e8;
4
$color-background: #030819;
5
$primary-blue: #0b9dff;
6
$white: #ffffff;
Describing Code:
  • Line 1 to 6 defines color schemes for all the containers and their layouts and backgrounds in website .
containerwithicon.scss
Source Code : containerwithicon.scs
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by containerwithicon scss code.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 defines screen size definitions for tablet(768 px) and smallDesktop(1200px)
  • Line 11 to 16 defines position,padding and various other properties for rootWrapper container which matches the root element of a tree representing the CSS document.
  • Line 18 to 23 defines a button and its margin and padding inside containerWithIcon container.
  • Line 25 to 27 defines height for vultContainer .
  • Line 29 to 37 defines position, dimensions and color settings for the logo container.
  • Line 38 to 45 defines position ,dimension and margin for the blimpArt container.
  • Line 47 to 50 defines margin and padding for textContent container.
  • Line 51 to 59 defines top-margin ,padding of p and button sub-containers inside textContent container.
  • Line 61 to 75 defines position and dimensions for an ellipseTop container that draws an ellipse.
  • Line 77 to 79 defines the stack order for the ellipseContainer.
  • Line 81 to 83 defines display: none; for blimpArtDesktop container which is commonly used with JavaScript to hide and show elements without deleting and recreating them.
  • Line 84 to 87 defines font weight and size for the heading container.
  • Line 89 to 91 element is used to color a part of a text with blue color.
  • Line 94 to 97 uppercase container makes the text uppercase and aligned at the center.
  • Line 99 to 103 sets display: none; for withoutPeriod container which is commonly used with JavaScript to hide and show elements without deleting and recreating them.
  • Line 105 to 109 sets font size and weight for headings with h3 tags.
  • Line 110 to 116 sets font weight size and color for all the headings with paragraph tags in the website.
  • Line 121 to 136 defines styling configuration related to buttons on the website.
Sample Screenshot :
faq.scss
Source Code : _faq.scss
Sample Screenshot :
features.scss
Source Code : features.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by features in scss code.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 defines margin ,padding and background color for styling layout wrappers in css.
  • Line 11 to 14 defines padding and background color for containers displaying website features.
  • Line 16 to 23 defines a flexible size container position,width and padding
  • Line 25 to 33 defines button width,height,weight and padding inside the flex container
  • Line 37 to 41 defines icon position,height and width .
  • Line 43 to 45 aligns the text and its width in the container.
  • Line 52 to 56 defines font weight and size for the headings of website.
  • Line 57 to 63 defines font colors and aligning for the text in the paragraph.
  • Line 69 to 94 defines font settings, padding, and margin for the buttons in flex container.
  • Line 107 to 171 defines css styling settings for containers described above for screen size greater than tablet (768px+)
Sample Screenshot :
globals.scss
Source Code : globals.scss Describing Code :
  • Line 1 imports variables that can be used by the global css containers for website.
  • Line 4 to 9 inserts some css config before the content of each global website elements:
  • Line 11 to 14 defines css styling config for the html or head element of the website
  • Line 16 to 22 defiines css styling config for the <body> element of the website.
  • Line 24 to 29 defines css styling config for the <a> element . or hyperlinks
  • Line 31 to 33 defines css styling for the <ul> element or an unordered HTML list.
  • Line 37 to 40 defines css styling for the element that has been selected via input.
  • Line 42 to 46 defines css button font properties for the placeholder attribute.
  • Line 48 to 51 defines css button font properties for the placeholder attribute via input
  • Line 53 to 55 defines display css parameters for a container of all containers.
  • Line 57 to 60 defines a simple responsive react components that helps in creating Centered containers, overlays and Multiple modals.In the modal a animation applies styles to its target before and after its execution.
hero.scss
Source Code : hero.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by Hero container. The hero container usually contain a large image with text often placed at the top of a webpage:
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 28 defines margin ,width padding and background color for primary,secondary heading and hero containers.
  • Line 30 to 45 defines css styling for uppercase texts ,h3 element.
  • The Line 46 to 53 improves the look of an HTML form with CSS.
  • Line 55 to 81 defines button padding and its attributes in a flex container.
  • Line 86 to 94 defines css styling config for input box container
  • Line 96 to 142 css styling for the showcase when input is provided in the box Following css elements are updated with new css config
    • inputbox ,button, placeholder ,react modal content icons and list items.
  • Line 144 to 217 defines css styling settings for containers described above for screen size greater than tablet (768px+)
Sample Screenshot :
include-media.scss
Source Code : include-media.scss Describing Code :
  • include-media provides a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
main.scss
1
@import "mainfeature";
2
@import "hero";
3
@import "features";
4
@import "containerwithicon";
5
@import "showcase";
6
@import "vultInfo";
7
@import "chimneyInfo";
8
@import "chalkInfo";
9
@import "privateSharing";
10
@import "partners";
Describing Code :
  • Line 1 to 10 import all the other scss styling pages to display them on the main webpage.
mainfeature.scss
Source Code : mainfeature.scss
Describing Code :
  • Line 1 to 10 import all the other scss styling pages to display them on the main webpage.
    • Line 1 and 2 import mixins and variables that can be used by the container. The hero container usually contain a large image with text often placed at the top of a webpage:
    • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
    • Line 5 defines margin ,width padding and the following css attributes for mainFeature container
      • A <p> element with resizable margin
      • A <h> element with css styling parameters
      • CSS styling paramters for the <p> element.
  • Line 42 to 101 defines css styling settings for containers described above for screen size greater than tablet (768px+)
Sample Screenshot :
mixins.scss
Source Code : mixins.scss
Describing Code :
Mixins helps in reuse of CSS styling code throughout the website. mixins.css provide various styles that can be re-used throughout your sample website stylesheet.
partners.scss
Source Code : partners.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by partners container.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 defines css styling settings(position,margin,padding,text-align etc) for partnersContainer .
    • Inside the partnersContainer, the heading element has different font size ,weight and line height(Line 13 to 17).
  • partners subcontainer has flexible responsive layout container structure without using float or positioning. Margins for the top and bottom of the flexible container are defined.
  • Line 29 to 36 defines css styling settings for screen size greater than tablet (768px+).
Sample Screenshot :
privateSharing.scss
Source Code : privateSharing.scss Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by private sharing container.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 defines css styling settings for privateSharing container .
    • (Line 6 to 14 )Inside the privateSharing container, a flexible responsive layout container structure is defined without using float or positioning. Although margin,padding and text alignment is defined for flex container.
    • A <heading> element is also defined under the privateSharing container.
  • Line 23 to 30 defines privateSharing css styling settings for screen size greater than tablet (768px+).
Sample Screenshot :
showcase.scss
Source Code :_showcase.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by container.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 define device breakpoints to optimize website content for screens and devices with different heights and width.
  • Line 11 to 16 defines css styling settings(position,border-top,text aligning,and padding ) for showcasecontainer .
    • A containerWithIcon css element with a button is defined under showcasecontainer.(Line 18 to 24)
    • A ellipseContainer contains aninset CSS property that corresponds to the distance between an element and parent element. (Line 26 to 38)
    • A ellipse on the left or ellipseLeft container is defined with its relative position(height,left,top,width) and defined background and opacity .(Line 40 to 54)
    • A ellipse on the right or ellipseRight container is defined with its relative position.(Line 56 to 69)
    • A showcaseArt container is defined which contains relative position and size for video element or for demo video that has to be played on the website.
  • (Line 94 to 105) A textContentWrapper simply holds all visual elements and content on the page. It's just a generic container.
  • Line 107 to 119 defines a flexible container structure in css element named textContent . A flexible container contains an h3 element and <p> element.
  • Line 121 to 130 defines a listContainer that has a division or section with font weight ,size ,line height and padding defined.
  • Line 132 to 140 defines a heading in primary blue for showcased Art .
  • Line 142 to 145 defines css styling settings for setting container text in upper case
  • Line 147 to 151 sets the display property to none for hiding elements
  • Line 153 to 166 defines bulletTextContainerwhich defines CSS styling for listing the text as bullet points.
  • Line 168 to 278 defines showcasecontainer css styling settings for screen size greater than tablet (768px+).
  • Line 280 to 305 defines showcasecontainer css styling settings for screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)
variables.scss
Source Code : variables.scss
Describing Code :
  • Line 1 to 19 defines hexadecimal value for colors
  • Line 21 to 57 defines CSS gradients that helps in displaying smooth transitions between two or more specified colors.
vultInfo.scss
Source Code : vultInfo.scss
Describing Code :
  • Line 1 and 2 import mixins and variables that can be used by vultInfo container.
  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
  • Line 6 to 9 define device breakpoints to optimize website content for screens and devices with different heights and width.
  • Line 11 defines vultInfo container. The container contains the following subcontainers.
    • A vultArt displaying vult logo with specified dimensions.(Line 12 to 19)
    • A textContent containing padding and margin for displaying text on website. (Line 21 to 27)
    • A ellipse on the top or ellipseTop container is defined with its relative position(height,left,top,width) and defined background and opacity .(Line 40 to 53)
  • Line 54 to 135 defines vultInfo css styling settings for screen size greater than tablet (768px+).
  • Line 137 to 174 defines vultInfo css styling settings for screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)
Sample Screenshot :