Adding Styling Elements to Website
Last updated
Last updated
--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.scssSource 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 :
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 :
$lightgray: #81858e66;S
$blobber-primary-blue: #009eff;
$blobber-text-white: #e6e7e8;
$color-background: #030819;
$primary-blue: #0b9dff;
$white: #ffffff;Describing Code:
Line 1 to 6 defines color schemes for all the containers and their layouts and backgrounds in website .
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 :
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 :
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.
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 :
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.
@import "mainfeature";
@import "hero";
@import "features";
@import "containerwithicon";
@import "showcase";
@import "vultInfo";
@import "chimneyInfo";
@import "chalkInfo";
@import "privateSharing";
@import "partners";Describing Code :
Line 1 to 10 import all the other scss styling pages to display them on the main webpage.
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 :
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.
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 :
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 :
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+)
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.
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 :
