Skip to content
This repository has been archived by the owner on Dec 21, 2022. It is now read-only.

Navbar soma #29

Closed
wants to merge 3 commits into from
Closed

Navbar soma #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4700bdd
first update on contact form
somabadri Mar 28, 2022
27df92c
updated newsletter subscribe
somabadri May 22, 2022
08d60fa
working version of navbar
somabadri May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
492 changes: 474 additions & 18 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.5.3",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"monday-ui-react-core": "^1.21.5",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"sass": "^1.49.10",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
Empty file added src/contact-page/ContactForm.js
View file
Open in desktop
Empty file.
Empty file added src/contact-page/ContactFrom.css
View file
Open in desktop
Empty file.
41 changes: 41 additions & 0 deletions src/global-components/NavbarGlobal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react';
import './NavbarGlobal.scss';
import { Navbar, Container, NavDropdown, Nav } from 'react-bootstrap';

class NavbarGlobal extends Component {
render() {
return <div>
<Navbar className="navbar" bg="light" expand="xl">
<Container>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Navbar.Brand className='left-logo' href="/">Scambi</Navbar.Brand>
<NavDropdown title="About Us" id="basic-nav-dropdown">
<NavDropdown.Item href="/about">About Scambi</NavDropdown.Item>
<NavDropdown.Item href="/about">Our Story</NavDropdown.Item>
<NavDropdown.Item href="/about">Our Team</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Festival" id="basic-nav-dropdown">
<NavDropdown.Item href="/labs">Labs</NavDropdown.Item>
<NavDropdown.Item href="/pinolis">Pinolis</NavDropdown.Item>
<NavDropdown.Item href="/filmcontest">Film Contest</NavDropdown.Item>
<NavDropdown.Item href="/minivents">Minivents</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/blog" id="navbar-link">Blog</Nav.Link>
<Nav.Link href="/faq" id="navbar-link">FAQ</Nav.Link>
<Nav.Link href="/rsvp" className='rsvp-button' id="navbar-link">RSVP</Nav.Link>
<NavDropdown title="Language" id="basic-nav-dropdown" className="justify-content-end">
<NavDropdown.Item href="">English</NavDropdown.Item>
<NavDropdown.Item href="">Italian</NavDropdown.Item>
</NavDropdown>
</Nav>

</Navbar.Collapse>
</Container>
</Navbar>
</div>
}
}

export default NavbarGlobal;
91 changes: 91 additions & 0 deletions src/global-components/NavbarGlobal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@

.navbar{
background-color: #FFFFFF;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 50px 50px;

.me-auto{
font-family: 'Poppins';
font-weight: 700;
font-size: 20px;
line-height: 22px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #000000;
}

#basic-nav-dropdown {
color: #000000;
}

#navbar-link{
color: #000000;
}

.left-logo{
font-family: 'Londrina Solid';
font-weight: 400;
font-size: 32px;
line-height: 38px;
letter-spacing: 0.25px;
color: #323338;
}

}

@media (min-width: 1200px){
.navbar{
background-color: #FFFFFF;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 50px 50px;

.me-auto{
font-family: 'Poppins';
font-weight: 700;
font-size: 20px;
line-height: 22px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #000000;
}

#basic-nav-dropdown {
color: #000000;
}

#navbar-link{
color: #000000;
}

.left-logo{
font-family: 'Londrina Solid';
font-weight: 400;
font-size: 32px;
line-height: 38px;
letter-spacing: 0.25px;
color: #323338;
margin-right: 30%;
}

.rsvp-button{
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #FFFFFF;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 20px;
width: 80px;
height: 46px;
gap: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 69.78%), #69088D;
box-shadow: 0px 4px 3px rgba(47, 4, 63, 0.7);
border-radius: 16px;
margin-right: 10px;
margin-left: 30%;
}
}
}
9 changes: 7 additions & 2 deletions src/home-page/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import './Home.scss';
import React, { Component } from 'react';
import UserTest from './UserTest';
import NLSubscribe from './NLSubscribe';
import NavbarGlobal from '../global-components/NavbarGlobal';

class Home extends Component {
render() {
return <div>
return <div className='mainhome-container'>
<NavbarGlobal/>
<div>Home</div>
<UserTest />
<NLSubscribe />
<div>
<NLSubscribe />
</div>
</div>
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/home-page/Home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.mainhome-container{
background-color: black;
}
105 changes: 0 additions & 105 deletions src/home-page/NLSubscribe.css
View file
Open in desktop

This file was deleted.

32 changes: 18 additions & 14 deletions src/home-page/NLSubscribe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React, { Component } from 'react';
import './NLSubscribe.css';
import './NLSubscribe.scss';
import SubscribeImage from '../images/SubscribeImage.png';
import {TextField, Button} from 'monday-ui-react-core';
import Grid from '@mui/material/Grid';
// import Item from '@mui/material/Item';

class NLSubscribe extends Component {
render() {
return <div className='main-container'>
<div className='left-container'>
<img src={SubscribeImage} />
</div>
<div className='right-container'>
<div className='inner-container'>
<div className='upper-subtitle'>exchanges of letters, our newsletter</div>
<div className='title'>Scambi Epistolari</div>
<div className='lower-subtitle'>Join the conversation - sign up now to receive updates on Scambi activities.</div>
<div className='email-fields'>
<input className='textfield' type="text" placeholder="Email" />
<button className='submit-button'>Submit</button>
</div>
return <div>
<div className='main-container'>
<div className='left-container'>
<img className="left-image" src={SubscribeImage} />
</div>
<div className='right-container'>
<div className='inner-container'>
<div className='upper-subtitle'>exchanges of letters, our newsletter</div>
<div className='title'>Scambi Epistolari</div>
<div className='lower-subtitle'>Join the conversation - sign up now to receive updates on Scambi activities.</div>
<div className='email-fields'>
<input className='text-field' type="text" placeholder="Email" />
<button className='submit-button'>Submit</button>
</div>
</div>
</div>
</div>
</div>
}
Expand Down
Loading