├── dummy.js ├── images ├── .DS_Store ├── career │ ├── .DS_Store │ ├── career1.png │ ├── career2.png │ ├── career3.png │ ├── career4.png │ ├── career5.png │ ├── carrer6.png │ └── header.png └── contact │ ├── .DS_Store │ ├── header.png │ ├── mid │ ├── 1.png │ ├── 10.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ └── .DS_Store │ ├── contact1.png │ ├── contact-map.png │ └── Screen Shot 2021-03-09 at 11.59.32 PM.png ├── imgs ├── about.png ├── aboutMe.png ├── navbar.png ├── twitter.png ├── linkedIn.png ├── about-me-png.jpg ├── investorRelBgnd.png └── investorrelationsClipart.png ├── screenshots └── hubspot.png ├── contact_sales ├── img │ ├── chatbot.png │ └── contact-sales-chat.png ├── contact_sales_script.js ├── meeting_style.css ├── contact_sales_style.css └── meeting_index.html ├── concept.js ├── login_page ├── dashboard.js ├── signup.js ├── login.js ├── signup_success.html ├── login_unsuccess.html ├── login_success.html ├── cms.css ├── cms.html ├── sales.css ├── login.html ├── marketing.css ├── service.css ├── signup.html ├── sales.html ├── signup_style.css ├── login_style.css ├── service.html ├── marketing.html ├── dashboard.css └── dashboard.html ├── investorRelations ├── index.html ├── pageEnhance.css ├── footer.html ├── data.js └── investors.js ├── README.md ├── managementTeam ├── index.html ├── pageStyle.css ├── management.js ├── footer.html └── dataSet.js ├── get_started_page ├── getstarted.css └── getstarted.html ├── navigation.html ├── navii-shiv.html ├── script.js ├── footer.html └── style.css /dummy.js: -------------------------------------------------------------------------------- 1 | //intended typo 2 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /imgs/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/about.png -------------------------------------------------------------------------------- /imgs/aboutMe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/aboutMe.png -------------------------------------------------------------------------------- /imgs/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/navbar.png -------------------------------------------------------------------------------- /imgs/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/twitter.png -------------------------------------------------------------------------------- /imgs/linkedIn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/linkedIn.png -------------------------------------------------------------------------------- /imgs/about-me-png.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/about-me-png.jpg -------------------------------------------------------------------------------- /images/career/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/.DS_Store -------------------------------------------------------------------------------- /screenshots/hubspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/screenshots/hubspot.png -------------------------------------------------------------------------------- /images/career/career1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/career1.png -------------------------------------------------------------------------------- /images/career/career2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/career2.png -------------------------------------------------------------------------------- /images/career/career3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/career3.png -------------------------------------------------------------------------------- /images/career/career4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/career4.png -------------------------------------------------------------------------------- /images/career/career5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/career5.png -------------------------------------------------------------------------------- /images/career/carrer6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/carrer6.png -------------------------------------------------------------------------------- /images/career/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/career/header.png -------------------------------------------------------------------------------- /images/contact/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/.DS_Store -------------------------------------------------------------------------------- /images/contact/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/header.png -------------------------------------------------------------------------------- /images/contact/mid/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/1.png -------------------------------------------------------------------------------- /images/contact/mid/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/10.png -------------------------------------------------------------------------------- /images/contact/mid/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/2.png -------------------------------------------------------------------------------- /images/contact/mid/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/3.png -------------------------------------------------------------------------------- /images/contact/mid/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/4.png -------------------------------------------------------------------------------- /images/contact/mid/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/5.png -------------------------------------------------------------------------------- /images/contact/mid/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/6.png -------------------------------------------------------------------------------- /images/contact/mid/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/7.png -------------------------------------------------------------------------------- /images/contact/mid/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/8.png -------------------------------------------------------------------------------- /images/contact/mid/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/9.png -------------------------------------------------------------------------------- /imgs/investorRelBgnd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/investorRelBgnd.png -------------------------------------------------------------------------------- /images/contact/contact1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/contact1.png -------------------------------------------------------------------------------- /images/contact/mid/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/mid/.DS_Store -------------------------------------------------------------------------------- /contact_sales/img/chatbot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/contact_sales/img/chatbot.png -------------------------------------------------------------------------------- /images/contact/contact-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/contact-map.png -------------------------------------------------------------------------------- /imgs/investorrelationsClipart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/imgs/investorrelationsClipart.png -------------------------------------------------------------------------------- /contact_sales/img/contact-sales-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/contact_sales/img/contact-sales-chat.png -------------------------------------------------------------------------------- /images/contact/Screen Shot 2021-03-09 at 11.59.32 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamsharma585/HubSpot_Clone/HEAD/images/contact/Screen Shot 2021-03-09 at 11.59.32 PM.png -------------------------------------------------------------------------------- /concept.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // use of 4 | // :hover 5 | // :focus //on click event 6 | // :focus-within 7 | 8 | 9 | 10 | // photo ko blur krke info show krna 11 | 12 | // footer me social media icon set krna -------------------------------------------------------------------------------- /login_page/dashboard.js: -------------------------------------------------------------------------------- 1 | function allDashboards(){ 2 | window.location.href =`dashboard.html` 3 | } 4 | function sales(){ 5 | window.location.href =`sales.html` 6 | } 7 | function marketing(){ 8 | window.location.href =`marketing.html` 9 | } 10 | function service(){ 11 | window.location.href =`service.html` 12 | } 13 | function cms(){ 14 | window.location.href =`cms.html` 15 | } -------------------------------------------------------------------------------- /login_page/signup.js: -------------------------------------------------------------------------------- 1 | 2 | //Signup page JS file 3 | function signUp(){ 4 | var formData ={ 5 | firstname :document.getElementById("signup_firstname").value, 6 | lastname :document.getElementById("signup_lastname").value, 7 | email :document.getElementById("signup_email").value, 8 | password :document.getElementById("signup_password").value 9 | 10 | }; 11 | formData =JSON.stringify(formData); 12 | console.log(formData); 13 | 14 | localStorage.setItem("Data",formData) 15 | 16 | window.location.href =`signup_success.html` 17 | } -------------------------------------------------------------------------------- /login_page/login.js: -------------------------------------------------------------------------------- 1 | 2 | //Login Js file 3 | function doLogin(){ 4 | var login_email =document.getElementById("login_email").value; 5 | var login_password =document.getElementById("login_password").value; 6 | 7 | console.log(login_email,login_password); 8 | 9 | var stored_data =localStorage.getItem("Data"); 10 | stored_data =JSON.parse(stored_data) 11 | console.log(stored_data); 12 | 13 | if(login_email == stored_data.email && login_password == stored_data.password){ 14 | window.location.href =`login_success.html` 15 | } 16 | else if(login_email != stored_data.email || login_password != stored_data.password){ 17 | window.location.href =`login_unsuccess.html` 18 | } 19 | 20 | } -------------------------------------------------------------------------------- /login_page/signup_success.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Successful 8 | 37 | 38 | 39 |

Successfully Signed Up !!!

40 | Click Here to Login 41 | 42 | -------------------------------------------------------------------------------- /investorRelations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HubSpot | Investor Relations 5 | 6 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Investor Overview

16 |

News

17 |

Events And Presentations

18 |

Leadership And Governance

19 |

FAQ

20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /login_page/login_unsuccess.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Successful 8 | 39 | 40 | 41 |

Invalid Credentials

42 |
Don't Have an account ?
43 | 44 | SignUp 45 | 46 | -------------------------------------------------------------------------------- /login_page/login_success.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Successful 8 | 41 | 42 | 43 |

Login Successful !!!

44 | Click Here for Dashboard 45 | 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Our Website 2 | 3 | ## www.hubspot.com/ 4 | 5 | ## Team Chenab 6 | 7 | ## Screenshots 8 | 9 | * Landing Page 10 | ![Landing Page](screenshots/hubspot.png) 11 | 12 | 13 | ### Team Members 14 | 15 | - Kiran R 16 | - Vivek Ranjan 17 | - Shubham Sharma 18 | - Prashanth Vengala 19 | 20 | ### Languages and Tools Used: 21 | 22 | - HTML 23 | - CSS 24 | - JavaScript 25 | - Visual Studio Code 26 | - Git 27 | 28 | ### Pages Builds: 29 | 30 | - HomePage 31 | - Contact Sales 32 | -- Book Meeting 33 | - Sign up & Login 34 | - Careers 35 | - Contact Us 36 | - Investor Relations 37 | - Management Team 38 | - Get started with Hubspot 39 | 40 | ### Libraries Used : 41 | 42 | - Google Fonts 43 | - Font Awesome 44 | 45 | ### Summary: 46 | 47 | Our project is to clone www.hubspot.com/ We did 10 pages Home page, Contact Sales, Book Meeting , Sign up & Login, Careers, Contact Us ,Investor Relations ,Management Team and Get started with Hubspot. We use the Font Awesome library for icons, Google Fonts library for fonts. To make it interactive with the user we use javascript language. We have also used some api in Investor Relations page to fetch dynamic data and also used localStorage property to store the users data for Login and scheduling the meeting. 48 | Thanks. 49 | 50 | ### Use: 51 | 52 | To use the project clone the repository and go inside the folder HubSpot_Clone using cd HubSpot_Clone. 53 | Locate the file index.html and run it in the browser. 54 | 55 | -------------------------------------------------------------------------------- /login_page/cms.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | background-color: #ffff; 8 | color: #33475b; 9 | } 10 | html, 11 | body { 12 | height: 100%; 13 | } 14 | #top_bar { 15 | height: 100px; 16 | width: 100%; 17 | border: 0.5px solid rgb(187, 187, 187); 18 | border-top: 0; 19 | } 20 | #top_bar h2 { 21 | float: left; 22 | font-size: 35px; 23 | font-style: oblique 30deg 50deg; 24 | padding: 30px 0 0 30px; 25 | } 26 | #top_bar img { 27 | float: right; 28 | margin: 25px 0 0 0; 29 | } 30 | #container { 31 | width: 100%; 32 | padding-bottom: 100px; 33 | } 34 | #left_container { 35 | width: 15%; 36 | float: left; 37 | padding: 20px 25px 0 20px; 38 | list-style: none; 39 | line-height: 50px; 40 | font-weight: 600; 41 | } 42 | #left_container button { 43 | border: 0; 44 | height: 30px; 45 | width: 150px; 46 | font-size: 15px; 47 | font-variant: small-caps; 48 | } 49 | 50 | #left_container button:hover { 51 | background-color: #eaf0f6; 52 | border-radius: 10px; 53 | } 54 | 55 | #right_container { 56 | display: grid; 57 | gap: 20px; 58 | margin: 20px 0 0 10px; 59 | line-height: 40px; 60 | font-style: oblique; 61 | grid-template-rows: 500px; 62 | grid-template-columns: 49% 49%; 63 | grid-template-areas: "image1 image2"; 64 | } 65 | .image1 { 66 | grid-area: image1; 67 | border: 1px solid skyblue; 68 | padding: 10px 10px 10px 10px; 69 | } 70 | 71 | .image2 { 72 | grid-area: image2; 73 | padding: 10px 10px 10px 10px; 74 | border: 1px solid skyblue; 75 | } 76 | .image1:hover, 77 | .image2:hover { 78 | outline: none !important; 79 | border: 1.5px solid #0091ae; 80 | box-shadow: 0 0 10px #719ece; 81 | border-radius: 2px; 82 | background-color: #eaf0f6; 83 | } 84 | -------------------------------------------------------------------------------- /login_page/cms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dashboard 8 | 9 | 10 | 11 |
12 |

Dashboard Library

13 | image 14 |
15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Web Analytics 27 |

Web Analytics

28 |

Start with a dashboard of 8 reports that focus on website sessions. See how many visitors are visiting your website, new and returning. See how these visitors are finding your website. 29 |

30 |
31 |
32 | Website Visits & Engagements 33 |

Website Visits & Engagement

34 |

Start with a dashboard of 8 reports that focus on quality of visits and engagements to your website.

35 |
36 | 37 |
38 |
39 | 40 | 43 | 44 | -------------------------------------------------------------------------------- /managementTeam/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HubSpot Manangement Team | Executive Team & Board of Directors 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Manangement

18 |

Board of Directors

19 |

Advisory Board

20 |
21 |
22 |
23 | 24 |
25 |
26 |

What's Happening at HubSpot

27 |

Curious about recent developments at HubSpot? Check out the latest announcements, news coverage, awards, 28 | and more in HubSpot’s Newsroom. Or, subscribe to our Company News Blog to stay forever up-to-date.

29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /login_page/sales.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | background-color: #ffff; 8 | color: #33475b; 9 | } 10 | html, 11 | body { 12 | height: 100%; 13 | } 14 | #top_bar { 15 | height: 100px; 16 | width: 100%; 17 | border: 0.5px solid rgb(187, 187, 187); 18 | border-top: 0; 19 | } 20 | #top_bar h2 { 21 | float: left; 22 | font-size: 35px; 23 | font-style: oblique 30deg 50deg; 24 | padding: 30px 0 0 30px; 25 | } 26 | #top_bar img { 27 | float: right; 28 | margin: 25px 0 0 0; 29 | } 30 | #container { 31 | width: 100%; 32 | padding-bottom: 100px; 33 | } 34 | #left_container { 35 | width: 15%; 36 | float: left; 37 | padding: 20px 25px 0 20px; 38 | list-style: none; 39 | line-height: 50px; 40 | font-weight: 600; 41 | } 42 | #left_container button { 43 | border: 0; 44 | height: 30px; 45 | width: 150px; 46 | font-size: 15px; 47 | font-variant: small-caps; 48 | } 49 | 50 | #left_container li button:hover { 51 | background-color: #eaf0f6; 52 | border-radius: 10px; 53 | } 54 | 55 | #right_container { 56 | display: grid; 57 | gap: 20px; 58 | margin: 20px 0 0 10px; 59 | line-height: 40px; 60 | font-style: oblique; 61 | grid-template-rows: 500px; 62 | grid-template-columns: 49% 49%; 63 | grid-template-areas: 64 | "image1 image2" 65 | "image3 image4"; 66 | } 67 | .image1 { 68 | grid-area: image1; 69 | border: 1px solid skyblue; 70 | padding: 10px 10px 10px 10px; 71 | } 72 | 73 | .image2 { 74 | grid-area: image2; 75 | padding: 10px 10px 10px 10px; 76 | border: 1px solid skyblue; 77 | } 78 | .image3 { 79 | grid-area: image3; 80 | padding: 10px 10px 10px 10px; 81 | border: 1px solid skyblue; 82 | } 83 | .image4 { 84 | grid-area: image4; 85 | padding: 10px 10px 10px 10px; 86 | border: 1px solid skyblue; 87 | } 88 | .image1:hover, 89 | .image2:hover, 90 | .image3:hover, 91 | .image4:hover { 92 | outline: none !important; 93 | border: 1.5px solid #0091ae; 94 | box-shadow: 0 0 10px #719ece; 95 | border-radius: 2px; 96 | background-color: #eaf0f6; 97 | } 98 | -------------------------------------------------------------------------------- /login_page/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Page 8 | 9 | 10 | 11 | 12 | 13 |
14 | 17 | 21 | 22 | 23 |
24 | 38 |
39 | 40 |
41 |
42 | 43 | 44 | 45 |
46 | 47 |

@2021 HubSpot, Inc.All Rights Reserved.

48 | Privacy Policy 49 |
50 | 51 |
52 | 53 | 54 | 56 | 57 | -------------------------------------------------------------------------------- /login_page/marketing.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | background-color: #ffff; 8 | color: #33475b; 9 | } 10 | html, 11 | body { 12 | height: 100%; 13 | } 14 | #top_bar { 15 | height: 100px; 16 | width: 100%; 17 | border: 0.5px solid rgb(187, 187, 187); 18 | border-top: 0; 19 | } 20 | #top_bar h2 { 21 | float: left; 22 | font-size: 35px; 23 | font-style: oblique 30deg 50deg; 24 | padding: 30px 0 0 30px; 25 | } 26 | #top_bar img { 27 | float: right; 28 | margin: 25px 0 0 0; 29 | } 30 | #container { 31 | width: 100%; 32 | padding-bottom: 100px; 33 | } 34 | #left_container { 35 | width: 15%; 36 | float: left; 37 | padding: 20px 25px 0 20px; 38 | list-style: none; 39 | line-height: 50px; 40 | font-weight: 600; 41 | } 42 | #left_container button { 43 | border: 0; 44 | height: 30px; 45 | width: 150px; 46 | font-size: 15px; 47 | font-variant: small-caps; 48 | } 49 | 50 | #left_container button:hover { 51 | background-color: #eaf0f6; 52 | border-radius: 10px; 53 | } 54 | 55 | #right_container { 56 | display: grid; 57 | gap: 20px; 58 | margin: 20px 0 0 10px; 59 | line-height: 40px; 60 | font-style: oblique; 61 | grid-template-rows: 500px; 62 | grid-template-columns: 49% 49%; 63 | grid-template-areas: 64 | "image1 image2" 65 | "image3 image4" 66 | "image5"; 67 | } 68 | .image1 { 69 | grid-area: image1; 70 | border: 1px solid skyblue; 71 | padding: 10px 10px 10px 10px; 72 | } 73 | 74 | .image2 { 75 | grid-area: image2; 76 | padding: 10px 10px 10px 10px; 77 | border: 1px solid skyblue; 78 | } 79 | .image3 { 80 | grid-area: image3; 81 | padding: 10px 10px 10px 10px; 82 | border: 1px solid skyblue; 83 | } 84 | .image4 { 85 | grid-area: image4; 86 | padding: 10px 10px 10px 10px; 87 | border: 1px solid skyblue; 88 | } 89 | .image5 { 90 | grid-area: image5; 91 | padding: 10px 10px 10px 10px; 92 | border: 1px solid skyblue; 93 | } 94 | .image1:hover, 95 | .image2:hover, 96 | .image3:hover, 97 | .image4:hover, 98 | .image5:hover { 99 | outline: none !important; 100 | border: 1.5px solid #0091ae; 101 | box-shadow: 0 0 10px #719ece; 102 | border-radius: 2px; 103 | background-color: #eaf0f6; 104 | } 105 | -------------------------------------------------------------------------------- /login_page/service.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | background-color: #ffff; 8 | color: #33475b; 9 | } 10 | html, 11 | body { 12 | height: 100%; 13 | } 14 | #top_bar { 15 | height: 100px; 16 | width: 100%; 17 | border: 0.5px solid rgb(187, 187, 187); 18 | border-top: 0; 19 | } 20 | #top_bar h2 { 21 | float: left; 22 | font-size: 35px; 23 | font-style: oblique 30deg 50deg; 24 | padding: 30px 0 0 30px; 25 | } 26 | #top_bar img { 27 | float: right; 28 | margin: 25px 0 0 0; 29 | } 30 | #container { 31 | width: 100%; 32 | padding-bottom: 100px; 33 | } 34 | #left_container { 35 | width: 15%; 36 | float: left; 37 | padding: 20px 25px 0 20px; 38 | list-style: none; 39 | line-height: 50px; 40 | font-weight: 600; 41 | } 42 | #left_container button { 43 | border: 0; 44 | height: 30px; 45 | width: 150px; 46 | font-size: 15px; 47 | font-variant: small-caps; 48 | } 49 | 50 | #left_container button:hover { 51 | background-color: #eaf0f6; 52 | border-radius: 10px; 53 | } 54 | 55 | #right_container { 56 | display: grid; 57 | gap: 20px; 58 | margin: 20px 0 0 10px; 59 | line-height: 40px; 60 | font-style: oblique; 61 | grid-template-rows: 500px; 62 | grid-template-columns: 49% 49%; 63 | grid-template-areas: 64 | "image1 image2" 65 | "image3 image4" 66 | "image5"; 67 | } 68 | .image1 { 69 | grid-area: image1; 70 | border: 1px solid skyblue; 71 | padding: 10px 10px 10px 10px; 72 | } 73 | 74 | .image2 { 75 | grid-area: image2; 76 | padding: 10px 10px 10px 10px; 77 | border: 1px solid skyblue; 78 | } 79 | .image3 { 80 | grid-area: image3; 81 | padding: 10px 10px 10px 10px; 82 | border: 1px solid skyblue; 83 | } 84 | .image4 { 85 | grid-area: image4; 86 | padding: 10px 10px 10px 10px; 87 | border: 1px solid skyblue; 88 | } 89 | .image5 { 90 | grid-area: image5; 91 | padding: 10px 10px 10px 10px; 92 | border: 1px solid skyblue; 93 | } 94 | .image1:hover, 95 | .image2:hover, 96 | .image3:hover, 97 | .image4:hover, 98 | .image5:hover { 99 | outline: none !important; 100 | border: 1.5px solid #0091ae; 101 | box-shadow: 0 0 10px #719ece; 102 | border-radius: 2px; 103 | background-color: #eaf0f6; 104 | } 105 | -------------------------------------------------------------------------------- /login_page/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SignUp Page 8 | 9 | 10 | 11 |
12 | 17 |
18 |
19 |
20 |
21 |

Create your free account

22 | 23 |
24 | 38 | 39 | By creating an account, you agree to the 40 | HubSpot Customer Terms of Service and 41 | Privacy Policy 42 |
43 |
44 |
45 | Smiling Person 46 | 47 |

HubSpot CRM is 100% free, forever.

48 |

No credit card needed

49 |
50 |
51 | 52 | 55 | 56 | -------------------------------------------------------------------------------- /contact_sales/contact_sales_script.js: -------------------------------------------------------------------------------- 1 | function showMeetingData() { 2 | var first_name = document.getElementById("first-nam").value 3 | var last_name = document.getElementById("last-nam").value 4 | var email_id = document.getElementById("mail-id").value 5 | var phone_number = document.getElementById("phone-no").value 6 | var company_name = document.getElementById("company-nam").value 7 | var web_url = document.getElementById("website-url").value 8 | var employee_number = document.getElementById("employee-size").value 9 | var country_names = document.getElementById("country_dropdown").value 10 | var meeting_query = document.getElementById("feedback").value 11 | 12 | 13 | if (first_name === "" || last_name === "" || email_id === "" || phone_number === "" || company_name === "" || web_url === "" || employee_number === "" || country_names === "" || meeting_query === "") { 14 | 15 | alert("Please Fill all the mandetory details."); 16 | 17 | // returnToPreviousPage(); 18 | // window.history.back(); 19 | return false; 20 | } 21 | else { 22 | var Users = { 23 | First_Name: first_name, 24 | Last_Name: last_name, 25 | Email: email_id, 26 | Phone_Number: phone_number, 27 | Company_Name: company_name, 28 | Website: web_url, 29 | Employees: employee_number, 30 | Country: country_names, 31 | Meeting_Query: meeting_query 32 | } 33 | 34 | Users = JSON.stringify(Users) 35 | localStorage.setItem("User data for Meeting", Users) 36 | 37 | alert("Checking for meeting slot !!"); 38 | window.location = "meeting_index.html" 39 | return true; 40 | } 41 | 42 | 43 | 44 | 45 | 46 | } 47 | var meeting_btn = document.querySelector("#contact-sales-btn3") 48 | meeting_btn.addEventListener("click", showMeetingData) 49 | 50 | 51 | 52 | 53 | var modal = document.getElementById("myModal"); 54 | 55 | var calling_btn = document.querySelector("#contact-nos") 56 | 57 | 58 | 59 | 60 | var span = document.getElementsByClassName("close")[0]; 61 | 62 | 63 | calling_btn.onclick = function () { 64 | modal.style.display = "block"; 65 | } 66 | 67 | 68 | span.onclick = function () { 69 | modal.style.display = "none"; 70 | } 71 | 72 | 73 | window.onclick = function (event) { 74 | if (event.target == modal) { 75 | modal.style.display = "none"; 76 | } 77 | } 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /login_page/sales.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sales 8 | 9 | 10 | 11 |
12 |

Dashboard Library

13 | image 14 |
15 | 16 |
17 |
18 |
  • 19 |
  • 20 |
  • 21 |
  • 22 |
  • 23 |
    24 |
    25 |
    26 | Sales Manager 27 |

    Sales Manager

    28 |

    Start with a dashboard of 8 reports that focus on your sales team's performance.

    29 |
    30 |
    31 | Sales Opportunity Review 32 |

    Sales Opportunity Review

    33 |

    Start with a dashboard of 9 reports that focus on the overall performance of your sales for the month. 34 |

    35 |
    36 |
    37 | Sales Rep 38 |

    Sales Rep

    39 |

    Start with a dashboard of 6 reports that focus on your monthly performance. 40 |

    41 |
    42 |
    43 | Sales 44 |

    Sales

    45 |

    Start with a dashboard of 5 reports that focus on your deals and sales. Track your team's activities, with prospects but also in their deals. 46 |

    47 |
    48 | 49 |
    50 |
    51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /login_page/signup_style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | } 8 | html, 9 | body { 10 | height: 100%; 11 | } 12 | #top_bar { 13 | width: 100%; 14 | height: 50px; 15 | margin-top: 15px; 16 | } 17 | #hubspot_logo { 18 | float: left; 19 | } 20 | #login_link { 21 | margin-top: 15px; 22 | float: right; 23 | margin-left: 900px; 24 | } 25 | #login_link { 26 | font-size: 15px; 27 | text-align: center; 28 | } 29 | #login_link a { 30 | color: #0091ae; 31 | font-size: 15px; 32 | font-weight: 700; 33 | text-decoration: none; 34 | } 35 | #login_link a:hover { 36 | text-decoration: underline; 37 | } 38 | #middle_bar { 39 | height: 700px; 40 | } 41 | #signup_left { 42 | width: 50%; 43 | float: left; 44 | } 45 | #image_right { 46 | width: 50%; 47 | float: left; 48 | } 49 | #signup_details { 50 | width: 60%; 51 | margin: auto; 52 | margin-top: 60px; 53 | } 54 | .text { 55 | color: #33475b; 56 | font-size: 30px; 57 | font-family: Verdana, Geneva, Tahoma, sans-serif; 58 | font-weight: 900; 59 | text-align: center; 60 | } 61 | #google_login { 62 | margin-top: 30px; 63 | background-color: rgb(66, 133, 244); 64 | border-radius: 0.1875rem; 65 | border: none; 66 | color: #fff; 67 | height: 50px; 68 | text-align: center; 69 | width: 100%; 70 | font-weight: 500; 71 | font-size: 15px; 72 | } 73 | #google_login:hover { 74 | background-color: #2961c2; 75 | } 76 | .feild input { 77 | margin-top: 15px; 78 | text-align: start; 79 | height: 40px; 80 | border: none; 81 | background-color: #eaf0f6; 82 | width: 100%; 83 | margin-bottom: 10px; 84 | } 85 | input:focus { 86 | outline: none !important; 87 | border: 1.5px solid #0091ae; 88 | box-shadow: 0 0 3px #719ece; 89 | border-radius: 2px; 90 | } 91 | #signup_button { 92 | margin-top: 15px; 93 | background-color: #425b76; 94 | border-radius: 0.1875rem; 95 | border: none; 96 | color: #fff; 97 | height: 50px; 98 | text-align: center; 99 | width: 100%; 100 | font-weight: 500; 101 | font-size: 15px; 102 | margin-bottom: 25px; 103 | } 104 | #signup_button:hover { 105 | background-color: #273544; 106 | } 107 | #signup_details a { 108 | color: #0091ae; 109 | font-size: 15px; 110 | font-weight: 500; 111 | text-decoration: none; 112 | } 113 | #signup_details a:hover { 114 | text-decoration: underline; 115 | } 116 | #image_right img { 117 | height: 400px; 118 | width: 350px; 119 | margin-left: 180px; 120 | margin-top: 50px; 121 | } 122 | #image_right h4 { 123 | font-size: 25px; 124 | color: #33475b; 125 | text-align: center; 126 | margin-top: 50px; 127 | } 128 | #image_right p { 129 | color: #33475b; 130 | text-align: center; 131 | font-size: 15px; 132 | margin-top: 20px; 133 | } 134 | -------------------------------------------------------------------------------- /login_page/login_style.css: -------------------------------------------------------------------------------- 1 | /* Main Container */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 8 | } 9 | html, 10 | body { 11 | display: grid; 12 | height: 100%; 13 | } 14 | #container { 15 | height: 100%; 16 | width: 28%; 17 | margin: auto; 18 | font-weight: 400; 19 | font-size: 15px; 20 | color: #33475b; 21 | line-height: 35px; 22 | letter-spacing: 0.5px; 23 | } 24 | #hubspot_logo { 25 | margin: 60px 30px; 26 | margin-bottom: 0; 27 | } 28 | #signup_link { 29 | font-size: 15px; 30 | text-align: center; 31 | } 32 | #signup_link a { 33 | color: #0091ae; 34 | font-size: 15px; 35 | font-weight: 700; 36 | text-decoration: none; 37 | } 38 | #signup_link a:hover { 39 | text-decoration: underline; 40 | } 41 | .feild input { 42 | text-align: start; 43 | height: 40px; 44 | border: none; 45 | background-color: #eaf0f6; 46 | width: 100%; 47 | margin-bottom: 10px; 48 | } 49 | input:focus { 50 | outline: none !important; 51 | border: 1.5px solid #0091ae; 52 | box-shadow: 0 0 3px #719ece; 53 | border-radius: 2px; 54 | } 55 | #show_password { 56 | color: black; 57 | color: #0091ae; 58 | font-size: 12px; 59 | font-weight: 550; 60 | text-decoration: none; 61 | } 62 | #show_password:hover { 63 | text-decoration: underline; 64 | } 65 | #forgot_password a { 66 | color: black; 67 | color: #0091ae; 68 | font-size: 12px; 69 | font-weight: 550; 70 | text-decoration: none; 71 | } 72 | #forgot_password:hover { 73 | text-decoration: underline; 74 | } 75 | #label_name { 76 | font-size: 15px; 77 | margin-left: 5px; 78 | } 79 | #login_button { 80 | background-color: #eaf0f6; 81 | color: #b0c1d4; 82 | border: none; 83 | height: 40px; 84 | font-size: 20px; 85 | font-weight: 600; 86 | width: 100%; 87 | padding: 5px; 88 | border-radius: 2px; 89 | margin-top: 10px; 90 | } 91 | #login_button:hover { 92 | background-color: #ff8f73; 93 | border-color: #ff8f73; 94 | color: #fff; 95 | } 96 | #google_login { 97 | margin-top: 30px; 98 | background-color: #5886d4; 99 | border-radius: 0.1875rem; 100 | border: none; 101 | color: #fff; 102 | height: 40px; 103 | text-align: center; 104 | width: 100%; 105 | font-weight: 500; 106 | font-size: 15px; 107 | } 108 | #google_login:hover { 109 | background-color: #2961c2; 110 | } 111 | #sso_login { 112 | margin-top: 15px; 113 | background-color: #425b76; 114 | border-color: #425b76; 115 | border-radius: 0.1875rem; 116 | border: none; 117 | color: #fff; 118 | height: 40px; 119 | text-align: center; 120 | width: 100%; 121 | font-weight: 500; 122 | font-size: 15px; 123 | } 124 | #sso_login:hover { 125 | background-color: #384858; 126 | } 127 | #privacy_link { 128 | color: black; 129 | color: #0091ae; 130 | font-size: 13px; 131 | margin-left: 160px; 132 | text-decoration: none; 133 | } 134 | #privacy_link:hover { 135 | text-decoration: underline; 136 | } 137 | -------------------------------------------------------------------------------- /get_started_page/getstarted.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | } 8 | html, 9 | body { 10 | height: 100%; 11 | } 12 | #container { 13 | height: 350px; 14 | width: 100%; 15 | background-color: #33475b; 16 | } 17 | #heading h1 { 18 | height: 100px; 19 | width: 500px; 20 | color: #ffff; 21 | margin: auto; 22 | font-size: 45px; 23 | font-weight: 700; 24 | text-align: center; 25 | padding-top: 80px; 26 | } 27 | #heading p { 28 | height: 50px; 29 | width: 50%; 30 | font-size: 19px; 31 | font-weight: lighter; 32 | text-align: center; 33 | color: #ffff; 34 | margin: auto; 35 | margin-top: 30px; 36 | line-height: 30px; 37 | padding-top: 70px; 38 | } 39 | #middle_container { 40 | height: 1200px; 41 | width: 100%; 42 | background-color: rgb(238, 238, 238); 43 | } 44 | #mid_cont_left { 45 | width: 400px; 46 | margin-top: 50px; 47 | margin-left: 330px; 48 | background-color: #ffff; 49 | float: left; 50 | } 51 | #mid_cont_right { 52 | width: 400px; 53 | margin-top: 50px; 54 | margin-right: 330px; 55 | background-color: #ffff; 56 | float: right; 57 | } 58 | .header { 59 | height: 100px; 60 | color: #ffff; 61 | width: 100%; 62 | font-size: 20px; 63 | font-weight: 600; 64 | background-color: #ff7a59; 65 | border-radius: 5px; 66 | text-align: center; 67 | padding-top: 35px; 68 | } 69 | .text { 70 | width: 60%; 71 | margin: auto; 72 | margin-top: 50px; 73 | font-size: 20px; 74 | font-weight: 500; 75 | text-align: center; 76 | color: #33475b; 77 | } 78 | .features_list { 79 | list-style-type: none; 80 | margin-left: 40px; 81 | font-size: 15px; 82 | line-height: 50px; 83 | } 84 | .right_text { 85 | color: #33475b; 86 | font-size: 20px; 87 | font-style: oblique; 88 | font-weight: 600; 89 | margin-left: 20px; 90 | line-height: 50px; 91 | } 92 | #middle_container button { 93 | margin: 60px 0 0 120px; 94 | height: 60px; 95 | width: 180px; 96 | color: #ffff; 97 | font-size: 15px; 98 | background-color: #ff7a59; 99 | border: none; 100 | border-radius: 5px; 101 | } 102 | #middle_container button:hover { 103 | background-color: #f3b3a4; 104 | } 105 | #last_text { 106 | height: 150px; 107 | margin: auto; 108 | text-align: center; 109 | color: #33475b; 110 | background-color: rgb(238, 238, 238); 111 | } 112 | #last_text p { 113 | font-size: 15px; 114 | padding: 60px 200px 0 200px; 115 | line-height: 30px; 116 | } 117 | #getstart_footer { 118 | height: 200px; 119 | background-color: #33475b; 120 | } 121 | #getstart_footer p { 122 | color: #ffff; 123 | font-size: 20px; 124 | font-weight: 500; 125 | text-align: center; 126 | padding-top: 60px; 127 | } 128 | #getstart_footer a { 129 | text-decoration: none; 130 | color: #ffff; 131 | font-size: 20px; 132 | font-weight: 500; 133 | text-align: center; 134 | padding: 0 0 0 650px; 135 | line-height: 60px; 136 | } 137 | #getstart_footer a:hover { 138 | color: rgb(94, 146, 146); 139 | } 140 | -------------------------------------------------------------------------------- /login_page/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dashboard 8 | 9 | 10 | 11 |
    12 |

    Dashboard Library

    13 | image 14 |
    15 | 16 |
    17 |
    18 | 19 | 20 | 21 | 22 | 23 |
    24 |
    25 |
    26 | Chat Overview 27 |

    Chart Overview

    28 |

    Start with a dashboard of 6 reports that give an overview on the kind of requests your team receives over chat.

    29 |
    30 |
    31 | Email Overview 32 |

    Email Overview

    33 |

    Start with a dashboard of 5 reports that give an overview on the kind of requests your team receives over email.

    34 |
    35 |
    36 | Service Performance Over Time 37 |

    Service Performance Over Time

    38 |

    Start with a dashboard of 8 reports that help to see how your support team is changing over time.

    39 |
    40 |
    41 | Service Team Performance 42 |

    Service Team Performance

    43 |

    Start with a dashboard of 6 reports that help to track how your service team is performing. 44 |

    45 |
    46 |
    47 | Service Hub Overview 48 |

    Service Hub Overview

    49 |

    Start with a dashboard of 8 reports that give an overview on the kind of support requests your team receives.

    50 |
    51 | 52 |
    53 |
    54 | 55 | 58 | 59 | -------------------------------------------------------------------------------- /login_page/marketing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Marketing 8 | 9 | 10 | 11 |
    12 |

    Dashboard Library

    13 | image 14 |
    15 | 16 |
    17 |
    18 | 19 | 20 | 21 | 22 | 23 |
    24 |
    25 |
    26 | Lead Generation 27 |

    Lead Generation

    28 |

    Start with a dashboard of 8 reports to understand the overall volume, quality, and sources of your new leads.

    29 |
    30 |
    31 | Marketing Channel Performance 32 |

    Marketing Channel Performance

    33 |

    Start with a dashboard of 10 reports that focus on monitoring key metrics for your core marketing channels, from landing pages to social media.

    34 |
    35 |
    36 | Marketing 37 |

    Marketing

    38 |

    Start with a dashboard of 9 reports that focus on your website performance. Also performance and contact activity.

    39 |
    40 |
    41 | Web Analytics 42 |

    Web Analytics

    43 |

    Start with a dashboard of 8 reports that focus on website sessions. See how many visitors are visiting your website, new and returning. See how these visitors are finding your website. 44 |

    45 |
    46 |
    47 | Website Visits & Engagements 48 |

    Website Visits & Engagement

    49 |

    Start with a dashboard of 8 reports that focus on quality of visits and engagements to your website.

    50 |
    51 | 52 |
    53 |
    54 | 55 | 58 | 59 | -------------------------------------------------------------------------------- /navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mera navigation 7 | 8 | 111 | 112 | 113 | 114 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 159 | 160 | -------------------------------------------------------------------------------- /navii-shiv.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 98 | 99 | 100 | 101 | 102 | 105 | 106 | 107 | 108 | 109 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /login_page/dashboard.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Avenir Next W02, Helvetica, Arial, sans-serif; 6 | letter-spacing: 0.5px; 7 | background-color: #ffff; 8 | color: #33475b; 9 | } 10 | html, 11 | body { 12 | height: 100%; 13 | } 14 | #top_bar { 15 | height: 100px; 16 | width: 100%; 17 | border: 0.5px solid rgb(187, 187, 187); 18 | border-top: 0; 19 | } 20 | #top_bar h2 { 21 | float: left; 22 | font-size: 35px; 23 | font-style: oblique 30deg 50deg; 24 | padding: 30px 0 0 30px; 25 | } 26 | #top_bar img { 27 | float: right; 28 | margin: 25px 0 0 0; 29 | } 30 | #container { 31 | width: 100%; 32 | padding-bottom: 100px; 33 | } 34 | #left_container { 35 | width: 15%; 36 | float: left; 37 | padding: 20px 25px 0 20px; 38 | list-style: none; 39 | line-height: 50px; 40 | font-weight: 600; 41 | } 42 | #left_container button { 43 | border: 0; 44 | height: 30px; 45 | width: 150px; 46 | font-size: 15px; 47 | font-variant: small-caps; 48 | } 49 | 50 | #left_container button:hover { 51 | background-color: #eaf0f6; 52 | border-radius: 10px; 53 | } 54 | 55 | #right_container { 56 | display: grid; 57 | gap: 20px; 58 | margin: 20px 0 0 10px; 59 | line-height: 40px; 60 | font-style: oblique; 61 | grid-template-rows: 500px; 62 | grid-template-columns: 49% 49%; 63 | grid-template-areas: 64 | "image1 image2" 65 | "image3 image4" 66 | "image5 image6" 67 | "image7 image8" 68 | "image9 image10" 69 | "image11 image12" 70 | "image13 image14"; 71 | } 72 | .image1 { 73 | grid-area: image1; 74 | border: 1px solid skyblue; 75 | padding: 10px 10px 10px 10px; 76 | } 77 | 78 | .image2 { 79 | grid-area: image2; 80 | padding: 10px 10px 10px 10px; 81 | border: 1px solid skyblue; 82 | } 83 | .image3 { 84 | grid-area: image3; 85 | padding: 10px 10px 10px 10px; 86 | border: 1px solid skyblue; 87 | } 88 | .image4 { 89 | grid-area: image4; 90 | padding: 10px 10px 10px 10px; 91 | border: 1px solid skyblue; 92 | } 93 | 94 | .image5 { 95 | grid-area: image5; 96 | padding: 10px 10px 10px 10px; 97 | border: 1px solid skyblue; 98 | } 99 | .image6 { 100 | grid-area: image6; 101 | padding: 10px 10px 10px 10px; 102 | border: 1px solid skyblue; 103 | } 104 | .image7 { 105 | grid-area: image7; 106 | padding: 10px 10px 10px 10px; 107 | border: 1px solid skyblue; 108 | } 109 | .image8 { 110 | grid-area: image8; 111 | padding: 10px 10px 10px 10px; 112 | border: 1px solid skyblue; 113 | } 114 | .image9 { 115 | grid-area: image9; 116 | padding: 10px 10px 10px 10px; 117 | border: 1px solid skyblue; 118 | } 119 | .image10 { 120 | grid-area: image10; 121 | padding: 10px 10px 10px 10px; 122 | border: 1px solid skyblue; 123 | } 124 | 125 | .image11 { 126 | grid-area: image11; 127 | padding: 10px 10px 10px 10px; 128 | border: 1px solid skyblue; 129 | } 130 | .image12 { 131 | grid-area: image12; 132 | padding: 10px 10px 10px 10px; 133 | border: 1px solid skyblue; 134 | } 135 | .image13 { 136 | grid-area: image13; 137 | padding: 10px 10px 10px 10px; 138 | border: 1px solid skyblue; 139 | } 140 | .image14 { 141 | grid-area: image14; 142 | padding: 10px 10px 10px 10px; 143 | border: 1px solid skyblue; 144 | } 145 | .image1:hover, 146 | .image2:hover, 147 | .image3:hover, 148 | .image4:hover, 149 | .image5:hover, 150 | .image6:hover, 151 | .image7:hover, 152 | .image8:hover, 153 | .image9:hover, 154 | .image10:hover, 155 | .image11:hover, 156 | .image12:hover, 157 | .image13:hover, 158 | .image14:hover { 159 | outline: none !important; 160 | border: 1.5px solid #0091ae; 161 | box-shadow: 0 0 10px #719ece; 162 | border-radius: 2px; 163 | background-color: #eaf0f6; 164 | } 165 | -------------------------------------------------------------------------------- /managementTeam/pageStyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 98.5vw; 3 | height: 100vh; 4 | margin: 0; 5 | font-family: 'Roboto'; 6 | padding: 0px; 7 | color: #33475b; 8 | } 9 | a { 10 | text-decoration: none; 11 | color: #0091ae; 12 | } 13 | a:hover{ 14 | text-decoration: underline; 15 | color: rgb(0, 122, 140); 16 | } 17 | #navbar { 18 | height: 15%; 19 | width: 100%; 20 | background-image: url('./../imgs/navbar.png'); 21 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 22 | } 23 | #minorNavBar { 24 | width: 100%; 25 | height: 10%; 26 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 27 | background-color: rgb(245, 248, 250); 28 | overflow: hidden; 29 | } 30 | .sticky { 31 | position: fixed; 32 | top: 0.1%; 33 | width: 100%; 34 | } 35 | #minorNavBar > div > div { 36 | float: left; 37 | font-size: 18px; 38 | color: #33475b; 39 | font-weight: bold; 40 | margin-bottom: 0; 41 | } 42 | #minorNavBar > div > div > p { 43 | text-align: center; 44 | } 45 | #minorNavBar > div > div:hover { 46 | background-color: rgb(234, 240, 246); 47 | cursor: pointer; 48 | } 49 | #minorNavBar > div { 50 | margin-left: 8%; 51 | } 52 | #titleDisplay, #subFooter{ 53 | width: 100%; 54 | height: 50%; 55 | margin: 0; 56 | padding-top: 5%; 57 | } 58 | #contentDisplay { 59 | width: 100%; 60 | height: 400%; 61 | background-color: rgb(45, 62, 80); 62 | padding-top: 4%; 63 | padding-bottom: 4%; 64 | } 65 | #subFooter{ 66 | text-align: center; 67 | } 68 | #subFooter > div { 69 | width: 50%; 70 | margin-left: 23%; 71 | margin-top: 2%; 72 | } 73 | #orangeButton { 74 | background-color: #ff7a59; 75 | border : 0; 76 | color :white; 77 | height : 50px; 78 | width : 250px; 79 | font-size: 15px; 80 | font-weight: bolder; 81 | border-radius: 3px; 82 | margin: 5px; 83 | } 84 | #orangeButton:hover{ 85 | opacity: 0.6; 86 | cursor: pointer; 87 | } 88 | #orangeBorderButton { 89 | background-color: white; 90 | border : 1px solid #ff7a59; 91 | border-radius: 3px; 92 | color :#ff7a59; 93 | height : 50px; 94 | margin: 5px; 95 | width : 250px; 96 | font-size: 15px; 97 | font-weight: bolder; 98 | } 99 | #orangeBorderButton:hover{ 100 | cursor: pointer; 101 | } 102 | .photoframe { 103 | background-color: white; 104 | height: 19%; 105 | width: 31.93%; 106 | margin: 0.7%; 107 | margin-bottom: 2%; 108 | float: left; 109 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 110 | } 111 | .container { 112 | position: relative; 113 | width: 99%; 114 | float : left; 115 | margin: 1%; 116 | display: block; 117 | } 118 | 119 | .image { 120 | display: block; 121 | width: 325px; 122 | height: 300px; 123 | padding: 5px; 124 | } 125 | 126 | .overlay { 127 | position: absolute; 128 | top: 1.65%; 129 | bottom: 0; 130 | left: 0.6%; 131 | right: 0; 132 | height: 96%; 133 | width: 97%; 134 | opacity: 0; 135 | transition: .5s ease; 136 | background-color: black; 137 | } 138 | 139 | .container:hover .overlay { 140 | opacity: 0.6; 141 | } 142 | 143 | .text { 144 | color: white; 145 | font-size: 20px; 146 | position: absolute; 147 | top: 50%; 148 | left: 50%; 149 | -webkit-transform: translate(-50%, -50%); 150 | -ms-transform: translate(-50%, -50%); 151 | transform: translate(-50%, -50%); 152 | text-align: center; 153 | } 154 | .material-icons.md-48 { font-size: 100px; } 155 | .aboutLink { 156 | font-size: 25px; 157 | color : white; 158 | } 159 | .aboutLink:hover { 160 | opacity: 1; 161 | cursor: pointer; 162 | font-weight: bold; 163 | text-decoration: none; 164 | } -------------------------------------------------------------------------------- /get_started_page/getstarted.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Get Started Page 8 | 9 | 10 | 11 |
    12 |
    13 |

    Get Started With HubSpot Sales Hub ™

    14 |

    Start with free tools and upgrade as you grow, or hit the ground running with one of our premium editions.

    15 |
    16 |
    17 |
    18 |
    19 |
    Free Tools
    20 |

    Free sales CRM tools for the individual salesperson to connect with more leads and close more deals.

    21 |
    22 |

    Popular Features:

    23 | 33 | 34 |

    No credit card required. Get started in seconds.

    35 |
    36 |
    37 |
    Premium Editions
    38 |

    A full suite of sales CRM tools for your whole team to shorten deal cycles and increase close rates.

    39 |
    40 |

    Popular Features:

    41 |

    Starter (starting at $45/mo.)

    42 | 47 |

    Professional (starting at $450/mo.)

    48 | 53 |

    Enterprise (starting at $1,200/mo.)

    54 | 59 | 60 |

    Or call us at 855-385-7651 to get your questions answered right now.

    61 | 62 |
    63 |
    64 |
    65 |

    For more detailed information on product packaging and the limits that apply, please see our Product and Services Catalog here. Price shown in USD and subject to applicable tax. 66 |

    67 |
    68 | 69 | 73 | 78 | 79 | -------------------------------------------------------------------------------- /contact_sales/meeting_style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body { 5 | font-family: 'Montserrat', sans-serif; 6 | /* text-align: center; */ 7 | color: #33475b; 8 | background-color: #fff; 9 | margin: 0%; 10 | 11 | } 12 | 13 | #meeting-info{ 14 | width: 100%; 15 | height: 80vh; 16 | /* border: 1px solid red; */ 17 | background-color: #385470; 18 | } 19 | #meeting-info>h1{ 20 | font-size: 45px; 21 | font-family: 900; 22 | width: 60%; 23 | margin:auto; 24 | text-align: center; 25 | color: white; 26 | padding-top:100px ; 27 | line-height: 59px; 28 | } 29 | #meeting-info>p{ 30 | font-size: 17px; 31 | font-family: 400; 32 | width: 60%; 33 | margin:auto; 34 | text-align: center; 35 | color: white; 36 | margin-top: 30px; 37 | margin-bottom: 40px; 38 | } 39 | 40 | #meeting-button-2{ 41 | 42 | width: 150px; 43 | height: 50px; 44 | font-size: 15px; 45 | border-radius: 2px; 46 | cursor: pointer; 47 | background-color: #385470; 48 | color: white; 49 | border: 1px solid white; 50 | transition: background-color 0.5s ease; 51 | 52 | outline: none; 53 | font-weight: 700; 54 | } 55 | #meeting-button-2:hover{ 56 | background-color: white; 57 | color: #385470; 58 | } 59 | 60 | #meeting-button-1{ 61 | 62 | width: 250px; 63 | height: 50px; 64 | font-size: 15px; 65 | border-radius: 2px; 66 | cursor: pointer; 67 | background-color: white; 68 | color: #385470; 69 | border: none; 70 | transition: background-color 0.5s ease; 71 | 72 | outline: none; 73 | font-weight: 700; 74 | margin-right: 10px; 75 | } 76 | #meeting-button-1:hover{ 77 | background-color: #82a8c5; 78 | } 79 | 80 | #meeting-info>div{ 81 | width: 35%; 82 | margin: auto; 83 | } 84 | 85 | #call-us-directly{ 86 | width: 100%; 87 | height: 35vh; 88 | /* border: 1px solid red; */ 89 | padding-top: 40px; 90 | background-color: rgba(236, 236, 236, 0.466); 91 | margin-bottom: 50px; 92 | } 93 | #call-us-directly>div{ 94 | width: 80%; 95 | height: 80%; 96 | /* border: 1px solid green; */ 97 | border-radius: 4px; 98 | margin: auto; 99 | display: flex; 100 | 101 | } 102 | #call-us-directly>div>div{ 103 | width: 40%; 104 | /* border: 1px solid black; */ 105 | height: 100%; 106 | 107 | } 108 | #call-us-directly>div>.call-us-directly-orange{ 109 | background: linear-gradient(45deg, #ff7a59, #ff8f59); 110 | width: 60%; 111 | border-radius: 4px; 112 | } 113 | .call-us-option>p{ 114 | font-size: 20px; 115 | font-weight: 500; 116 | padding-top: 45px; 117 | text-align: center; 118 | } 119 | .call-us-option{ 120 | background-color: white; 121 | border-radius: 4px; 122 | } 123 | 124 | 125 | #meeting-footer{ 126 | width: 100%; 127 | height: 30vh; 128 | background-color: #385470; 129 | color: white; 130 | text-align: center; 131 | padding-top: 50px; 132 | } 133 | #meeting-footer>div{ 134 | padding-top: 18px; 135 | 136 | } 137 | #meeting-footer>div a{ 138 | color: rgba(255, 255, 255, 0.664); 139 | text-decoration: none; 140 | font-weight: 700; 141 | margin: 10px; 142 | } 143 | #meeting-footer>div a:hover{ 144 | color: rgba(131, 192, 241, 0.726); 145 | } 146 | 147 | 148 | 149 | /* //////////////////////////////////////////////////////// */ 150 | 151 | 152 | 153 | .modal-content { 154 | background-color: #fefefe; 155 | margin: auto; 156 | padding: 20px; 157 | /* border: 1px solid #888; */ 158 | width: 80%; 159 | 160 | /* overflow: scroll; */ 161 | } 162 | 163 | 164 | #america-calling-nos{ 165 | margin-bottom: 50px; 166 | } 167 | 168 | 169 | .america-calling-nos1{ 170 | display: flex; 171 | margin: 25px; 172 | 173 | } 174 | .america-calling-nos1>div{ 175 | display: grid; 176 | width: 35%; 177 | } 178 | .america-calling-nos1 a{ 179 | color: #009FCB; 180 | font-size: 14px; 181 | margin: 10px; 182 | } 183 | .america-calling-nos1 p{ 184 | font-weight: 500; 185 | } -------------------------------------------------------------------------------- /investorRelations/pageEnhance.css: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration: none; 3 | color: #0091ae; 4 | } 5 | a:hover{ 6 | text-decoration: underline; 7 | color: rgb(0, 122, 140); 8 | } 9 | #orangeButton { 10 | background-color: #ff7a59; 11 | border : 0; 12 | color :white; 13 | height : 50px; 14 | width : 150px; 15 | } 16 | #orangeButton:hover { 17 | opacity: 0.6; 18 | cursor: pointer; 19 | } 20 | body { 21 | width: 98.5vw; 22 | height: 100vh; 23 | margin: 0; 24 | font-family: 'Roboto'; 25 | padding: 0px; 26 | color: #33475b; 27 | } 28 | #navbar { 29 | height: 15%; 30 | width: 100%; 31 | background-image: url('./../imgs/navbar.png'); 32 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 33 | } 34 | #titleDisplay { 35 | width: 100%; 36 | height: 50%; 37 | background-image: url('../imgs/investorRelBgnd.png'); 38 | color: white; 39 | margin: 0; 40 | padding-top: 5%; 41 | } 42 | #minorNavBar { 43 | width: 100%; 44 | height: 10%; 45 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 46 | background-color: rgb(245, 248, 250); 47 | overflow: hidden; 48 | } 49 | .sticky { 50 | position: fixed; 51 | top: 0.1%; 52 | width: 100%; 53 | } 54 | #minorNavBar > div > div { 55 | float: left; 56 | font-size: 18px; 57 | color: #33475b; 58 | font-weight: bold; 59 | margin-bottom: 0; 60 | } 61 | #minorNavBar > div > div > p { 62 | text-align: center; 63 | } 64 | #minorNavBar > div > div:hover { 65 | background-color: rgb(234, 240, 246); 66 | cursor: pointer; 67 | border-bottom: 5px solid rgb(255, 122, 89); 68 | } 69 | #minorNavBar > div { 70 | margin-left: 8%; 71 | } 72 | #stockUpdatesDiv { 73 | width: 100%; 74 | background-color: rgb(245, 248, 250); 75 | height: 30%; 76 | } 77 | .faq { 78 | cursor: pointer; 79 | padding: 18px; 80 | width: 100%; 81 | border: none; 82 | text-align: left; 83 | outline: none; 84 | font-size: 20px; 85 | transition: 0.1s; 86 | width: 50%; 87 | margin-left:25%; 88 | background-color: white; 89 | color: rgb(45, 62, 80); 90 | } 91 | .responsePanel { 92 | padding: 0 18px; 93 | display: none; 94 | background-color: white; 95 | overflow: hidden; 96 | width: 40%; 97 | margin-left:28%; 98 | font-size: 18px; 99 | } 100 | .arrow { 101 | border: solid rgb(0, 164, 189); 102 | border-width: 0 3px 3px 0; 103 | display: inline-block; 104 | padding: 3px; 105 | margin-right: 2%; 106 | } 107 | 108 | .right { 109 | transform: rotate(-45deg); 110 | -webkit-transform: rotate(-45deg); 111 | } 112 | 113 | .down { 114 | transform: rotate(45deg); 115 | -webkit-transform: rotate(45deg); 116 | } 117 | .container { 118 | position: relative; 119 | width: 20%; 120 | float : left; 121 | margin: 1%; 122 | } 123 | 124 | .image { 125 | display: block; 126 | width: 130px; 127 | height: 140px; 128 | border-radius: 5px; 129 | } 130 | 131 | .overlay { 132 | position: absolute; 133 | top: 0; 134 | bottom: 0; 135 | left: 0; 136 | right: 0; 137 | height: 100%; 138 | width: 96%; 139 | opacity: 0; 140 | transition: .5s ease; 141 | background-color: black; 142 | border-radius: 5px; 143 | } 144 | 145 | .container:hover .overlay { 146 | opacity: 0.6; 147 | } 148 | 149 | .text { 150 | color: white; 151 | font-size: 20px; 152 | position: absolute; 153 | top: 50%; 154 | left: 50%; 155 | -webkit-transform: translate(-50%, -50%); 156 | -ms-transform: translate(-50%, -50%); 157 | transform: translate(-50%, -50%); 158 | text-align: center; 159 | } 160 | .cursorShift { 161 | text-decoration : underline; 162 | color : white; 163 | } 164 | .cursorShift:hover{ 165 | cursor: pointer; 166 | } 167 | .modal { 168 | display: none; /* Hidden by default */ 169 | position: fixed; /* Stay in place */ 170 | z-index: 1; /* Sit on top */ 171 | padding-top: 100px; /* Location of the box */ 172 | left: 0; 173 | top: 0; 174 | width: 100%; /* Full width */ 175 | height: 100%; /* Full height */ 176 | overflow: auto; /* Enable scroll if needed */ 177 | background-color: rgb(0,0,0); /* Fallback color */ 178 | background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 179 | } 180 | .modal-content { 181 | background-color: #fefefe; 182 | margin: auto; 183 | padding: 20px; 184 | border: 1px solid #888; 185 | width: 80%; 186 | } 187 | .close { 188 | color: #aaaaaa; 189 | float: right; 190 | font-size: 28px; 191 | font-weight: bold; 192 | } 193 | 194 | .close:hover, 195 | .close:focus { 196 | color: #000; 197 | text-decoration: none; 198 | cursor: pointer; 199 | } 200 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function getStarted() { 2 | window.open("./get_started_page/getstarted.html") 3 | } 4 | 5 | // NAV-BAR 6 | 7 | 8 | 9 | var softMenu = document.getElementById("software-nav");//proMenu--softMenu 10 | var resMenu = document.getElementById("res-nav"); 11 | var softMenu1 = document.getElementById("software-nav-1"); 12 | var softMenu2 = document.getElementById("software-nav-2"); 13 | 14 | var resMenu1 = document.getElementById("res-nav-1"); 15 | var resMenu2 = document.getElementById("res-nav-2"); 16 | 17 | 18 | 19 | 20 | var proMenuShow = true; 21 | var soft = document.getElementById("software");//pro 22 | var res = document.getElementById("res");//sol 23 | var price = document.getElementById("price");//ent 24 | var signUpBtn = document.querySelector("nav > ul > li > button"); 25 | function showMenu(event) { 26 | resMenu.style.display = "none"; 27 | res.style.color = "rgb(65, 64, 64)"; 28 | var oldI = res.querySelector("i"); 29 | oldI.style.transform = ""; 30 | oldI.style.transition = ".2s"; 31 | var i = event.target.querySelector("i"); 32 | // i.style.transform = "rotate(0.5turn)"; 33 | i.style.transition = "1s"; 34 | // event.target.style.color = "none"; 35 | softMenu.style.display = "flex"; 36 | // softMenu.style.border = "1px solid rgb(229, 236, 245)"; 37 | softMenu1.style.display = "grid"; 38 | softMenu2.style.display = "grid"; 39 | 40 | } 41 | function hideMenu(event) { 42 | var i = soft.querySelector("i"); 43 | i.style.transform = ""; 44 | i.style.transition = "1s"; 45 | 46 | softMenu.style.display = "none"; 47 | soft.style.color = "rgb(65, 64, 64)"; 48 | 49 | } 50 | function hideSolMenu(event) { 51 | var i = res.querySelector("i"); 52 | i.style.transform = ""; 53 | i.style.transition = "1s"; 54 | resMenu.style.display = "none"; 55 | res.style.color = "rgb(65, 64, 64)"; 56 | } 57 | function showSolMenu() { 58 | softMenu.style.display = "none"; 59 | soft.style.color = "rgb(65, 64, 64)"; 60 | var oldI = soft.querySelector("i"); 61 | oldI.style.transform = ""; 62 | oldI.style.transition = "1s"; 63 | var i = event.target.querySelector("i"); 64 | // i.style.transform = "rotate(0.5turn)"; 65 | i.style.transition = "1s"; 66 | event.target.style.color = "none"; 67 | resMenu.style.display = "flex"; 68 | resMenu1.style.display = "grid"; 69 | resMenu2.style.display = "grid"; 70 | } 71 | function hideAllMenu() { 72 | resMenu.style.display = "none"; 73 | res.style.color = "rgb(65, 64, 64)"; 74 | var oldI = res.querySelector("i"); 75 | oldI.style.transform = ""; 76 | oldI.style.transition = "1s"; 77 | } 78 | function goToSignUp() { 79 | window.location.href = "#"; 80 | } 81 | 82 | 83 | 84 | soft.addEventListener("mouseenter", showMenu); 85 | softMenu.addEventListener("mouseleave", hideMenu); 86 | res.addEventListener("mouseenter", showSolMenu); 87 | resMenu.addEventListener("mouseleave", hideSolMenu); 88 | price.addEventListener("mouseenter", hideAllMenu); 89 | 90 | signUpBtn.addEventListener("click", goToSignUp); 91 | 92 | 93 | ///////////////////////////////////////////////////////////// 94 | 95 | var aboutUsMenu = document.getElementById("aboutUs-option-nav"); 96 | 97 | var aboutUs = document.getElementById("top-nav-about-Us"); 98 | 99 | function showAboutUs(event) { 100 | // resMenu.style.display = "none"; 101 | // aboutUs.style.color = "rgb(65, 64, 64)"; 102 | var oldI = res.querySelector("i"); 103 | oldI.style.transform = ""; 104 | oldI.style.transition = ".5s"; 105 | var i = event.target.querySelector("i"); 106 | i.style.transform = "rotate(0.5turn)"; 107 | i.style.transition = ".5s"; 108 | // event.target.style.color = "none"; 109 | aboutUsMenu.style.display = "grid"; 110 | 111 | // aboutUsMenu.style.border = "1px solid red"; 112 | 113 | 114 | } 115 | 116 | function hideaboutUs(event) { 117 | var i = aboutUs.querySelector("i"); 118 | i.style.transform = ""; 119 | i.style.transition = "0.5s"; 120 | 121 | aboutUsMenu.style.display = "none"; 122 | // aboutUs.style.color = "rgb(65, 64, 64)"; 123 | 124 | } 125 | 126 | aboutUs.addEventListener("mouseenter", showAboutUs); 127 | aboutUsMenu.addEventListener("mouseleave", hideaboutUs); 128 | 129 | ///////////////////////////////////////// 130 | 131 | var lang_opts_Menu = document.getElementById("Language-option-nav"); 132 | 133 | var lang_opts = document.getElementById("top-nav-language-option"); 134 | 135 | 136 | 137 | function showLangopts(event) { 138 | // resMenu.style.display = "none"; 139 | // lang_opts.style.color = "rgb(65, 64, 64)"; 140 | var oldI = res.querySelector("i"); 141 | oldI.style.transform = ""; 142 | oldI.style.transition = ".5s"; 143 | var i = event.target.querySelector("i"); 144 | // i.style.transform = "rotate(0.5turn)"; 145 | // i.style.transition = ".5s"; 146 | // event.target.style.color = "none"; 147 | lang_opts_Menu.style.display = "grid"; 148 | 149 | // aboutUsMenu.style.border = "1px solid red"; 150 | 151 | 152 | } 153 | 154 | function hideLangopts(event) { 155 | var i = lang_opts.querySelector("i"); 156 | i.style.transform = ""; 157 | i.style.transition = "0.5s"; 158 | 159 | lang_opts_Menu.style.display = "none"; 160 | // lang_opts.style.color = "rgb(65, 64, 64)"; 161 | 162 | } 163 | 164 | lang_opts.addEventListener("mouseenter", showLangopts); 165 | lang_opts_Menu.addEventListener("mouseleave", hideLangopts); -------------------------------------------------------------------------------- /managementTeam/management.js: -------------------------------------------------------------------------------- 1 | import * as data from './dataSet.js'; 2 | 3 | var minorNavbar = document.getElementById("minorNavBar"); 4 | var setAndUnsetStickyNavbar = () => { 5 | if (window.pageYOffset >= minorNavbar.offsetTop) { 6 | minorNavbar.classList.add("sticky") 7 | } else { 8 | minorNavbar.classList.remove("sticky"); 9 | } 10 | } 11 | 12 | window.onscroll = function() {setAndUnsetStickyNavbar()} 13 | 14 | let defineManagementTeam = () => { 15 | console.log('Management Team'); 16 | document.getElementById('titleDisplay').innerHTML = `

    ${data.contentDisplay[0][0]}

    17 |

    ${data.contentDisplay[0][1]}

    `; 18 | document.getElementById('contentDisplay').innerHTML = `
    `; 19 | for(let i = 0; i < data.managementTeamMembers.length; i++) { 20 | let paraId = i; 21 | document.getElementById('photoBox').innerHTML += `
    22 |
    23 | ${data.managementTeamMembers[i].name} 24 |
    25 |

    27 | person 28 |

    ABOUT

    29 |

    30 |
    31 |
    32 |

    ${data.managementTeamMembers[i].name}
    33 |
    ${data.managementTeamMembers[i].role}

    34 |
    `; 35 | } 36 | } 37 | let makeAdvisoryBoard = () => { 38 | console.log('Advisory Board'); 39 | document.getElementById('titleDisplay').innerHTML = `

    ${data.contentDisplay[2][0]}

    40 |

    ${data.contentDisplay[2][1]}

    `; 41 | document.getElementById('contentDisplay').innerHTML = `
    `; 42 | for(let i = 0; i < data.advisoryBoardMembers.length; i++) { 43 | let paraId = i; 44 | document.getElementById('photoBox').innerHTML += `
    45 |
    46 | ${data.advisoryBoardMembers[i].name} 47 |
    48 |

    50 | person 51 |

    ABOUT

    52 |

    53 |
    54 |
    55 |

    ${data.managementTeamMembers[i].name}
    56 |
    ${data.advisoryBoardMembers[i].role}

    57 |
    `; 58 | } 59 | } 60 | let makeDirectorBoard = () => { 61 | console.log('Director Board'); 62 | document.getElementById('titleDisplay').innerHTML = `

    ${data.contentDisplay[1][0]}

    63 |

    ${data.contentDisplay[1][1]}

    `; 64 | document.getElementById('contentDisplay').innerHTML = `
    `; 65 | for(let i = 0; i < data.boardOfDirectorsMembers.length; i++) { 66 | let paraId = i; 67 | document.getElementById('photoBox').innerHTML += `
    68 |
    69 | ${data.boardOfDirectorsMembers[i].name} 70 |
    71 |

    73 | person 74 |

    ABOUT

    75 |

    76 |
    77 |
    78 |

    ${data.managementTeamMembers[i].name}
    79 |
    ${data.boardOfDirectorsMembers[i].role}

    80 |
    `; 81 | } 82 | } 83 | document.getElementById('management').addEventListener("click", defineManagementTeam); 84 | document.getElementById('advisoryBoard').addEventListener("click", makeAdvisoryBoard); 85 | document.getElementById('directorBoard').addEventListener("click", makeDirectorBoard); 86 | window.onload = defineManagementTeam(); 87 | 88 | 89 | //Adding contents from another HTML file to my page 90 | function includefooterHTML() { 91 | var z, i, elmnt, file, xhttp; 92 | z = document.getElementsByTagName("*"); 93 | for (i = 0; i < z.length; i++) { 94 | elmnt = z[i]; 95 | file = elmnt.getAttribute("footer-include-html"); 96 | if (file) { 97 | xhttp = new XMLHttpRequest(); 98 | xhttp.onreadystatechange = function() { 99 | if (this.readyState == 4) { 100 | if (this.status == 200) {elmnt.innerHTML = this.responseText;} 101 | if (this.status == 404) {elmnt.innerHTML = "Page not found.";} 102 | elmnt.removeAttribute("w3-include-html"); 103 | includeHTML(); 104 | } 105 | } 106 | xhttp.open("GET", file, true); 107 | xhttp.send(); 108 | return; 109 | } 110 | } 111 | } 112 | includefooterHTML(); 113 | -------------------------------------------------------------------------------- /login_page/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dashboard 8 | 9 | 10 | 11 |
    12 |

    Dashboard Library

    13 | image 14 |
    15 | 16 |
    17 |
    18 | 19 | 20 | 21 | 22 | 23 |
    24 |
    25 |
    26 | Chat Overview 27 |

    Chart Overview

    28 |

    Start with a dashboard of 6 reports that give an overview on the kind of requests your team receives over chat.

    29 |
    30 |
    31 | Email Overview 32 |

    Email Overview

    33 |

    Start with a dashboard of 5 reports that give an overview on the kind of requests your team receives over email.

    34 |
    35 |
    36 | Lead Generation 37 |

    Lead Generation

    38 |

    Start with a dashboard of 8 reports to understand the overall volume, quality, and sources of your new leads.

    39 |
    40 |
    41 | Marketing Channel Performance 42 |

    Marketing Channel Performance

    43 |

    Start with a dashboard of 10 reports that focus on monitoring key metrics for your core marketing channels, from landing pages to social media.

    44 |
    45 |
    46 | Marketing 47 |

    Marketing

    48 |

    Start with a dashboard of 9 reports that focus on your website performance. Also performance and contact activity.

    49 |
    50 |
    51 | Sales Manager 52 |

    Sales Manager

    53 |

    Start with a dashboard of 8 reports that focus on your sales team's performance.

    54 |
    55 |
    56 | Sales Opportunity Review 57 |

    Sales Opportunity Review

    58 |

    Start with a dashboard of 9 reports that focus on the overall performance of your sales for the month. 59 |

    60 |
    61 |
    62 | Sales Rep 63 |

    Sales Rep

    64 |

    Start with a dashboard of 6 reports that focus on your monthly performance. 65 |

    66 |
    67 |
    68 | Sales 69 |

    Sales

    70 |

    Start with a dashboard of 5 reports that focus on your deals and sales. Track your team's activities, with prospects but also in their deals. 71 |

    72 |
    73 |
    74 | Service Performance Over Time 75 |

    Service Performance Over Time

    76 |

    Start with a dashboard of 8 reports that help to see how your support team is changing over time.

    77 |
    78 |
    79 | Service Team Performance 80 |

    Service Team Performance

    81 |

    Start with a dashboard of 6 reports that help to track how your service team is performing. 82 |

    83 |
    84 |
    85 | Web Analytics 86 |

    Web Analytics

    87 |

    Start with a dashboard of 8 reports that focus on website sessions. See how many visitors are visiting your website, new and returning. See how these visitors are finding your website. 88 |

    89 |
    90 |
    91 | Website Visits & Engagements 92 |

    Website Visits & Engagement

    93 |

    Start with a dashboard of 8 reports that focus on quality of visits and engagements to your website.

    94 |
    95 |
    96 | Service Hub Overview 97 |

    Service Hub Overview

    98 |

    Start with a dashboard of 8 reports that give an overview on the kind of support requests your team receives.

    99 |
    100 | 101 |
    102 |
    103 | 104 | 107 | 108 | -------------------------------------------------------------------------------- /footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Footer 8 | 9 | 10 | 11 | 12 | 183 | 184 | 185 | 186 | 308 | 309 | 310 | 313 | 314 | -------------------------------------------------------------------------------- /contact_sales/contact_sales_style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body { 5 | font-family: 'Montserrat', sans-serif; 6 | /* text-align: center; */ 7 | color: #33475b; 8 | background-color: #fff; 9 | margin: 0%; 10 | 11 | } 12 | 13 | #contact-sales-top-bar{ 14 | width: 100%; 15 | height: 60px; 16 | /* border: 1px solid red; */ 17 | background-color: #fff; 18 | display: flex; 19 | margin-bottom: 0; 20 | 21 | } 22 | #contact-sales-top-bar>div{ 23 | padding-left: 10%; 24 | padding-top: 10px; 25 | width: 30%; 26 | } 27 | #contact-sales-top-bar>div>img{ 28 | width: 40%; 29 | } 30 | #contact-sales-top-bar>.contact-sales-space{ 31 | width: 47%; 32 | } 33 | li{ 34 | list-style: none; 35 | } 36 | a{ 37 | text-decoration: none; 38 | color: #33475b; 39 | } 40 | #contact-us-about-soft{ 41 | width: 100%; 42 | height: 110vh; 43 | background-image: url("https://f.hubspotusercontent00.net/hubfs/53/assets/hubspot.com/contact-sales/Hubspot-Santa-Cruz-web-6@2x-compressor-2-1.png"); 44 | background-size: 48%; 45 | background-repeat: no-repeat; 46 | background-position: right 0; 47 | margin-top: 0; 48 | padding-top: 0; 49 | 50 | } 51 | #contact-us-about-soft>.contact-us-about-soft-left{ 52 | width: 40%; 53 | padding-top: 8%; 54 | margin-left: 10%; 55 | } 56 | #contact-us-about-soft>div>h1{ 57 | font-weight: 700; 58 | font-size: 45px; 59 | } 60 | #contact-us-about-soft>div>p{ 61 | font-size: 13px; 62 | line-height: 23px; 63 | margin-bottom: 40px; 64 | } 65 | 66 | #contact-sales-3boxes{ 67 | display: flex; 68 | justify-content: center; 69 | } 70 | 71 | #contact-sales-3boxes div{ 72 | width: 25%; 73 | height: 300px; 74 | /* border: 1px solid red; */ 75 | margin: 10px; 76 | background-color: rgb(240, 255, 254); 77 | } 78 | 79 | #contact-boxes>img{ 80 | width: 40px; 81 | margin: auto; 82 | } 83 | .contact-box1,.contact-box2,.contact-box3{ 84 | display: grid; 85 | justify-content: center; 86 | text-align: center; 87 | } 88 | #contact-sales-btn1{ 89 | 90 | width: 150px; 91 | height: 33px; 92 | font-size: 15px; 93 | border-radius: 4px; 94 | cursor: pointer; 95 | background-color: #ff7a59; 96 | color: white; 97 | border: none; 98 | transition: background-color 0.5s ease; 99 | margin-left: 20%; 100 | outline: none; 101 | } 102 | #contact-sales-btn1:hover{ 103 | background-color: #ff7a5979 104 | } 105 | #contact-sales-btn2{ 106 | 107 | width: 200px; 108 | height: 33px; 109 | font-size: 15px; 110 | border-radius: 4px; 111 | cursor: pointer; 112 | background-color: #ff7a59; 113 | color: white; 114 | border: none; 115 | transition: background-color 0.5s ease; 116 | 117 | outline: none; 118 | } 119 | #contact-sales-btn2:hover{ 120 | background-color: #ff7a5979 121 | } 122 | #contact-boxes>p{ 123 | font-size: 20px; 124 | font-weight: 600; 125 | } 126 | #contact-boxes>.second-para{ 127 | font-size: 12px; 128 | font-weight: 400; 129 | } 130 | .contact-box1>p{ 131 | margin-bottom: 0; 132 | } 133 | .contact-box1>a{ 134 | font-size: 20px; 135 | font-weight: 500; 136 | } 137 | 138 | /* Book a Metting */ 139 | 140 | 141 | 142 | 143 | /* .request-demo-form { 144 | display: grid; 145 | gap: 20px; 146 | grid-template-columns: repeat(2, 40%); 147 | justify-content: center; 148 | } */ 149 | 150 | 151 | 152 | .form-h1-p{ 153 | width: 80%; 154 | margin: auto; 155 | text-align: center; 156 | padding-top: 50px; 157 | } 158 | .form-h1-p>p{ 159 | font-size: 13px; 160 | letter-spacing: 0.6px; 161 | line-height: 22px; 162 | font-weight: 400; 163 | } 164 | .meeting-form-p2{ 165 | width: 80%; 166 | margin: auto; 167 | text-align: left; 168 | padding-top: 20px; 169 | } 170 | .meeting-form-p2>p{ 171 | font-size: 13px; 172 | letter-spacing: 0.6px; 173 | line-height: 25px; 174 | font-weight: 500; 175 | } 176 | 177 | 178 | .required-star::after { 179 | content: " *"; 180 | color: red; 181 | } 182 | 183 | .meeting-form-btn3{ 184 | width: 20%; 185 | margin: auto; 186 | padding-bottom: 30px; 187 | } 188 | #contact-sales-btn3{ 189 | 190 | width: 130px; 191 | height: 38px; 192 | font-size: 15px; 193 | border-radius: 4px; 194 | cursor: pointer; 195 | background-color: #ff7a59; 196 | color: white; 197 | border: none; 198 | transition: background-color 0.5s ease; 199 | 200 | outline: none; 201 | } 202 | #contact-sales-btn3:hover{ 203 | background-color: #ff7a5979 204 | } 205 | 206 | 207 | #book-meeting-cont{ 208 | width: 100%; 209 | /* border: 1px solid red; */ 210 | margin-bottom: 50px; 211 | 212 | } 213 | .book-meating-box{ 214 | width: 50%; 215 | margin: auto; 216 | /* height: 100vh; */ 217 | /* border: 1px solid green; */ 218 | box-shadow: 0px 0px 15px 10px rgb(179 179 179 / 14%); 219 | } 220 | 221 | .book-meating-box>form{ 222 | display: grid; 223 | gap: 20px; 224 | grid-template-columns: repeat(2, 40%); 225 | justify-content: center; 226 | } 227 | 228 | #first-nam,#last-nam,#mail-id,#phone-no,#company-nam,#website-url,#employee-size,#country_dropdown,#feedback{ 229 | display: block; 230 | margin-top: 10px; 231 | background-color: rgba(240, 240, 240, 0.568); 232 | } 233 | #first-nam,#last-nam,#mail-id,#phone-no,#company-nam,#website-url{ 234 | width: 85%; 235 | padding: 8px; 236 | border-radius: 5px; 237 | border: 1px solid #8b8b8bbd; 238 | font-size: 15px; 239 | } 240 | 241 | #employee-size,#country_dropdown,#feedback{ 242 | width: 84.5%; 243 | padding: 8px; 244 | border-radius: 5px; 245 | border: 1px solid #8b8b8bbd; 246 | font-size: 15px; 247 | margin-bottom: 10px; 248 | } 249 | .book-meating-box>.last-three-input-in-meeting{ 250 | margin-left: 9%; 251 | 252 | } 253 | 254 | 255 | 256 | 257 | #meeting-footer{ 258 | width: 100%; 259 | height: 30vh; 260 | background-color: #385470; 261 | color: white; 262 | text-align: center; 263 | padding-top: 50px; 264 | } 265 | #meeting-footer>div{ 266 | padding-top: 18px; 267 | 268 | } 269 | #meeting-footer>div a{ 270 | color: rgba(255, 255, 255, 0.664); 271 | text-decoration: none; 272 | font-weight: 700; 273 | margin: 10px; 274 | } 275 | #meeting-footer>div a:hover{ 276 | color: rgba(131, 192, 241, 0.726); 277 | 278 | } 279 | 280 | 281 | /* Image of chatbot */ 282 | 283 | 284 | .contact-sales-chatbot-header{ 285 | width: 100%; 286 | height: 18vh; 287 | background-color: #F5F8FA; 288 | /* border: 1px solid red; */ 289 | text-align: center; 290 | padding-top: 50px; 291 | 292 | } 293 | 294 | 295 | /* Method Boxing for Calling opt Nav */ 296 | 297 | 298 | 299 | .modal { 300 | display: none; 301 | position: fixed; 302 | z-index: 1; 303 | padding-top: 100px; 304 | left: 0; 305 | top: 0; 306 | width: 100%; 307 | height: 100%; 308 | overflow: auto; 309 | background-color: rgb(0,0,0); 310 | background-color: #384f66b0 311 | } 312 | 313 | 314 | .modal-content { 315 | background-color: #fefefe; 316 | margin: auto; 317 | padding: 20px; 318 | border: 1px solid #888; 319 | width: 80%; 320 | height: 500px; 321 | overflow: scroll; 322 | } 323 | 324 | 325 | .close { 326 | color: #aaaaaa; 327 | float: right; 328 | font-size: 28px; 329 | font-weight: bold; 330 | } 331 | 332 | .close:hover, 333 | .close:focus { 334 | color: #000; 335 | text-decoration: none; 336 | cursor: pointer; 337 | } 338 | 339 | #america-calling-nos{ 340 | margin-bottom: 50px; 341 | } 342 | 343 | 344 | .america-calling-nos1{ 345 | display: flex; 346 | margin: 25px; 347 | 348 | } 349 | .america-calling-nos1>div{ 350 | display: grid; 351 | width: 35%; 352 | } 353 | .america-calling-nos1 a{ 354 | color: #009FCB; 355 | font-size: 14px; 356 | margin: 10px; 357 | } 358 | .america-calling-nos1 p{ 359 | font-weight: 500; 360 | } 361 | -------------------------------------------------------------------------------- /investorRelations/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Footer 8 | 9 | 10 | 11 | 12 | 183 | 184 | 185 | 186 | 308 | 309 | 310 | 313 | 314 | -------------------------------------------------------------------------------- /managementTeam/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Footer 8 | 9 | 10 | 11 | 12 | 183 | 184 | 185 | 186 | 308 | 309 | 310 | 313 | 314 | -------------------------------------------------------------------------------- /contact_sales/meeting_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | Get in touch 15 | 16 | 17 | 18 | 19 | 20 |
    21 |

    Thanks for your patience. We couldn't find a meeting slot for you right now.

    22 |

    Call or chat with us to get what you need immediately.

    23 |
    24 | 25 | 26 |
    27 |
    28 | 29 | 30 |
    31 | chatbot 32 |
    33 | 34 |
    35 |
    36 | 37 |
    38 |
    39 |

    Call us directly at +1 844 758 6557

    40 |
    41 | 42 |
    43 | 44 |
    45 | 46 | 47 | 48 | 49 | 50 | 267 | 268 | 269 | 270 | 277 | 278 | 279 | 280 | 281 | -------------------------------------------------------------------------------- /investorRelations/data.js: -------------------------------------------------------------------------------- 1 | export var titleAndContent = { 2 | investorOverview : ["Investor Relations", 3 | "HubSpot's mission is to help millions of organizations grow better. Over 103,000 customers in more than 120 countries use HubSpot's software, services, and support to transform the way they attract, engage, and delight customers."], 4 | news : ["INVESTOR RELATIONS", "News & Press Releases"], 5 | eventsAndPresentations : ["INVESTOR RELATIONS", "Events & Presentations"], 6 | leadershipAndGovernance : ["INVESTOR RELATIONS", "Leadership & Governance"], 7 | faq : ["INVESTOR RELATIONS", "Frequently Asked Questions"] 8 | } 9 | 10 | export var secFillingUpdateContents = [ 11 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 18 2021", "14723992"], 12 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 18 2021", "14723833"], 13 | ["S-8", "Securities Registration: Employee Benefit Plan", "FEB 16 2021", "14715373"], 14 | ["10-K", "Annual Report", "FEB 16 2021", "14714732"], 15 | ["SC 13G", "Statement of Ownership", "FEB 16 2021", "14711025"], 16 | ["5", "Annual Statement of Changes in Beneficial Ownership", "FEB 12 2021", "14705433"], 17 | ["5", "Annual Statement of Changes in Beneficial Ownership", "FEB 12 2021", "14705392"], 18 | ["8-K", "Current report filing", "FEB 11 2021", "14696908"], 19 | ["SC 13G/A", "Amended Statement of Ownership", "FEB 10 2021", "14688942"], 20 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 09 2021", "14685191"], 21 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 08 2021", "14682256"], 22 | ["SC 13G", "Statement of Ownership", "FEB 05 2021", "14673915"], 23 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 03 2021", "14669410"], 24 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 03 2021", "14669407"], 25 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 03 2021", "14669403"], 26 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 03 2021", "14669394"], 27 | ["4", "Statement of Changes in Beneficial Ownership", "FEB 03 2021", "14669377"], 28 | ["4", "Statement of Changes in Beneficial Ownership", "JAN 21 2021", "14630967"], 29 | ["4", "Statement of Changes in Beneficial Ownership", "JAN 19 2021" ,"14624936"], 30 | ["4","Statement of Changes in Beneficial Ownership", "JAN 13 2021", "14617216"], 31 | ["3", "Initial Statement of Beneficial Ownership", "JAN 13 2021", "14617206"] 32 | ] 33 | export var faqs = [ 34 | ["What does HubSpot do?", 35 | "HubSpot's mission is to help millions of organizations grow better. We offer a customer relationship management (CRM) platform that provides software and support for scaling companies. The platform includes marketing, sales, service, and website management products that start free and scale to meet our customers’ needs at any stage of growth."], 36 | ["On what stock exchange are HUbSpot shares traded and what is the ticker symbol?", 37 | "The HubSpot ticker is HUBS and its common stock is traded on the New York Stock Exchange." 38 | ], 39 | ["When HubSpot's Initial Public Offering?", 40 | "Our initial public offering occurred on October 9, 2014."], 41 | ["Where is HubSpot's corporate headquarters?", 42 | "HubSpot, Inc.
    25 First Street
    Cambridge, MA 02141"], 43 | ["When does HubSpot's fiscal year end?", "Our fiscal year ends on December 31st"], 44 | ["Who are the company's independent registered public accountants?", 45 | "Our independent registered public accounting firm is PricewaterhouseCoopers LLP."], 46 | ["Does HubSpot pay dividends?", 47 | "No. We do not currently pay dividends."], 48 | ["Does HubSpot have a direct stock purchase plan?", 49 | "No. We do not currently have a direct stock purchase plan."], 50 | ["Where can I find all of the HubSpot's SEC filings? Where can I download and view quarterly and annual reports?", 51 | "Quarterly and annual reports, as well as other SEC filings, can be accessed on the Investor Overview page of our Investor Relations website or directly from the SEC at www.sec.gov."], 52 | ["Who is HubSpot's transfer agent?", 53 | "Our transfer agent is Computershare.
    You can manage your account online via Computershares secure Web-based shareholder tool at www.computershare.com/investor."], 54 | ["Does HubSpot report on its sustainability efforts and practices?", 55 | "Yes – you can learn more about our commitments to environmental, social, and governance sustainability at https://www.hubspot.com/sustainability. "], 56 | ["How do I contact Investor Relations with a question or request?", 57 | "You can contact HubSpot Investor Relations via email at: investors@hubspot.com."] 58 | ] 59 | 60 | export var newsHeaderDateAndRedirectLink = [ 61 | ["HubSpot's CEO Brian Halligan Injured in Accident; Expected to Make a Full and Complete Recovery", 62 | "March 1, 2021", 63 | "https://ir.hubspot.com/news/hubspots-ceo-brian-halligan-injured-in-accident-expected-to-make-a-full-and-complete-recovery"], 64 | ["HubSpot to Present at the Morgan Stanley Technology Conference", 65 | "February 24, 2021", 66 | "https://ir.hubspot.com/news/hubspot-to-present-at-the-morgan-stanley-technology-conference?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10"], 67 | ["HubSpot’s Statement Regarding Unauthorized iClick Press Release", "February 23, 2021", 68 | "https://ir.hubspot.com/news/hubspots-statement-regarding-unauthorized-iclick-press-release?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10" 69 | ], 70 | ["HubSpot Announces $20 Million Commitment to Social Impact Investing", "February 16, 2021", 71 | "https://ir.hubspot.com/news/hubspot-announces-20-million-commitment-to-social-impact-investing?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10"], 72 | ["HubSpot Signs Agreement to Acquire The Hustle, Adding Content to Help Scaling Companies Grow Better", 73 | "February 16, 2021", 74 | "https://ir.hubspot.com/news/hubspot-signs-agreement-to-acquire-the-hustle-adding-content-to-help-scaling-companies-grow-better?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10" 75 | ], 76 | ["HubSpot Surpasses 100,000 Customers and $1 Billion in Annual Recurring Revenue, Celebrates the Companies Using its CRM Platform to Scale", 77 | "February 16, 2021", 78 | "https://ir.hubspot.com/news/hubspot-surpasses-100000-customers-and-1-billion-in-annual-recurring-revenue?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10" 79 | ], 80 | ["HubSpot Reports Q4 and Full Year 2020 Results", 81 | "February 11, 2021", 82 | "https://ir.hubspot.com/news/hubspot-reports-q4-and-full-year-2020-results?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10" 83 | ], 84 | ["HubSpot Announces Date of Fourth Quarter and Full Year 2020 Financial Results Release", 85 | "January 28, 2021", 86 | "https://ir.hubspot.com/news/hubspot-announces-date-of-fourth-quarter-and-full-year-2020-financial-results-release?_conv_v=vi%3A1*sc%3A19*cs%3A1615507965*fs%3A1615266828*pv%3A126*seg%3A%7B10031564.1%7D*exp%3A%7B%7D*ps%3A1615505597&_conv_s=si%3A19*sh%3A1615507965088-0.8164349457319278*pv%3A10" 87 | ] 88 | ] 89 | 90 | export var leadershipTeam = [ 91 | { 92 | name:"Brian Halligan", 93 | position : "CEO, Co-Founder", 94 | imageUrl :"https://ir.hubspot.com/hubfs/Halligan-Crains-square.jpg", 95 | bio : "Brian Halligan is co-founder and CEO of HubSpot. Prior to HubSpot, Brian was a Venture Partner at Longworth Ventures and VP of Sales at Groove Networks, which was acquired by Microsoft. Previously, Brian was a Senior VP of Sales at PTC." 96 | }, 97 | { 98 | name :"Dharmesh Shah", 99 | position:"CTO, Co-Founder", 100 | imageUrl:"https://ir.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", 101 | bio :"Dharmesh Shah is co-founder and CTO of HubSpot. Prior to founding HubSpot in 2006, Dharmesh was founder and CEO of Pyramid Digital Solutions, which was acquired by SunGard Data Systems in 2005." 102 | }, 103 | { 104 | name :"Yamini Rangan", 105 | position:" Chief Customer Officer", 106 | imageUrl:"https://ir.hubspot.com/hubfs/Yamini%20Rangan%20headshot%20edited.png", 107 | bio :"Yamini Rangan is Chief Customer Officer at HubSpot, overseeing the marketing, sales, and services teams. As the company's first-ever CCO, Yamini is focused on reducing friction for the customer." 108 | }, 109 | { 110 | name :"Kipp Bodnar", 111 | position:" Chief Marketing Officer", 112 | imageUrl:"https://ir.hubspot.com/hs-fs/hubfs/Kipp-Bodnar-HubSpot.jpg?t=1542378803334&width=1800&name=Kipp-Bodnar-HubSpot.jpg", 113 | bio :"Kipp Bodnar is the Chief Marketing Officer of HubSpot, where he sets HubSpot’s global inbound marketing strategy to drive awareness and demand for HubSpot’s inbound marketing and sales products." 114 | }, 115 | { 116 | name :"Kate Bueker", 117 | position:"Chief Financial Officer", 118 | imageUrl:"https://ir.hubspot.com/hs-fs/hubfs/KB%20pic%202%20.png?t=1542042322334&width=2400&name=KB%20pic%202%20.png", 119 | bio :"Kate Bueker is the Chief Financial Officer at HubSpot, where she manages the company's finances, and is also the co-executive sponsor of the Women@HubSpot employee resource group." 120 | }, 121 | { 122 | name :"Katie Burke", 123 | position:" Chief People Officer", 124 | imageUrl:"https://ir.hubspot.com/hs-fs/hubfs/KatieBurke-3.jpg?t=1542378923349&width=904&name=KatieBurke-3.jpg", 125 | bio :"Katie Burke is the Chief People Officer at HubSpot where she manages the teams responsible for delivering a remarkable and inclusive candidate and employee experience. During her time leading people initiatives at HubSpot, the company has been named the #1 Best Place to Work by Glassdoor, the #1 Best Place to Work for Women by Comparably, and a Best Place to Work for Parents by Fortune. " 126 | }, 127 | { 128 | name :"Brad Coffey", 129 | position:"Chief Strategy Officer", 130 | imageUrl:"https://ir.hubspot.com/hs-fs/hub/53/file-740520305-jpg/assets/hubspot.com/about/management/Headshot_Brad.jpg?t=1542378554919&width=675&name=Headshot_Brad.jpg", 131 | bio :"Brad Coffey is the Chief Strategy Officer at HubSpot. In the role, Brad directs the long-term strategy around HubSpot's products, packaging and pricing. Brad additionally leads HubSpot's efforts on strategic partnerships, investments, and acquisitions. Prior to his role as Chief Strategy Officer, Brad was VP of Product at HubSpot." 132 | }, 133 | { 134 | name :"Alison Elworthy", 135 | position:" Executive VP, Revenue Operations", 136 | imageUrl:"https://ir.hubspot.com/hs-fs/hub/53/file-1402687917-jpg/AlisonElworthy-809462-edited.jpg?t=1542378710132&width=3416&name=AlisonElworthy-809462-edited.jpg", 137 | bio :"Alison Elworthy is the Executive VP of Revenue Operations at HubSpot, where she leads a unified team of operations professionals, dedicated to designing strategies, systems, and processes that power HubSpot as it scales. Alison believes that operations teams hold the key to breaking linear growth and achieving sustainable scale — and she's passionate about helping companies realize that vision." 138 | }, 139 | { 140 | name :"John Kelleher", 141 | position:" General Counsel", 142 | imageUrl:"https://ir.hubspot.com/hs-fs/hub/53/file-735311228-jpg/assets/hubspot.com/about/management/Headshot_Kelleher.jpg?t=1542378434416&width=675&name=Headshot_Kelleher.jpg", 143 | bio :"John Kelleher is the General Counsel at HubSpot, where he serves as HubSpot’s first in-house lawyer and manages legal, IP, and corporate compliance." 144 | }, 145 | { 146 | name :"Andrew Lindsay", 147 | position:"Senior VP, Corporate Development & Business Development", 148 | imageUrl:"https://ir.hubspot.com/hubfs/Andrew%20Lindsay%202.jpg", 149 | bio :"Andrew serves as HubSpot's Senior VP of Corporate Development and Business Development and is responsible for the company's acquisitions activity, investments, and strategic partnerships." 150 | }, 151 | { 152 | name :"Jeetu Mahtani", 153 | position:"Executive VP, Customer Success", 154 | imageUrl:"https://ir.hubspot.com/hs-fs/hubfs/assets/hubspot.com/about/management/headshot-jeetu-large.jpg?t=1542378803334&width=1450&name=headshot-jeetu-large.jpg", 155 | bio :"Jeetu Mahtani is the Executive Vice President of Customer Success at HubSpot, where he is responsible for the vision and execution of customer service and support of HubSpot’s global customer base." 156 | }, 157 | { 158 | name :"Christopher O'Donnell", 159 | position:"Chief Product Officer", 160 | imageUrl:"https://ir.hubspot.com/hubfs/Christopher%20ODonnell%20bio%20page.png", 161 | bio :"Christopher O’Donnell is Chief Product Officer at HubSpot, where he drives product management, design, and user experience for HubSpot’s suite of products." 162 | }, 163 | { 164 | name :"Eric Richard", 165 | position:"Chief Information Security Officer + Senior VP of Engineering", 166 | imageUrl:"https://ir.hubspot.com/hs-fs/hub/53/file-1403656270-jpg/EricRichard-1-867124-edited.jpg?t=1542378770915&width=3448&name=EricRichard-1-867124-edited.jpg", 167 | bio :"Eric Richard is the Chief Information Security Officer and Senior VP of Engineering at HubSpot. He oversees HubSpot’s engineering operations teams including the team responsible for executing on the security and technology risk management to best protect our customers, partners and the business. Eric brings more than two decades of experience in the tech industry as a founder, CTO, engineering, and business leader. Eric also serves as the co-executive sponsor of the Women@HubSpot employee resource group." 168 | }, 169 | { 170 | name :"Whitney Sorenson", 171 | position:"Chief Architect", 172 | imageUrl:"https://cdn2.hubspot.net/hubfs/2291794/ws_2048.jpg", 173 | bio :"Whitney Sorenson is the Chief Architect of HubSpot, where he is responsible for leading HubSpot’s engineering teams and technical strategy." 174 | } 175 | ] 176 | export var pastEvents = [ 177 | { 178 | title : "Morgan Stanley Technology Conference", 179 | date : "March 2, 2021", 180 | links : "Webcast" 181 | }, 182 | { 183 | title : "Fourth Quarter 2020 Financial Results", 184 | date : "February 11, 2021", 185 | links : "Webcast | Transcript|Slides" 186 | }, 187 | { 188 | title : "RBC Technology Conference", 189 | date : "November 17, 2020", 190 | links : "Webcast | Transcript" 191 | }, 192 | { 193 | title : "Third Quarter 2020 Financial Results Webcast", 194 | date : "November 5, 2020", 195 | links : "Webcast | Transcript" 196 | }, 197 | { 198 | title : "HubSpot 2020 Analyst Day", 199 | date : "September 22, 2020", 200 | links : "Webcast | Slides" 201 | } 202 | ] -------------------------------------------------------------------------------- /investorRelations/investors.js: -------------------------------------------------------------------------------- 1 | import * as data from './data.js'; 2 | 3 | var minorNavbar = document.getElementById("minorNavBar"); 4 | var setAndUnsetStickyNavbar = () => { 5 | if (window.pageYOffset >= minorNavbar.offsetTop) { 6 | minorNavbar.classList.add("sticky") 7 | } else { 8 | minorNavbar.classList.remove("sticky"); 9 | } 10 | } 11 | window.onscroll = function() {setAndUnsetStickyNavbar()} 12 | /*allignImgOnScroll()*/ 13 | 14 | function redirectToEvents() { 15 | window.location = 'https://ir.hubspot.com/events'; 16 | } 17 | 18 | var todayOpen; 19 | var previousClose; 20 | var intradayLow; 21 | var intradayHigh; 22 | var diff; 23 | var percentVariation; 24 | 25 | function fetchStockValues(){ 26 | var url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=HUBS&apikey= CTUHMWIT73THMIDJ'; 27 | let count = 0; 28 | fetch(url) 29 | .then(function (response) { 30 | response.json().then(function (res) { 31 | console.log(res); 32 | let key; 33 | for(key in res['Time Series (Daily)']){ 34 | count++; 35 | if(count == 1) { 36 | todayOpen = Math.round((Number(res['Time Series (Daily)'][key]['1. open']) * 100))/100; 37 | previousClose = Math.round((Number(res['Time Series (Daily)'][key]['4. close']) * 100))/100; 38 | intradayLow = Math.round((Number(res['Time Series (Daily)'][key]['3. low']) * 100))/100; 39 | intradayHigh = Math.round((Number(res['Time Series (Daily)'][key]['2. high']) * 100))/100; 40 | diff = Math.round((previousClose - intradayLow) * 100) / 100; 41 | percentVariation = Math.round((((diff) / intradayLow) * (10 ** 6))/100)/100; 42 | console.log("today", todayOpen, "previous close", previousClose, "intraday Low", 43 | intradayLow, "intraday high", intradayHigh, "percent variation", percentVariation); 44 | } 45 | if(count == 2) { 46 | console.log("yesterday", res['Time Series (Daily)'][key]); 47 | } 48 | } 49 | addInvestorOverview(); 50 | }) 51 | }) 52 | } 53 | function printSplitPages(buttonNumber) { 54 | let paginationDiv = document.getElementById('pagination'); 55 | paginationDiv.innerHTML = ''; 56 | buttonNumber = Number(buttonNumber); 57 | let start = buttonNumber * 5 - 5; 58 | let stop = buttonNumber * 5 - 1; 59 | for(var k = start; k <= stop; k++) { 60 | paginationDiv.innerHTML += `${data.secFillingUpdateContents[k][0]} ${data.secFillingUpdateContents[k][1]} 61 | ${data.secFillingUpdateContents[k][2]}DOC 62 | PDF 63 | HTML 64 | XLS 65 |
    ` 66 | } 67 | } 68 | var reorder = () => { 69 | let num = event.target.id; 70 | printSplitPages(Number(num)); 71 | console.log('reorder here', num); 72 | } 73 | function printButtons() { 74 | let buttonCount = data.secFillingUpdateContents.length / 5; 75 | document.getElementById('paginationButtons').innerHTML = ''; 76 | for(let j = 1; j <= buttonCount; j++){ 77 | let buttonId = j; 78 | let button = document.createElement('button'); 79 | button.setAttribute('id', buttonId); 80 | button.onclick = reorder; 81 | button.innerHTML = buttonId; 82 | document.getElementById('paginationButtons').appendChild(button); 83 | //document.getElementById('paginationButtons').innerHTML += ``; 84 | //document.getElementById(buttonId).addEventListener("click", reorder); 85 | } 86 | //console.log(methodArr[3]); 87 | } 88 | let renderModal = () => { 89 | let index = Number(event.target.id); 90 | var modal = document.getElementById("myModal"); 91 | var span = document.getElementsByClassName("close")[0]; 92 | document.getElementById('writeUp').innerHTML = ` 95 |

    ${data.leadershipTeam[index].name}

    ${data.leadershipTeam[index].position} 96 |

    ${data.leadershipTeam[index].bio}
    ` 97 | modal.style.display = "block"; 98 | span.onclick = function() { 99 | modal.style.display = "none"; 100 | } 101 | window.onclick = function(event) { 102 | if (event.target == modal) { 103 | modal.style.display = "none"; 104 | } 105 | } 106 | } 107 | 108 | let addInvestorOverview = () => { 109 | var url = ["https://ir.hubspot.com/news/hubspot-reports-q4-and-full-year-2020-results", 110 | "https://event.on24.com/eventRegistration/EventLobbyServlet?target=reg20.jsp&referrer=https%3A%2F%2Fir.hubspot.com%2F&eventid=2944718&sessionid=1&key=5135E09BE311B16FD07FA8CC10D25020®Tag=&V2=false&sourcepage=register", 111 | "https://ir.hubspot.com/hubfs/Q4%202020%20Earnings%20Call_Corrected%20Transcript_2021-02-11-20-36-05.pdf", 112 | "https://ir.hubspot.com/events", 113 | "https://ir.hubspot.com/news/hubspots-ceo-brian-halligan-injured-in-accident-expected-to-make-a-full-and-complete-recovery", 114 | "https://f.hubspotusercontent20.net/hubfs/421676/Investor%20Presentation%20Q420.pdf", 115 | "https://ir.hubspot.com/#ir-stock" 116 | ]; 117 | document.getElementById('titleDisplay').innerHTML = `

    ${data.titleAndContent.investorOverview[0]}

    120 |

    121 | ${data.titleAndContent.investorOverview[1]}

    122 |
    ` 124 | 125 | document.getElementById('contentDisplay').innerHTML = `
    126 |
    128 |

    Latest Earnings

    129 | Earnings Release

    130 | Earnings Call Webcast

    131 | Earnings Call Transcript 132 |
    133 |
    135 |

    Popular Links

    136 | Analyst Day 2020

    137 | Latest Press Release

    138 | Latest Investor Presentation

    139 | Stock Information
    140 |


    141 |
    142 |
    143 |
    144 |



    145 |

    Upcoming Events

    146 |

    There's nothing upcoming. Please check back later!

    147 | 148 |
    `; 149 | document.getElementById("orangeButton").addEventListener("click", redirectToEvents); 150 | document.getElementById('contentDisplay').innerHTML += `
    152 |
    NYSE | HUBS
    153 |

    $${previousClose}

    154 |

    +${diff} (${percentVariation} %)

    155 |
    158 |
    159 |

    Today's Open
    ${todayOpen}

    160 |
    |
    161 |

    Previous Close
    ${previousClose}

    162 |
    |
    163 |

    Intraday
    High ${intradayHigh} | Low ${intradayLow}

    164 |
    |
    165 |

    52 Week
    High 342 | Low 231

    166 |
    167 |
    168 |
    `; 169 | document.getElementById('contentDisplay').innerHTML += `
    171 |

    SEC Filing

    172 |
    173 |
    174 |
    175 |

    176 |
    `; 177 | printSplitPages(1); 178 | printButtons(); 179 | } 180 | 181 | let addNews = () => { 182 | document.getElementById('titleDisplay').innerHTML = `

    ${data.titleAndContent.news[0]}

    183 |

    ${data.titleAndContent.news[1]}

    `; 184 | document.getElementById('contentDisplay').innerHTML = ''; 185 | document.getElementById('contentDisplay').innerHTML = `
    `; 186 | document.getElementById('newsDisp').innerHTML = ''; 187 | for(let i = 0; i < data.newsHeaderDateAndRedirectLink.length; i++) { 188 | document.getElementById('newsDisp').innerHTML += `

    ${data.newsHeaderDateAndRedirectLink[i][0]}

    189 |

    ${data.newsHeaderDateAndRedirectLink[i][1]}

    190 | Read more 191 |

    `; 192 | } 193 | } 194 | let updateEvent = () => { 195 | document.getElementById('titleDisplay').innerHTML = `

    ${data.titleAndContent.eventsAndPresentations[0]}

    196 |

    ${data.titleAndContent.eventsAndPresentations[1]}

    `; 197 | document.getElementById('contentDisplay').innerHTML = ''; 198 | document.getElementById('contentDisplay').innerHTML = `
    199 |
    201 |

    Investor Presentation

    202 |

    Fourth Quarter 2020 203 | Investor Marketing Presentation

    204 | View slides 205 |
    206 |
    208 |

    HubSpot Analyst Day

    209 |

    2020 Analyst Day

    210 |

    September 22, 2020


    211 |

    View webcast | 212 | View slides




    213 |


    214 |
    215 |
    216 |
    217 |



    218 |

    Upcoming Events

    219 |

    There's nothing upcoming. Please check back later!

    220 |
    `; 221 | document.getElementById('contentDisplay').innerHTML += `
    222 |

    Past Events & Presentation

    223 |
    ` 224 | for(let i = 0; i < data.pastEvents.length; i++) { 225 | document.getElementById("pastEvents").innerHTML += `

    ${data.pastEvents[i].title}
    ${data.pastEvents[i].date} 226 |
    ${data.pastEvents[i].links}

    `; 227 | } 228 | } 229 | 230 | let updateLeadershipDetails = () => { 231 | document.getElementById('titleDisplay').innerHTML = `

    ${data.titleAndContent.leadershipAndGovernance[0]}

    232 |

    ${data.titleAndContent.leadershipAndGovernance[1]}

    `; 233 | document.getElementById('contentDisplay').innerHTML = '

    Leadership Team

    '; 234 | document.getElementById('contentDisplay').innerHTML += `` 240 | for(let i = 0; i < data.leadershipTeam.length; i++) { 241 | let paraId = "person_" + i; 242 | document.getElementById('teamView').innerHTML += `
    243 | ${data.leadershipTeam[i].name} 244 |
    245 |

    ${data.leadershipTeam[i].name}

    ${data.leadershipTeam[i].position}

    246 |

    247 |
    248 |
    `; 249 | } 250 | for(let i = 0; i < data.leadershipTeam.length; i++) { 251 | let paraId = "person_" + i; 252 | let link = document.createElement('span'); 253 | link.setAttribute('class', 'cursorShift'); 254 | link.setAttribute('id', i); 255 | link.onclick = renderModal; 256 | link.innerHTML = 'Read bio'; 257 | document.getElementById(paraId).appendChild(link); 258 | } 259 | 260 | } 261 | 262 | let showFaq = () => { 263 | document.getElementById('titleDisplay').innerHTML = `

    ${data.titleAndContent.faq[0]}

    264 |

    ${data.titleAndContent.faq[1]}

    `; 265 | document.getElementById('contentDisplay').innerHTML = ''; 266 | document.getElementById('contentDisplay').innerHTML = `

    Want to know more about HubSpot? Here are answers 267 | to the most commonly asked questions about our company.

    `; 268 | for(let i = 0; i < data.faqs.length; i++) { 269 | document.getElementById('contentDisplay').innerHTML += ` 270 |

    ${data.faqs[i][1]}

    `; 271 | } 272 | var faqStyle = document.getElementsByClassName("faq"); 273 | var iTag = []; 274 | for (let i = 0; i < faqStyle.length; i++) { 275 | iTag[i] = document.getElementById(`button_${i}`); 276 | faqStyle[i].addEventListener("click", function() { 277 | var panel = this.nextElementSibling; 278 | if (panel.style.display === "block") { 279 | panel.style.display = "none"; 280 | iTag[i].classList.remove("down"); 281 | iTag[i].classList.add("right"); 282 | faqStyle[i].style.border = "0"; 283 | } else { 284 | panel.style.display = "block"; 285 | iTag[i].classList.remove("right"); 286 | iTag[i].classList.add("down"); 287 | faqStyle[i].style.border = "2px solid rgb(0, 164, 189)"; 288 | } 289 | }); 290 | } 291 | } 292 | 293 | document.getElementById('investorOverview').addEventListener("click", addInvestorOverview); 294 | document.getElementById("news").addEventListener("click", addNews); 295 | document.getElementById("eventUpdate").addEventListener("click", updateEvent); 296 | document.getElementById("leadershipDetails").addEventListener("click", updateLeadershipDetails); 297 | document.getElementById("faq").addEventListener("click", showFaq); 298 | window.onload = fetchStockValues(); 299 | 300 | //Adding contents from another HTML file to my page 301 | function includefooterHTML() { 302 | var z, i, elmnt, file, xhttp; 303 | /* Loop through a collection of all HTML elements: */ 304 | z = document.getElementsByTagName("*"); 305 | for (i = 0; i < z.length; i++) { 306 | elmnt = z[i]; 307 | /*search for elements with a certain atrribute:*/ 308 | file = elmnt.getAttribute("footer-include-html"); 309 | if (file) { 310 | /* Make an HTTP request using the attribute value as the file name: */ 311 | xhttp = new XMLHttpRequest(); 312 | xhttp.onreadystatechange = function() { 313 | if (this.readyState == 4) { 314 | if (this.status == 200) {elmnt.innerHTML = this.responseText;} 315 | if (this.status == 404) {elmnt.innerHTML = "Page not found.";} 316 | /* Remove the attribute, and call this function once more: */ 317 | elmnt.removeAttribute("w3-include-html"); 318 | includeHTML(); 319 | } 320 | } 321 | xhttp.open("GET", file, true); 322 | xhttp.send(); 323 | /* Exit the function: */ 324 | return; 325 | } 326 | } 327 | } 328 | includefooterHTML(); -------------------------------------------------------------------------------- /managementTeam/dataSet.js: -------------------------------------------------------------------------------- 1 | export var contentDisplay = [ 2 | ["Our Management Team", 3 | "If you've read our Culture Code, you know we're unreasonably picky about our peers -- our executives included. The HubSpot management team is made up of savvy entrepreneurs and industry experts, bringing years of experience to a young company. They cultivate our strong culture and work tirelessly to help our team scale, grow, and succeed."], 4 | ["Board of Directors", 5 | "HubSpot (NYSE: HUBS) is a public company. Meet HubSpot's Board of Directors, the group of individuals we’re proud to help oversee our business on behalf of our shareholders."], 6 | ["Advisory Board", 7 | "The HubSpot Advisory Board provides strategic guidance and honest feedback, identifies areas of improvement, and works on projects that further HubSpot’s mission to building an inclusive company that helps customers grow better. They’re a curated group of influencers and business leaders selected based on the core principles and values of HubSpot’s culture. We’d love for you to get to know them."], 8 | ] 9 | 10 | export var managementTeamMembers = [ 11 | { 12 | name : "Brian Halligan", 13 | role : "CEO, Co-Founder", 14 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Halligan-Crains-square.jpg?width=496&name=Halligan-Crains-square.jpg", 15 | aboutLink : "https://www.hubspot.com/company/management/brian-halligan", 16 | twitterLink : "https://twitter.com/bhalligan", 17 | LinkedLink : "", 18 | }, 19 | { 20 | name : "Dharmesh Shah", 21 | role : "CTO, Co-Founder", 22 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg?width=496&name=dharmesh-home.jpg", 23 | aboutLink : "https://www.hubspot.com/company/management/dharmesh-shah", 24 | twitterLink : "https://twitter.com/dharmesh", 25 | LinkedLink : "", 26 | }, 27 | { 28 | name : "Yamini Rangan", 29 | role : "Chief Customer Officer", 30 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Yamini%20Rangan%20headshot%20edited.png?width=496&name=Yamini%20Rangan%20headshot%20edited.png", 31 | aboutLink : "https://www.hubspot.com/company/management/yamini-rangan", 32 | twitterLink : "", 33 | LinkedLink : "https://www.linkedin.com/in/yaminirangan/", 34 | }, 35 | { 36 | name : "Kipp Bodnar", 37 | role : "Chief Marketing Officer", 38 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Kipp-Bodnar-HubSpot.jpg?t=1542378803334&width=496&name=Kipp-Bodnar-HubSpot.jpg", 39 | aboutLink : "https://www.hubspot.com/company/management/kipp-bodnar", 40 | twitterLink : "https://twitter.com/kippbodnar", 41 | LinkedLink : "", 42 | }, 43 | { 44 | name : "Kate Bueker", 45 | role : "Chief Financial Officer", 46 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/KB%20pic%202%20.png?t=1542042322334&width=496&name=KB%20pic%202%20.png", 47 | aboutLink : "https://www.hubspot.com/company/management/kate-bueker-cfo", 48 | twitterLink : "", 49 | LinkedLink : "https://www.linkedin.com/in/kate-bueker-25b0231/", 50 | }, 51 | { 52 | name : "Katie Burke", 53 | role : "Chief People Officer", 54 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/KatieBurke-3.jpg?t=1542378923349&width=496&name=KatieBurke-3.jpg", 55 | aboutLink : "https://www.hubspot.com/company/management/katie-burke-chief-people-officer", 56 | twitterLink : "https://twitter.com/katieburkie", 57 | LinkedLink : "", 58 | }, 59 | { 60 | name : "Brad Coffey", 61 | role : "Chief Strategy Officer", 62 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-740520305-jpg/assets/hubspot.com/about/management/Headshot_Brad.jpg?t=1542378554919&width=496&name=Headshot_Brad.jpg", 63 | aboutLink : "https://www.hubspot.com/company/management/brad-coffey", 64 | twitterLink : "https://twitter.com/BradfordCoffey", 65 | LinkedLink : "", 66 | }, 67 | { 68 | name : "Alison Elworthy", 69 | role : "Executive VP, Revenue Operations", 70 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-1402687917-jpg/AlisonElworthy-809462-edited.jpg?t=1542378710132&width=496&name=AlisonElworthy-809462-edited.jpg", 71 | aboutLink : "https://www.hubspot.com/company/management/alison-elworthy", 72 | twitterLink : "https://twitter.com/AlisonElworthy", 73 | LinkedLink : "", 74 | }, 75 | { 76 | name : "John Kelleher", 77 | role : "General Counsel", 78 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-735311228-jpg/assets/hubspot.com/about/management/Headshot_Kelleher.jpg?t=1542378434416&width=496&name=Headshot_Kelleher.jpg", 79 | aboutLink : "https://www.hubspot.com/company/management/john-kelleher", 80 | twitterLink : "", 81 | LinkedLink : "https://www.linkedin.com/in/jokelleher/", 82 | }, 83 | { 84 | name : "Andrew Lindsay", 85 | role : "Senior VP, Corporate Development & Business Development", 86 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Andrew%20Lindsay%202.jpg?width=496&name=Andrew%20Lindsay%202.jpg", 87 | aboutLink : "https://www.hubspot.com/company/management/andrew-lindsay", 88 | twitterLink : "", 89 | LinkedLink : "https://www.linkedin.com/in/andrewmlindsay", 90 | }, 91 | { 92 | name : "Jeetu Mahtani", 93 | role : "Executive VP, Customer Success", 94 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/assets/hubspot.com/about/management/headshot-jeetu-large.jpg?t=1542378803334&width=496&name=headshot-jeetu-large.jpg", 95 | aboutLink : "https://www.hubspot.com/company/management/jeetu-mahtani", 96 | twitterLink : "https://twitter.com/jmahtani", 97 | LinkedLink : "", 98 | }, 99 | { 100 | name : "Christopher O'Donnell", 101 | role : "Chief Product Officer", 102 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Christopher%20ODonnell%20bio%20page.png?width=496&name=Christopher%20ODonnell%20bio%20page.png", 103 | aboutLink : "https://www.hubspot.com/company/management/christopher-odonnell", 104 | twitterLink : "https://twitter.com/markitecht", 105 | LinkedLink : "", 106 | }, 107 | { 108 | name : "Eric Richard", 109 | role : "Chief Information Security Officer + Senior VP of Engineering", 110 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-1403656270-jpg/EricRichard-1-867124-edited.jpg?t=1542378770915&width=496&name=EricRichard-1-867124-edited.jpg", 111 | aboutLink : "https://www.hubspot.com/company/management/eric-richard-ciso", 112 | twitterLink : "https://twitter.com/ericrrichard", 113 | LinkedLink : "", 114 | }, 115 | { 116 | name : "Whitney Sorenson", 117 | role : "Chief Architect", 118 | imageUrl: "https://cdn2.hubspot.net/hub/2291794/hubfs/ws_2048.jpg?width=496&name=ws_2048.jpg", 119 | aboutLink : "https://www.hubspot.com/company/management/whitney-sorenson", 120 | twitterLink : "", 121 | LinkedLink : "https://www.linkedin.com/in/wsorenson/", 122 | } 123 | ]; 124 | 125 | export var boardOfDirectorsMembers = [ 126 | { 127 | name : "Brian Halligan", 128 | role : "CEO, Co-Founder", 129 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Halligan-Crains-square.jpg?width=496&name=Halligan-Crains-square.jpg", 130 | aboutLink : "https://www.hubspot.com/company/management/brian-halligan", 131 | twitterLink : "https://twitter.com/bhalligan", 132 | LinkedLink : "", 133 | }, 134 | { 135 | name : "Dharmesh Shah", 136 | role : "CTO, Co-Founder", 137 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg?width=496&name=dharmesh-home.jpg", 138 | aboutLink : "https://www.hubspot.com/company/management/dharmesh-shah", 139 | twitterLink : "https://twitter.com/dharmesh", 140 | LinkedLink : "", 141 | }, 142 | { 143 | name : "Nick Caldwell", 144 | role : "Vice President, Engineering for Consumer Products at Twitter", 145 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Nick%20Caldwell%202%20copy.jpg?width=496&name=Nick%20Caldwell%202%20copy.jpg", 146 | aboutLink : "https://www.hubspot.com/company/board-of-directors/", 147 | twitterLink : "https://twitter.com/nickcald", 148 | LinkedLink : "", 149 | }, 150 | { 151 | name : "Ron Gill", 152 | role : "Operating Partner at Lead Edge Capital", 153 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Henry_Franco_Images/Ron_Gill.jpg?t=1542042357193&width=496&name=Ron_Gill.jpg", 154 | aboutLink : "https://www.hubspot.com/company/board-of-directors/ron-gill", 155 | twitterLink : "", 156 | LinkedLink : "https://www.linkedin.com/in/ron-gill-b638bb/", 157 | }, 158 | { 159 | name : "Julie Herendeen", 160 | role : "CMO at PagerDuty", 161 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Julie%20Herendeen.jpg?width=496&name=Julie%20Herendeen.jpg", 162 | aboutLink : "https://www.hubspot.com/company/board-of-directors/julie-herendeen", 163 | twitterLink : "", 164 | LinkedLink : "https://www.linkedin.com/in/julieherendeen/", 165 | }, 166 | { 167 | name : "Lorrie Norrington", 168 | role : "Operating Partner at Lead Edge Capital", 169 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Henry_Franco_Images/Lorrie_Norrington.jpg?t=1542042357193&width=496&name=Lorrie_Norrington.jpg", 170 | aboutLink : "https://www.hubspot.com/company/board-of-directors/lorrie-norrington", 171 | twitterLink : "", 172 | LinkedLink : "https://www.linkedin.com/in/lorrienorrington/", 173 | }, 174 | { 175 | name : "Avanish Sahai", 176 | role : "Vice President, ISV & Apps Partner Ecosystem at Google", 177 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Avanish%20Sahai.jpg?t=1542042357193&width=496&name=Avanish%20Sahai.jpg", 178 | aboutLink : "https://www.hubspot.com/company/board-of-directors/avanish-sahai", 179 | twitterLink : "", 180 | LinkedLink : "https://www.linkedin.com/in/asahai/", 181 | }, 182 | { 183 | name : "Jay Simons", 184 | role : "President, Atlassian", 185 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Jay_Formal_Final2-2.jpg?t=1542042357193&width=496&name=Jay_Formal_Final2-2.jpg", 186 | aboutLink : "https://www.hubspot.com/company/board-of-directors/jay-simons", 187 | twitterLink : "https://twitter.com/jaysimons", 188 | LinkedLink : "", 189 | }, 190 | { 191 | name : "Jill Ward", 192 | role : "Operating Partner at Lead Edge Capital", 193 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Henry_Franco_Images/J%20Ward%20-%20FLTX%20Headshot%20-%20Square.jpeg?t=1542042357193&width=496&name=J%20Ward%20-%20FLTX%20Headshot%20-%20Square.jpeg", 194 | aboutLink : "https://www.hubspot.com/company/board-of-directors/jill-ward", 195 | twitterLink : "", 196 | LinkedLink : "https://www.linkedin.com/in/jillward17/", 197 | }, 198 | { 199 | name : "John Kelleher", 200 | role : "General Counsel", 201 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-735311228-jpg/assets/hubspot.com/about/management/Headshot_Kelleher.jpg?t=1542378434416&width=496&name=Headshot_Kelleher.jpg", 202 | aboutLink : "https://www.hubspot.com/company/management/john-kelleher", 203 | twitterLink : "", 204 | LinkedLink : "https://www.linkedin.com/in/jokelleher/", 205 | }, 206 | { 207 | name : "Andrew Lindsay", 208 | role : "Senior VP, Corporate Development & Business Development", 209 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Andrew%20Lindsay%202.jpg?width=496&name=Andrew%20Lindsay%202.jpg", 210 | aboutLink : "https://www.hubspot.com/company/management/andrew-lindsay", 211 | twitterLink : "", 212 | LinkedLink : "https://www.linkedin.com/in/andrewmlindsay", 213 | }, 214 | { 215 | name : "Jeetu Mahtani", 216 | role : "Executive VP, Customer Success", 217 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/assets/hubspot.com/about/management/headshot-jeetu-large.jpg?t=1542378803334&width=496&name=headshot-jeetu-large.jpg", 218 | aboutLink : "https://www.hubspot.com/company/management/jeetu-mahtani", 219 | twitterLink : "https://twitter.com/jmahtani", 220 | LinkedLink : "", 221 | }, 222 | { 223 | name : "Christopher O'Donnell", 224 | role : "Chief Product Officer", 225 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Christopher%20ODonnell%20bio%20page.png?width=496&name=Christopher%20ODonnell%20bio%20page.png", 226 | aboutLink : "https://www.hubspot.com/company/management/christopher-odonnell", 227 | twitterLink : "https://twitter.com/markitecht", 228 | LinkedLink : "", 229 | }, 230 | { 231 | name : "Eric Richard", 232 | role : "Chief Information Security Officer + Senior VP of Engineering", 233 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-1403656270-jpg/EricRichard-1-867124-edited.jpg?t=1542378770915&width=496&name=EricRichard-1-867124-edited.jpg", 234 | aboutLink : "https://www.hubspot.com/company/management/eric-richard-ciso", 235 | twitterLink : "https://twitter.com/ericrrichard", 236 | LinkedLink : "", 237 | }, 238 | { 239 | name : "Whitney Sorenson", 240 | role : "Chief Architect", 241 | imageUrl: "https://cdn2.hubspot.net/hub/2291794/hubfs/ws_2048.jpg?width=496&name=ws_2048.jpg", 242 | aboutLink : "https://www.hubspot.com/company/management/whitney-sorenson", 243 | twitterLink : "", 244 | LinkedLink : "https://www.linkedin.com/in/wsorenson/", 245 | } 246 | ]; 247 | 248 | export var advisoryBoardMembers = [ 249 | { 250 | name : "Dantley Davis", 251 | role : "Chief Design Officer at Twitter", 252 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Black%20Advisory%20Board/Dantley%20Davis.png?width=496&name=Dantley%20Davis.png", 253 | aboutLink : "https://www.hubspot.com/company/advisory-board/daniel-pink", 254 | twitterLink : "", 255 | LinkedLink : "https://www.linkedin.com/in/dantley/" 256 | }, 257 | { 258 | name : "Leslie Forde", 259 | role : "Founder of Mom’s Hierarchy of Needs", 260 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Black%20Advisory%20Board/Leslie%20Forde.jpg?width=496&name=Leslie%20Forde.jpg", 261 | aboutLink : "https://www.hubspot.com/company/advisory-board/rebecca-liebman", 262 | twitterLink : "", 263 | LinkedLink : "https://www.linkedin.com/in/leslieforde/" 264 | }, 265 | { 266 | name : "Jeanine Francis", 267 | role : "DI&B International Lead EMEA and LATAM at LinkedIn", 268 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Black%20Advisory%20Board/Jeanine%20Francis.png?width=496&name=Jeanine%20Francis.png", 269 | aboutLink : "https://www.hubspot.com/company/advisory-board/chris-denson", 270 | twitterLink : "", 271 | LinkedLink : "https://www.linkedin.com/in/jeaninefrancis/" 272 | }, 273 | { 274 | name : "Dr. Claudia Igbrude", 275 | role : "Learning Technology Business Partner at PayPal Global Customer Solutions", 276 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Black%20Advisory%20Board/Dr.%20Claudia%20Igbrude.png?width=496&name=Dr.%20Claudia%20Igbrude.png", 277 | aboutLink : "https://www.hubspot.com/company/advisory-board/amanda-slavin", 278 | twitterLink : "", 279 | LinkedLink : "https://www.linkedin.com/in/iclaudiad/" 280 | }, 281 | { 282 | name : "David Meerman Scott", 283 | role : "Marketing and Sales Thought Leader", 284 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Logos/_MG_6701.jpg?width=496&name=_MG_6701.jpg", 285 | aboutLink : "https://www.hubspot.com/company/advisory-board/david-meerman-scott", 286 | twitterLink : "", 287 | LinkedLink : "https://www.linkedin.com/in/davidmeermanscott/" 288 | }, 289 | { 290 | name : "Mark Roberge", 291 | role : "Advisor", 292 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Henry_Franco_Images/Roberge_Headshot_-_Square.png?t=1542378324667&width=496&name=Roberge_Headshot_-_Square.png", 293 | aboutLink : "https://www.hubspot.com/company/advisory-board/mark-roberge", 294 | twitterLink : "", 295 | LinkedLink : "https://www.linkedin.com/in/markroberge/" 296 | }, 297 | { 298 | name : "Jay Simons", 299 | role : "President, Atlassian", 300 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Jay_Formal_Final2-2.jpg?t=1542042357193&width=496&name=Jay_Formal_Final2-2.jpg", 301 | aboutLink : "https://www.hubspot.com/company/board-of-directors/jay-simons", 302 | twitterLink : "https://twitter.com/jaysimons", 303 | LinkedLink : "", 304 | }, 305 | { 306 | name : "Jill Ward", 307 | role : "Operating Partner at Lead Edge Capital", 308 | imageUrl : "https://www.hubspot.com/hs-fs/hubfs/Henry_Franco_Images/J%20Ward%20-%20FLTX%20Headshot%20-%20Square.jpeg?t=1542042357193&width=496&name=J%20Ward%20-%20FLTX%20Headshot%20-%20Square.jpeg", 309 | aboutLink : "https://www.hubspot.com/company/board-of-directors/jill-ward", 310 | twitterLink : "", 311 | LinkedLink : "https://www.linkedin.com/in/jillward17/", 312 | }, 313 | { 314 | name : "John Kelleher", 315 | role : "General Counsel", 316 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-735311228-jpg/assets/hubspot.com/about/management/Headshot_Kelleher.jpg?t=1542378434416&width=496&name=Headshot_Kelleher.jpg", 317 | aboutLink : "https://www.hubspot.com/company/management/john-kelleher", 318 | twitterLink : "", 319 | LinkedLink : "https://www.linkedin.com/in/jokelleher/", 320 | }, 321 | { 322 | name : "Andrew Lindsay", 323 | role : "Senior VP, Corporate Development & Business Development", 324 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Andrew%20Lindsay%202.jpg?width=496&name=Andrew%20Lindsay%202.jpg", 325 | aboutLink : "https://www.hubspot.com/company/management/andrew-lindsay", 326 | twitterLink : "", 327 | LinkedLink : "https://www.linkedin.com/in/andrewmlindsay", 328 | }, 329 | { 330 | name : "Jeetu Mahtani", 331 | role : "Executive VP, Customer Success", 332 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/assets/hubspot.com/about/management/headshot-jeetu-large.jpg?t=1542378803334&width=496&name=headshot-jeetu-large.jpg", 333 | aboutLink : "https://www.hubspot.com/company/management/jeetu-mahtani", 334 | twitterLink : "https://twitter.com/jmahtani", 335 | LinkedLink : "", 336 | }, 337 | { 338 | name : "Christopher O'Donnell", 339 | role : "Chief Product Officer", 340 | imageUrl: "https://www.hubspot.com/hs-fs/hubfs/Christopher%20ODonnell%20bio%20page.png?width=496&name=Christopher%20ODonnell%20bio%20page.png", 341 | aboutLink : "https://www.hubspot.com/company/management/christopher-odonnell", 342 | twitterLink : "https://twitter.com/markitecht", 343 | LinkedLink : "", 344 | }, 345 | { 346 | name : "Eric Richard", 347 | role : "Chief Information Security Officer + Senior VP of Engineering", 348 | imageUrl: "https://www.hubspot.com/hs-fs/hub/53/file-1403656270-jpg/EricRichard-1-867124-edited.jpg?t=1542378770915&width=496&name=EricRichard-1-867124-edited.jpg", 349 | aboutLink : "https://www.hubspot.com/company/management/eric-richard-ciso", 350 | twitterLink : "https://twitter.com/ericrrichard", 351 | LinkedLink : "", 352 | }, 353 | { 354 | name : "Whitney Sorenson", 355 | role : "Chief Architect", 356 | imageUrl: "https://cdn2.hubspot.net/hub/2291794/hubfs/ws_2048.jpg?width=496&name=ws_2048.jpg", 357 | aboutLink : "https://www.hubspot.com/company/management/whitney-sorenson", 358 | twitterLink : "", 359 | LinkedLink : "https://www.linkedin.com/in/wsorenson/", 360 | } 361 | ]; -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: 'Montserrat', sans-serif; 7 | text-align: center; 8 | color: rgb(51, 51, 51); 9 | background-color: rgba(232, 255, 253, 0.685); 10 | margin: 0%; 11 | padding-top: 80px; 12 | /* padding: 0%; */ 13 | } 14 | 15 | 16 | /* NAV BAR */ 17 | 18 | .check-btn { 19 | font-size: 50px; 20 | margin-right: 20px; 21 | color: black; 22 | line-height: 80px; 23 | margin-right: 30px; 24 | } 25 | #check { 26 | display: none; 27 | } 28 | 29 | #top-navigation-bar{ 30 | background-color: white; 31 | height: 30px; 32 | vertical-align: middle; 33 | width: 100%; 34 | position: fixed; 35 | top: 0; 36 | 37 | } 38 | #top-navigation-bar a{ 39 | font-size: 12px; 40 | } 41 | #top-navigation-bar ul{ 42 | display: flex; 43 | padding-left: 110px; 44 | margin: 0px; 45 | height: 10%; 46 | } 47 | #top-navigation-bar>ul a:hover{ 48 | color: #007188; 49 | font-weight: 500; 50 | border-bottom: 1px solid #007188; 51 | 52 | } 53 | #top-navigation-bar li{ 54 | list-style: none; 55 | margin: 5px 20px; 56 | } 57 | .top-nav-space{ 58 | width: 45%; 59 | } 60 | .bout-nav{ 61 | width: 13%; 62 | height: 200px; 63 | margin-left: auto; 64 | margin-right: 6%; 65 | margin-top: 30px; 66 | /* display: none; */ 67 | text-align: left; 68 | padding: 5px; 69 | background-color: white; 70 | box-shadow: 2px 2px 14px 6px rgba(216, 216, 216, 0.438); 71 | border-radius: 3px; 72 | 73 | } 74 | .bout-nav div>div>a>span{ 75 | color: rgb(51, 51, 51); 76 | font-size: 13px; 77 | } 78 | .bout-nav div>div>a>span:hover{ 79 | color: #007188; 80 | font-weight: 500; 81 | } 82 | .bout-nav div{ 83 | padding: 2px 8px; 84 | } 85 | 86 | 87 | /* //// */ 88 | 89 | .lang-nav{ 90 | width: 8%; 91 | height: 250px; 92 | margin-right: auto; 93 | margin-left: 9%; 94 | margin-top: 30px; 95 | /* display: none; */ 96 | text-align: left; 97 | padding: 5px; 98 | background-color: white; 99 | box-shadow: 2px 2px 14px 6px rgba(216, 216, 216, 0.438); 100 | border-radius: 3px; 101 | 102 | } 103 | .lang-nav div>div>a>span{ 104 | color: rgb(51, 51, 51); 105 | font-size: 13px; 106 | } 107 | .lang-nav div>div>a>span:hover{ 108 | color: #007188; 109 | font-weight: 500; 110 | } 111 | .lang-nav div{ 112 | padding: 5px 8px; 113 | } 114 | 115 | /* ////////////////////////////// */ 116 | 117 | 118 | nav > a { 119 | display: inline; 120 | } 121 | nav { 122 | background-color: white; 123 | height: 80px; 124 | vertical-align: middle; 125 | width: 100%; 126 | position: fixed; 127 | top: 0; 128 | 129 | box-shadow: 2px 2px 4px 2px rgba(184, 183, 183, 0.562); 130 | margin-top: 20px; 131 | 132 | } 133 | ul { 134 | display: flex; 135 | padding-left: 20px; 136 | margin: 0px; 137 | height: 100%; 138 | 139 | } 140 | li { 141 | list-style: none; 142 | margin: 30px 20px; 143 | } 144 | .space { 145 | width: 38.4%; 146 | } 147 | nav img { 148 | display: inline; 149 | width: 100px; 150 | align-self: baseline; 151 | margin: 25px 50px 0 120px; 152 | float: left; 153 | } 154 | a { 155 | display: inline-block; 156 | font-size: 18px; 157 | text-decoration: none; 158 | color: rgb(65, 64, 64); 159 | font-weight: 400; 160 | } 161 | li > .pricing-nav:hover { 162 | color: #007188; 163 | font-weight: 500; 164 | border-bottom: 1px solid #007188; 165 | 166 | } 167 | 168 | button, 169 | input[type="submit"] { 170 | width: 150px; 171 | height: 33px; 172 | font-size: 15px; 173 | border-radius: 4px; 174 | cursor: pointer; 175 | background-color: #ff7a59; 176 | color: white; 177 | border: none; 178 | transition: background-color 0.5s ease; 179 | 180 | outline: none; 181 | } 182 | li > button:hover { 183 | 184 | background-color: #ff7a5979; 185 | } 186 | 187 | /* Burger Menu */ 188 | 189 | .burger { 190 | margin-top: 20px; 191 | margin-right: 10px; 192 | display: none; 193 | } 194 | .line { 195 | width: 30px; 196 | height: 3px; 197 | background-color: black; 198 | margin: 1px; 199 | margin: 5px auto; 200 | border-radius: 5px; 201 | } 202 | .line:nth-child(2) { 203 | height: 3px; 204 | width: 40px; 205 | } 206 | 207 | .burger-menu { 208 | display: none; 209 | margin-top: 0; 210 | padding: 0; 211 | } 212 | .burger-menu li { 213 | background-color: rgb(253, 253, 253); 214 | height: 50px; 215 | margin: 0px 10px 0 0; 216 | padding: 30px 0 10px 30px; 217 | /* padding-top: 30px; */ 218 | border-bottom: 1px solid rgb(229, 236, 245); 219 | 220 | } 221 | .burger-menu li a{ 222 | font-weight: 500; 223 | 224 | } 225 | 226 | .burger-menu li a:hover{ 227 | color: #ff7a59; 228 | } 229 | 230 | 231 | #software:after { 232 | /* background: none repeat scroll 0 0 transparent; */ 233 | bottom: 0; 234 | content: ""; 235 | display: block; 236 | height: 5px; 237 | position: absolute; 238 | background: #007188; 239 | transition: all 0.6s ease-in-out; 240 | width: 0; 241 | } 242 | #software:hover:after { 243 | width: 7%; 244 | border-radius: 5px; 245 | } 246 | #res:after { 247 | /* background: none repeat scroll 0 0 transparent; */ 248 | bottom: 0; 249 | content: ""; 250 | display: block; 251 | height: 5px; 252 | position: absolute; 253 | background: #007188; 254 | transition: all 0.6s ease; 255 | width: 0; 256 | } 257 | #res:hover:after { 258 | width: 8.5%; 259 | border-radius: 5px; 260 | } 261 | 262 | .soft-nav{ 263 | width: 81%; 264 | height: 400px; 265 | margin: auto; 266 | padding-left: 0; 267 | padding-bottom: 0; 268 | display: none; 269 | text-align: left; 270 | background-color: white; 271 | box-shadow: 2px 2px 14px 6px rgba(216, 216, 216, 0.438); 272 | border-radius: 3px; 273 | } 274 | .soft-nav > .software-nav-1-2,.software-nav-2-2{ 275 | width: 35%; 276 | height: 70%; 277 | display: flex; 278 | margin-right: 3%; 279 | padding-right: 10px; 280 | justify-content: center; 281 | /* border: 1px solid red; */ 282 | align-items: center; 283 | } 284 | .software-nav-2-2 div{ 285 | width: 110%; 286 | padding: 5px 20px 5px 10px; 287 | } 288 | .software-nav-1-2 div{ 289 | width: 110%; 290 | padding: 5px 20px 5px 10px; 291 | } 292 | .software-nav-1-2-inside{ 293 | margin-left: 19%; 294 | } 295 | .soft-nav-links>span{ 296 | font-size: 14px; 297 | font-weight: 400; 298 | color: #007188; 299 | } 300 | .soft-nav-links>span:hover{ 301 | border-bottom: 1px solid #007188; 302 | } 303 | .soft-nav-links{ 304 | font-size: 14px; 305 | font-weight: 300; 306 | } 307 | #soft-nav-sidebar{ 308 | 309 | display: grid; 310 | /* border: 1px solid red; */ 311 | background-color: #f2fdff; 312 | height: 100%; 313 | } 314 | .soft-nav>#soft-nav-sidebar{ 315 | width: 20%; 316 | padding: 15px 20px; 317 | } 318 | 319 | #soft-nav-sidebar div>a>span{ 320 | font-size: 14px; 321 | font-weight: 500; 322 | color: #007188; 323 | line-height: 22px; 324 | } 325 | #soft-nav-sidebar div>a>span:hover{ 326 | border-bottom: 0.5px solid #007188; 327 | } 328 | .extra-nav { 329 | width: 80%; 330 | height: 400px; 331 | margin: auto; 332 | padding-left: 10px; 333 | padding-bottom: 10px; 334 | display: none; 335 | text-align: left; 336 | background-color: white; 337 | } 338 | .extra-nav > div { 339 | flex-basis: 350px; 340 | height: 90%; 341 | display: flex; 342 | margin: 10px auto; 343 | 344 | justify-content: center; 345 | } 346 | 347 | 348 | 349 | #res-nav { 350 | flex-wrap: wrap; 351 | background-color: white; 352 | height: auto; 353 | width: 55%; 354 | box-shadow: 2px 2px 14px 6px rgba(216, 216, 216, 0.438); 355 | border-radius: 3px; 356 | } 357 | #res-nav > div { 358 | flex-basis: 280px; 359 | height: auto; 360 | padding: 0%; 361 | margin: auto; 362 | } 363 | #res-nav > div > div { 364 | margin-top: 10px; 365 | } 366 | #res-nav > div > div > i { 367 | margin-top: 28px; 368 | } 369 | .extra-nav > div > div > i, 370 | .extra-nav > div > div { 371 | margin-top: 28px; 372 | } 373 | .extra-nav > div > div > i { 374 | margin: 20px; 375 | margin-top: 45px; 376 | } 377 | 378 | .soft-nav > #software-nav-1 > div:hover { 379 | box-shadow: 1px 1px 8px 1px rgba(216, 216, 216, 0.438); 380 | border-radius: 5px; 381 | } 382 | .soft-nav > #software-nav-2 > div:hover { 383 | box-shadow: 1px 1px 8px 1px rgba(216, 216, 216, 0.438); 384 | border-radius: 5px; 385 | } 386 | .res-links a{ 387 | font-weight: 300; 388 | font-size: 15px; 389 | margin: 5px; 390 | } 391 | .res-links a:hover{ 392 | color: #007188; 393 | border-bottom: 0.5px solid #007188; 394 | width: fit-content; 395 | font-weight: 400; 396 | } 397 | .res-para{ 398 | display: flex; 399 | 400 | } 401 | .res-para>span{ 402 | margin-left: 15px; 403 | font-weight: 500; 404 | margin-top: 10px; 405 | } 406 | .res-para>i{ 407 | padding: 10px; 408 | background-color: #e0e0e04d; 409 | color: gray; 410 | } 411 | #res-nav > #res-nav-2{ 412 | margin-top: 0; 413 | } 414 | 415 | 416 | /* NAV END */ 417 | 418 | 419 | /*Home Page-1 Started */ 420 | 421 | #hub-homepage-cont-page1{ 422 | width: 100%; 423 | height: 129vh; 424 | background-image:url("https://cdn2.hubspot.net/hubfs/53/raw_assets/public/_Web%20Team%20Assets/Website/assets/svg/hero.svg"),url("https://cdn2.hubspot.net/hubfs/53/assets/hubspot.com/home/2019/clouds-desktop.svg"),linear-gradient(#fef8f0,#fff3ee,#fff1ee); 425 | 426 | background-repeat: no-repeat; 427 | background-size: 100% 80% cover; 428 | background-position: right bottom,right top,0% 0%; 429 | 430 | border-bottom: 3px solid #33475b; 431 | } 432 | 433 | /* .hub-homepage-image>img{ 434 | 435 | width: 100%; 436 | bottom: 0; 437 | right: auto; 438 | margin-top: 0 439 | } */ 440 | .hub-homepage-left{ 441 | max-width: 430px; 442 | align-items: left; 443 | 444 | display: block; 445 | margin-bottom: 0; 446 | margin-left: 10%; 447 | padding-top:5%; 448 | text-align: left; 449 | 450 | } 451 | .hub-homepage-left>h1{ 452 | font-size: 45px; 453 | font-weight: 700; 454 | text-align: left; 455 | 456 | } 457 | .hub-homepage-left>p{ 458 | font-size: 15.5px; 459 | font-weight: 400; 460 | line-height: 30px; 461 | letter-spacing: 0.5px; 462 | } 463 | .hub-homepage-left>button{ 464 | width: 220px; 465 | height: 75px; 466 | font-size: 16px; 467 | border-radius: 4px; 468 | cursor: pointer; 469 | background-color: #ff7a59; 470 | color: white; 471 | border: none; 472 | transition: background-color 0.5s ease; 473 | font-weight: 500; 474 | outline: none; 475 | } 476 | .hub-homepage-left>button:hover{ 477 | background-color: #ff7a5979; 478 | } 479 | 480 | .hub-homepage-left>.sm-para{ 481 | font-size: 12px; 482 | font-weight: 600; 483 | line-height: 20px; 484 | margin-top: 30px; 485 | } 486 | 487 | /*Home Page-1 Ended */ 488 | 489 | /* Below Homepage page-1 Start */ 490 | 491 | .hub-homepage-cont-page2-just-below{ 492 | text-align: left; 493 | width: 850px; 494 | max-width: 100%; 495 | display: block; 496 | margin: 80px auto; 497 | 498 | } 499 | .hub-homepage-cont-page2-just-below>h1{ 500 | font-size: 32px; 501 | color: #33475b; 502 | } 503 | .hub-homepage-cont-page2-just-below>p{ 504 | line-height: 20px; 505 | font-size: 15px; 506 | letter-spacing: 1px; 507 | color: #33475b; 508 | } 509 | #get-CRM-button{ 510 | display: flex; 511 | justify-content: center; 512 | } 513 | #get-CRM-button button{ 514 | margin: 10px; 515 | } 516 | #get-crm-pro{ 517 | width: 180px; 518 | height: 33px; 519 | font-size: 15px; 520 | border-radius: 4px; 521 | cursor: pointer; 522 | background-color: white; 523 | color: #ff7a59; 524 | border: 1px solid #ff7a59; 525 | transition: background-color 0.5s ease; 526 | 527 | outline: none; 528 | } 529 | #get-crm-pro:hover{ 530 | background-color: #ffc5b7b7 531 | } 532 | 533 | #get-crm-free:hover{ 534 | background-color: #ff7a5979 535 | } 536 | 537 | 538 | .homepage2-cont-4boxes-box1{ 539 | display: grid; 540 | /* border: 1px solid red; */ 541 | width: 40%; 542 | gap: 15px; 543 | padding: 10px 60px 20px 60px; 544 | } 545 | .homepage2-cont-4boxes-box1>div{ 546 | text-align: left; 547 | display: grid; 548 | gap: 15px; 549 | } 550 | .homepage2-cont-4boxes-box1>div>p{ 551 | font-size: 18px; 552 | font-weight: 400; 553 | margin-top: 0; 554 | } 555 | .homepage2-cont-4boxes-box1>div i{ 556 | color: #ff7a59; 557 | } 558 | .homepage2-cont-4boxes-box1>div i>span{ 559 | font-size: 15px; 560 | line-height: 23px; 561 | font-weight: 500; 562 | margin-top: 0; 563 | color: rgb(51, 51, 51); 564 | margin-left: 10px; 565 | } 566 | 567 | .homepage2-cont-4boxes-box1>p{ 568 | font-size: 13px; 569 | line-height: 23px; 570 | font-weight: 500; 571 | margin-top: 0; 572 | } 573 | .homepage2-cont-4boxes-box1>h2{ 574 | font-size: 25px; 575 | font-weight: 900px; 576 | } 577 | .homepage2-cont-4boxes-box1>span{ 578 | margin: auto; 579 | } 580 | .homepage2-cont-4boxes-box1:hover{ 581 | box-shadow: 2px 2px 14px 6px rgba(216, 216, 216, 0.438); 582 | border-radius: 4px; 583 | width: 40.2%; 584 | } 585 | #homepage2-cont-4boxes-box1-btn:hover{ 586 | background-color: #ff7a5979 587 | } 588 | #homepage2-cont-4boxes-1{ 589 | display: flex; 590 | justify-content: center; 591 | 592 | } 593 | #homepage2-cont-4boxes-1 div{ 594 | margin: 10px; 595 | background-color: white; 596 | } 597 | #homepage2-cont-4boxes{ 598 | margin-bottom: 70px; 599 | 600 | } 601 | 602 | /* After 4BOXES Learn and grow with award-winning support */ 603 | 604 | #hub-homepage-learn-and-grow{ 605 | background-image: linear-gradient(45deg,#00a4bd,#00bda5); 606 | width: 100%; 607 | height: 130vh; 608 | margin-bottom: 50px; 609 | 610 | } 611 | #hub-homepage-learn-and-grow>div>h2{ 612 | width: 100%; 613 | text-align: center; 614 | color: white; 615 | font-size: 32px; 616 | letter-spacing: 1px; 617 | } 618 | #hub-homepage-learn-and-grow>div>p{ 619 | width: 100%; 620 | text-align: center; 621 | color: white; 622 | line-height: 25px; 623 | letter-spacing: 1.8px; 624 | font-size: 15px; 625 | } 626 | #hub-homepage-learn-and-grow>.learn-and-grow-textPart{ 627 | margin: auto; 628 | /* border: 1px solid red; */ 629 | width: 60%; 630 | padding-top: 90px; 631 | } 632 | .hub-homepage-learn-and-grow-8grids{ 633 | width: 80%; 634 | /* border: 1px solid red; */ 635 | display: grid; 636 | /* gap: 10px; */ 637 | 638 | 639 | } 640 | #hub-homepage-learn-and-grow>.hub-homepage-learn-and-grow-8grids{ 641 | margin: auto; 642 | padding-top: 50px; 643 | } 644 | .learn-and-grow-8grids{ 645 | display: flex; 646 | justify-content: center; 647 | /* border: 1px solid red; */ 648 | 649 | } 650 | .learn-and-grow-8grids div{ 651 | 652 | border-bottom: 1px solid white; 653 | border-right: 1px solid white; 654 | width: 25%; 655 | height: fit-content; 656 | /* margin: 10px; */ 657 | height: 210px; 658 | } 659 | .learn-and-grow-8grids div:nth-child(4){ 660 | border-bottom: 1px solid white; 661 | border-right: 0 662 | } 663 | .learn-and-grow-8grids-2 div:nth-child(1){ 664 | border-bottom: 0; 665 | } 666 | .learn-and-grow-8grids-2 div:nth-child(2){ 667 | border-bottom: 0; 668 | } 669 | .learn-and-grow-8grids-2 div:nth-child(3){ 670 | border-bottom: 0; 671 | } 672 | .learn-and-grow-8grids-2 div:nth-child(4){ 673 | border-bottom: 0; 674 | } 675 | 676 | 677 | .learn-and-grow-8grids-header{ 678 | color: white; 679 | font-size: 50px; 680 | font-weight: 700; 681 | letter-spacing: 1px; 682 | margin: 5px; 683 | padding:0 ; 684 | } 685 | .learn-and-grow-8grids-para{ 686 | color: white; 687 | font-size: 15px; 688 | font-weight: 400; 689 | 690 | } 691 | .learn-and-grow-8grids div>img{ 692 | padding-top: 20px; 693 | } 694 | 695 | /* After 4BOXES Learn and grow with award-winning support ENDED */ 696 | 697 | 698 | /* After 8grids someCompnaies(SUZUKI , TRELLO ,WWF) STARTS */ 699 | 700 | 701 | #hub-homepage-wwf-suzuki-trello { 702 | display: flex; 703 | /* border: 1px solid red; */ 704 | margin-bottom: 50px; 705 | margin-top: 80px; 706 | } 707 | #hub-homepage-wwf-suzuki-trello>.hub-homepage-wwf-suzuki-trello-rightside{ 708 | margin: auto; 709 | } 710 | #hub-homepage-wwf-suzuki-trello>.wwf-suzuki-trello-leftside{ 711 | margin: auto; 712 | text-align: left; 713 | width: 30%; 714 | margin-top: 30px; 715 | } 716 | .hub-homepage-wwf-suzuki-trello-rightside{ 717 | display: grid; 718 | /* border: 1px solid red; */ 719 | justify-content: center; 720 | align-items: center; 721 | 722 | } 723 | .wwf-suzuki-trello-grid{ 724 | display: flex; 725 | /* border: 1px solid red; */ 726 | justify-content: center; 727 | align-items: center; 728 | margin: 0; 729 | } 730 | .wwf-suzuki-trello-grid div{ 731 | width: 100%; 732 | height: 110px; 733 | /* border: 1px solid red; */ 734 | padding-top: 30px; 735 | margin: 15px; 736 | } 737 | .wwf-suzuki-trello-grid div>img{ 738 | width: 110px; 739 | } 740 | .wwf-suzuki-trello-grid>.classPass{ 741 | padding-top: 14px; 742 | } 743 | 744 | .wwf-suzuki-trello-leftside>h2{ 745 | font-size: 45px; 746 | margin-bottom: 0; 747 | } 748 | .wwf-suzuki-trello-leftside>p{ 749 | font-size: 16px; 750 | line-height: 30px; 751 | 752 | } 753 | 754 | /* After 8grids someCompnaies(SUZUKI , TRELLO ,WWF) ENDS */ 755 | 756 | #homepage-lastPage-page5{ 757 | display: flex; 758 | /* border: 1px solid red; */ 759 | margin-bottom: 60px; 760 | } 761 | #homepage-lastPage-page5>.homepage-lastPage-page5-leftSide{ 762 | /* border: 1px solid red; */ 763 | text-align: left; 764 | padding-left: 10%; 765 | padding-top: 7%; 766 | } 767 | #homepage-lastPage-page5>.homepage-lastPage-page5-leftSide>h1{ 768 | color: #33475b; 769 | } 770 | #homepage-lastPage-page5>.homepage-lastPage-page5-leftSide>p{ 771 | line-height: 30px; 772 | font-size: 16px; 773 | letter-spacing: 1px; 774 | margin-bottom: 5%; 775 | color: #33475b; 776 | } 777 | #homepage-lastPage-page5>.homepage-lastPage-page5-leftSide>span{ 778 | font-size: 12px; 779 | letter-spacing: 1px; 780 | color: rgb(12, 12, 136); 781 | } 782 | #homepage-lastPage-page5>.homepage-lastPage-page5-rightSide{ 783 | width: 60%; 784 | /* border: 1px solid red; */ 785 | } 786 | #homepage-lastPage-page5>.homepage-lastPage-page5-rightSide>img{ 787 | width: 70%; 788 | margin-left: auto; 789 | } 790 | 791 | 792 | /* FOOTER STARTS */ 793 | 794 | #hub-footer-cont{ 795 | width: 100%; 796 | height: 60vh; 797 | /* border: 1px solid red; */ 798 | display: flex; 799 | background-color: #2D3E50; 800 | color: white; 801 | 802 | 803 | } 804 | #hub-footer-cont>div{ 805 | width: 45%; 806 | /* border: 1px solid green; */ 807 | height: 60vh; 808 | } 809 | #hub-footer-cont>.hub-footer-right{ 810 | width: 55%; 811 | } 812 | .hub-footer-left>div{ 813 | display: grid; 814 | width: 35%; 815 | 816 | 817 | } 818 | .footer-left-2{ 819 | padding-top: 50px; 820 | 821 | } 822 | 823 | .footer-left-2,.footer-left-1{ 824 | text-align: left; 825 | } 826 | .footer-right-3,.footer-right-2,.footer-right-1{ 827 | text-align: left; 828 | } 829 | .hub-footer-left{ 830 | display: flex; 831 | justify-content: center; 832 | } 833 | .hub-footer-right{ 834 | display: flex; 835 | justify-content: center; 836 | } 837 | .hub-footer-right>div{ 838 | display: grid; 839 | width: 33%; 840 | 841 | } 842 | #footer-content a{ 843 | font-size: 11px; 844 | font-weight: 600; 845 | color: #CBD6E2; 846 | margin: 9px; 847 | 848 | } 849 | #footer-content a:hover{ 850 | color: #72c9f1; 851 | 852 | text-decoration: underline; 853 | 854 | } 855 | 856 | #footer-content p{ 857 | font-size: 15px; 858 | font-weight: 700; 859 | color: white; 860 | 861 | 862 | } 863 | .footer-icons{ 864 | display: flex; 865 | width: 100%; 866 | height: 10vh; 867 | /* border: 1px solid red; */ 868 | background-color: #2D3E50; 869 | color: #CBD6E2; 870 | } 871 | .all-the-icons>i{ 872 | font-size: 25px; 873 | margin-left: 10px; 874 | margin-right: 10px; 875 | } 876 | 877 | .all-the-icons>i:hover{ 878 | color: #007188; 879 | } 880 | .footer-last{ 881 | width: 100%; 882 | height: 20vh; 883 | /* border: 1px solid red; */ 884 | background-color: #2D3E50; 885 | text-align: center; 886 | color: white; 887 | } 888 | .footer-last>div a{ 889 | color: white; 890 | font-size: 13px; 891 | font-weight: 600; 892 | margin-left: 10px; 893 | margin-right: 10px; 894 | text-decoration: underline; 895 | } 896 | .footer-last>div a:hover{ 897 | color: #72c9f1; 898 | text-decoration: none; 899 | 900 | } 901 | .footer-last>p{ 902 | font-size: 11px; 903 | 904 | 905 | } 906 | 907 | /* FOOTER ENDS */ 908 | 909 | @media only screen and (max-width: 800px) { 910 | nav > ul > li { 911 | display: none; 912 | } 913 | .burger { 914 | display: inline; 915 | width: 100%; 916 | text-align: right; 917 | margin-left: 80%; 918 | } 919 | .burger-menu { 920 | display: none; 921 | } 922 | .burger-menu > li { 923 | display: block; 924 | text-align: left; 925 | padding-top: 30px; 926 | padding-bottom: 0; 927 | } 928 | } --------------------------------------------------------------------------------