Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg width="1440" viewBox="0 0 1440 1024" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
	svg {
max-width: 100%;
}
a:not(.link_active) {
  fill: #fff;
  transition: 0.5s;
  text-decoration: underline;
}
a:hover:not(.link_active) {
  fill: #b2b2b2;
}
a text {
  fill: inherit;
}
.link_active {
  fill: #FBFF2E;
  cursor: default;
}
.main_part {
  opacity: 0;
}
.visible {
  opacity: 1;
  transition: opacity 0.7s;
}
.hide {
  opacity: 0;
  transition: opacity 0.7s;
}
.coas {
  opacity: 0.5;
}
.coa_active {
  opacity: 1;
}
<!-- 	@media screen and (min-width: 600px){
		.ad-image { transform: scale(1) }
	} -->
	</style>
  <g id="spa_v1" clip-path="url(#clip0)">
<rect width="1440" height="1024" fill="white"/>
<g id="header">
    <rect width="1440" height="150" fill="white"/>
    <g id="bgc">
        <rect id="Rectangle" y="50" width="1440" height="50" fill="#F34949"/>
        <rect id="Rectangle 2" x="93" width="100" height="150" fill="#F34949"/>
    </g>
    <g id="menu" clip-path="url(#clip0)" font-family="Bowlby One SC" font-size="32">
        <a xlink:href="london" class="link_active">
        <text id="LONDON" fill="white" xml:space="preserve" style="white-space: pre" letter-spacing="0em"><tspan x="425" y="86.5625">LONDON</tspan></text>
        </a>
        <a xlink:href="liverpool">
        <text id="LIVERPOOL" fill="white" xml:space="preserve" style="white-space: pre"  letter-spacing="0em"><tspan x="596" y="86.5625">LIVERPOOL</tspan></text>
        </a>
        <a xlink:href="manchester">
        <text id="MANCHESTER" fill="white" xml:space="preserve" style="white-space: pre"  letter-spacing="0em"><tspan x="821" y="86.5625">MANCHESTER</tspan></text>
        </a>
        <a xlink:href="birmingham">
        <text id="BIRMINGHAM" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC"  letter-spacing="0em"><tspan x="1090" y="86.5625">BIRMINGHAM</tspan></text>
        </a>
    </g>
</g>
<g id="aside_crane" clip-path="url(#clip2)">
    <rect width="300" height="874" transform="translate(0 148)" fill="white"/>
    <rect id="bgc_2" x="93" y="146" width="100" height="876" fill="#F34949"/>
    <path id="Polygon" d="M131 184L176 158.019V209.981L131 184Z" fill="white"/>
    <path id="Polygon_2" d="M157 224L112 198.019V249.981L157 224Z" fill="white"/>
    <path id="Polygon_3" d="M131 260L176 234.019V285.981L131 260Z" fill="white"/>
    <path id="Polygon_4" d="M157 300L112 274.019V325.981L157 300Z" fill="white"/>
    <path id="Polygon_5" d="M131 336L176 310.019V361.981L131 336Z" fill="white"/>
    <path id="Polygon_6" d="M157 376L112 350.019V401.981L157 376Z" fill="white"/>
    <path id="Polygon_7" d="M131 412L176 386.019V437.981L131 412Z" fill="white"/>
    <path id="Polygon_8" d="M157 452L112 426.019V477.981L157 452Z" fill="white"/>
    <path id="Polygon_9" d="M131 488L176 462.019V513.981L131 488Z" fill="white"/>
    <path id="Polygon_10" d="M157 528L112 502.019V553.981L157 528Z" fill="white"/>
    <path id="Polygon_11" d="M131 564L176 538.019V589.981L131 564Z" fill="white"/>
    <path id="Polygon_12" d="M157 604L112 578.019V629.981L157 604Z" fill="white"/>
    <path id="Polygon_13" d="M131 640L176 614.019V665.981L131 640Z" fill="white"/>
    <path id="Polygon_14" d="M157 680L112 654.019V705.981L157 680Z" fill="white"/>
    <path id="Polygon_15" d="M131 716L176 690.019V741.981L131 716Z" fill="white"/>
    <path id="Polygon_16" d="M157 756L112 730.019V781.981L157 756Z" fill="white"/>
    <path id="Polygon_17" d="M131 792L176 766.019V817.981L131 792Z" fill="white"/>
    <path id="Polygon_18" d="M157 832L112 806.019V857.981L157 832Z" fill="white"/>
    <path id="Polygon_19" d="M131 868L176 842.019V893.981L131 868Z" fill="white"/>
</g>
<g id="aside" clip-path="url(#clip3)">
    <rect width="300" height="874" transform="translate(0 148)" fill="white"/>
    <rect id="bgc_3" x="93" y="146" width="100" height="876" fill="#F34949"/>
    <g id="coas">
        <rect id="coa_london" class="coas coa_active" x="60" y="145" width="180" height="180" fill="url(#p_london)"/>
        <rect id="coa_birmingham" class="coas" x="60" y="742" width="180" height="180" fill="url(#p_birmingham)"/>
        <rect id="coa_manchester" class="coas" x="60" y="543" width="180" height="180" fill="url(#p_manchester)"/>
        <rect id="coa_liverpool" class="coas" x="60" y="344" width="180" height="180" fill="url(#p_liverpool)"/>
    </g>
</g>
<g id="footer" clip-path="url(#clip4)">
    <rect width="1140" height="50" transform="translate(300 924)" fill="#121111"/>
    <g id="bottom-menu" clip-path="url(#clip5)" font-family="Bowlby One SC" font-size="32">
    <a xlink:href="about">
    <text id="ABOUT" fill="white" xml:space="preserve" style="white-space: pre" letter-spacing="0em"><tspan x="809" y="961.562">ABOUT</tspan></text>
    </a>
    <a xlink:href="construction">
    <text id="CONTACTS" fill="white" xml:space="preserve" style="white-space: pre" letter-spacing="0em"><tspan x="947" y="961.562">CONTACTS</tspan></text>
    </a>
    <a xlink:href="construction">
    <text id="FEEDBACK" fill="white" xml:space="preserve" style="white-space: pre" letter-spacing="0em"><tspan x="1153" y="961.562">FEEDBACK</tspan></text>
    </a>
    </g>
    <text id="COPYRIGHT 2019" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="32" letter-spacing="0em"><tspan x="424" y="961.562">COPYRIGHT 2019</tspan></text>
</g>
<g id="main_construction" class="main_part">
    <rect width="1140" height="774" transform="translate(300 143)" fill="white"/>
    <rect id="hero-image" x="525" y="463" width="915" height="215" fill="url(#pattern4)"/>
    <g id="title">
    <rect id="Rectangle_6" x="525" y="592" width="682" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="UNDER CONSTRUCTION" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="559" y="645.344">UNDER CONSTRUCTION</tspan></text>
    </g>
    <circle id="Ellipse" cx="946.5" cy="288.5" r="15" stroke="black" stroke-width="5"/>
    <g id="Group" opacity="0.9">
    <path id="Ellipse 2" d="M934 314C934 319.523 938.477 324 944 324C949.523 324 954 319.523 954 314" stroke="black" stroke-width="4"/>
    <path id="Ellipse 2.1" d="M944 304C949.523 304 954 308.477 954 314" stroke="black" stroke-width="4"/>
    </g>
    <line id="Line" x1="947.481" y1="321.421" x2="525.481" y2="464.421" stroke="black" stroke-width="3"/>
    <line id="Line 2" x1="946.423" y1="321.561" x2="1432.42" y2="464.561" stroke="black" stroke-width="3"/>
    <line id="Line 3" x1="931.5" y1="141" x2="931.5" y2="287" stroke="black" stroke-width="5"/>
    <line id="Line 3.1" x1="961.5" y1="141" x2="961.5" y2="287" stroke="black" stroke-width="5"/>
</g>
<g id="main_about" class="main_part">
    <rect width="1140" height="774" transform="translate(300 148)" fill="white"/>
    <rect id="hero-image_2" x="425" y="148" width="915" height="215" fill="url(#pattern5)"/>
    <g id="title_2">
    <rect id="Rectangle_7" x="425" y="277" width="382" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="THANK YOU" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="452" y="330.344">THANK YOU</tspan></text>
    </g>
    <text fill="black" xml:space="preserve" style="white-space: pre" font-family="Baumans" font-size="24" letter-spacing="0em"><tspan x="425" y="410.608">https://pexels.com&#10;</tspan><tspan x="425" y="445.394">https://pixabay.com&#10;</tspan><tspan x="425" y="480.181">https://www.wikipedia.org/&#10;</tspan><tspan x="425" y="514.967">https://fonts.google.com/</tspan></text>
</g>
<g id="main_birmingham" class="main_part">
    <rect width="1140" height="774" transform="translate(313 148)" fill="white"/>
    <rect id="hero-image_3" x="438" y="148" width="915" height="215" fill="url(#pattern6)"/>
    <g id="title_3">
    <rect id="Rectangle_8" x="438" y="277" width="427" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="BIRMINGHAM_2" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="465" y="330.344">BIRMINGHAM </tspan></text>
    </g>
    <text fill="black" xml:space="preserve" style="white-space: pre" font-family="Baumans" font-size="24" letter-spacing="0em"><tspan x="438" y="410.608">The resulting high level of social mobility also fostered a culture of political radicalism </tspan><tspan x="438" y="440.394">which, under leaders from Thomas Attwood to Joseph Chamberlain, was to give it a </tspan><tspan x="438" y="470.181">political influence unparalleled in Britain outside London, and a pivotal role in the </tspan><tspan x="438" y="499.967">development of British democracy. From the summer of 1940 to the spring of 1943, </tspan><tspan x="438" y="529.754">Birmingham was bombed heavily by the German Luftwaffe in what is known as the </tspan><tspan x="438" y="559.54">Birmingham Blitz. The damage done to the city&#39;s infrastructure, in addition to a </tspan><tspan x="438" y="589.326">deliberate policy of demolition and new building by planners, led to extensive urban </tspan><tspan x="438" y="619.113">regeneration in subsequent decades.&#10;</tspan><tspan x="438" y="653.899">Birmingham&#39;s economy is now dominated by the service sector. The city is a major </tspan><tspan x="438" y="683.686">international commercial centre, ranked as a gamma+ world city by the Globalization </tspan><tspan x="438" y="713.472">and World Cities Research Network; and an important transport, retail, events and </tspan><tspan x="438" y="743.258">conference hub. Its metropolitan economy is the second largest in the United Kingdom </tspan><tspan x="438" y="773.045">with a GDP of $121.1bn (2014), and its six universities make it the largest centre of higher </tspan><tspan x="438" y="802.831">education in the country outside London. Birmingham&#39;s major cultural institutions &#x2013; the </tspan><tspan x="438" y="832.618">City of Birmingham Symphony Orchestra, the Birmingham Royal Ballet, the Birmingham </tspan><tspan x="438" y="862.404">Repertory Theatre, the Library of Birmingham and the Barber Institute of Fine Artshe UK  .</tspan></text>
</g>
<g id="main_manchester" class="main_part">
    <rect width="1140" height="774" transform="translate(300 148)" fill="white"/>
    <rect id="hero-image_4" x="425" y="148" width="915" height="215" fill="url(#pattern7)"/>
    <g id="title_4">
    <rect id="Rectangle_9" x="425" y="277" width="427" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="MANCHESTER_2" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="452" y="330.344">MANCHESTER</tspan></text>
    </g>
    <text fill="black" xml:space="preserve" style="white-space: pre" font-family="Baumans" font-size="24" letter-spacing="0em"><tspan x="425" y="410.608">The recorded history of Manchester began with the civilian settlement associated with </tspan><tspan x="425" y="440.394">the Roman fort of Mamucium or Mancunium, which was established in about AD 79 on a </tspan><tspan x="425" y="470.181">sandstone bluff near the confluence of the rivers Medlock and Irwell. It was historically a </tspan><tspan x="425" y="499.967">part of Lancashire, although areas of Cheshire south of the River Mersey were </tspan><tspan x="425" y="529.754">incorporated in the 20th century. The first to be included, Wythenshawe, was added to </tspan><tspan x="425" y="559.54">the city in 1931. Throughout the Middle Ages Manchester remained a manorial township, </tspan><tspan x="425" y="589.326">but began to expand &#34;at an astonishing rate&#34; around the turn of the 19th century. </tspan><tspan x="425" y="619.113">Manchester&#39;s unplanned urbanisation was brought on by a boom in textile manufacture </tspan><tspan x="425" y="648.899">during the Industrial Revolution, and resulted in it becoming the world&#39;s first </tspan><tspan x="425" y="678.686">industrialised city.&#10;</tspan><tspan x="425" y="713.472">Manchester achieved city status in 1853. The Manchester Ship Canal opened in 1894, </tspan><tspan x="425" y="743.258">creating the Port of Manchester and directly linking the city to the Irish Sea, 36 miles (58 </tspan><tspan x="425" y="773.045">km) to the west. Its fortune declined after the Second World War, owing to </tspan><tspan x="425" y="802.831">deindustrialisation, but the IRA bombing in 1996 led to extensive investment and </tspan><tspan x="425" y="832.618">regeneration.</tspan></text>
</g>
<g id="main_liverpool" class="main_part">
    <rect width="1140" height="774" transform="translate(300 148)" fill="white"/>
    <rect id="hero-image_5" x="425" y="148" width="915" height="215" fill="url(#pattern8)"/>
    <g id="title_5">
    <rect id="Rectangle_10" x="425" y="277" width="350" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="LIVERPOOL_2" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="452" y="330.344">LIVERPOOL</tspan></text>
    </g>
    <text fill="black" xml:space="preserve" style="white-space: pre" font-family="Baumans" font-size="24" letter-spacing="0em"><tspan x="425" y="410.608">The popularity of the Beatles and other music groups from the Merseybeat era </tspan><tspan x="425" y="440.394">contributes to Liverpools status as a tourist destination. Liverpool is also the home of </tspan><tspan x="425" y="470.181">two Premier League football clubs, Liverpool and Everton, matches between the two </tspan><tspan x="425" y="499.967">being known as the Merseyside derby. The Grand National horse race takes place </tspan><tspan x="425" y="529.754">annually at Aintree Racecourse on the outskirts of the city.&#10;</tspan><tspan x="425" y="564.54">The city celebrated its 800th anniversary in 2007. In 2008, it was nominated as the </tspan><tspan x="425" y="594.326">annual European Capital of Culture together with Stavanger, Norway. Several areas of </tspan><tspan x="425" y="624.113">the city centre were granted World Heritage Site status by UNESCO in 2004. The </tspan><tspan x="425" y="653.899">Liverpool Maritime Mercantile City includes the Pier Head, Albert Dock, and William </tspan><tspan x="425" y="683.686">Brown Street. Liverpools status as a port city has attracted a diverse population, </tspan><tspan x="425" y="713.472">which, historically, was drawn from a wide range of peoples, cultures, and religions, </tspan><tspan x="425" y="743.258">particularly from Ireland and Wales. The city is also home to the oldest Black African </tspan><tspan x="425" y="773.045">community in the country and the oldest Chinese community in Europe.&#10;</tspan><tspan x="425" y="807.831">Natives and residents of the city of Liverpool are referred to as Liverpudlians, and </tspan><tspan x="425" y="837.618">colloquially as Scousers, a reference to scouse, a form of stew. The word Scouse has </tspan><tspan x="425" y="867.404">also become synonymous with the Liverpool accent and dialect.</tspan></text>
</g>
<g id="main_london" class="main_part visible">
    <rect width="1140" height="774" transform="translate(300 148)" fill="white"/>
    <rect id="hero-image_6" x="425" y="148" width="915" height="215" fill="url(#pattern9)"/>
    <g id="title_6">
    <rect id="Rectangle_11" x="425" y="277" width="300" height="75" fill="#121111" fill-opacity="0.6"/>
    <text id="LONDON_2" fill="white" xml:space="preserve" style="white-space: pre" font-family="Bowlby One SC" font-size="48" letter-spacing="0em"><tspan x="462" y="330.344">LONDON</tspan></text>
    </g>
    <text fill="#121111" xml:space="preserve" style="white-space: pre" font-family="Baumans" font-size="24" letter-spacing="0em"><tspan x="425" y="410.608">London has a diverse range of people and cultures, and more than 300 languages are </tspan><tspan x="425" y="440.394">spoken in the region. Its estimated mid-2016 municipal population (corresponding to </tspan><tspan x="425" y="470.181">Greater London) was 8,787,892, the largest of any city in the European Union and </tspan><tspan x="425" y="499.967">accounting for 13.4% of the UK population. London&#39;s urban area is the second most </tspan><tspan x="425" y="529.754">populous in the EU, after Paris, with 9,787,426 inhabitants at the 2011 census. The city&#39;s </tspan><tspan x="425" y="559.54">metropolitan area is the most populous in the EU with 14,040,163 inhabitants in 2016, </tspan><tspan x="425" y="589.326">while the Greater London Authority states the population of the city-region as 22.7 </tspan><tspan x="425" y="619.113">million. London was the world&#39;s most populous city from around 1831 to 1925.&#10;</tspan><tspan x="425" y="653.899">London contains four World Heritage Sites: the Tower of London; Kew Gardens; the site </tspan><tspan x="425" y="683.686">comprising the Palace of Westminster, Westminster Abbey, and St Margaret&#39;s Church; </tspan><tspan x="425" y="713.472">and the historic settlement of Greenwich (in which the Royal Observatory, Greenwich </tspan><tspan x="425" y="743.258">defines the Prime Meridian, 0&#xb0; longitude, and GMT). Other landmarks include </tspan><tspan x="425" y="773.045">Buckingham Palace, the London Eye, Piccadilly Circus, St Paul&#39;s Cathedral, Tower Bridge, </tspan><tspan x="425" y="802.831">Trafalgar Square and The Shard. London is home to numerous museums, galleries, </tspan><tspan x="425" y="832.618">libraries, sporting events and other cultural institutions, including the British Museum, </tspan><tspan x="425" y="862.404">National Gallery, Natural History Museum, Tate Modern, British Library and West End </tspan><tspan x="425" y="892.19">theatres. </tspan></text>
</g>
</g>
  <defs>
    <pattern id="p_birmingham" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image0" transform="translate(0 -0.146875) scale(0.00125)"/>
    </pattern>
    <pattern id="p_manchester" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image1" transform="translate(-0.0532787) scale(0.000745156)"/>
    </pattern>
    <pattern id="p_liverpool" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image2" transform="translate(-0.0470588) scale(0.00294118)"/>
    </pattern>
    <pattern id="p_london" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image3" transform="translate(-0.00561798) scale(0.00561798)"/>
    </pattern>
    <pattern id="pattern4" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image4" transform="translate(-0.00330933 -1.49217) scale(0.00078125 0.00303558)"/>
    </pattern>
    <pattern id="pattern5" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image5" transform="translate(-0.000502132 -1.08597) scale(0.00078125 0.00331316)"/>
    </pattern>
    <pattern id="pattern6" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image6" transform="translate(0.00165013 0.0131857) scale(0.00078125 0.00331316)"/>
    </pattern>
    <pattern id="pattern7" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image7" transform="translate(0 -0.576718) scale(0.00078125 0.00309204)"/>
    </pattern>
    <pattern id="pattern8" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image8" transform="translate(0 -0.724194) scale(0.00078125 0.00332485)"/>
    </pattern>
    <pattern id="pattern9" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image9" transform="translate(0 -0.0713284) scale(0.000913242 0.00388659)"/>
    </pattern>
    <clipPath id="clip0">
    <rect width="1440" height="1024" fill="white"/>
    </clipPath>
    <clipPath id="clip1">
    <rect width="915" height="50" fill="white" transform="translate(425 50)"/>
    </clipPath>
    <clipPath id="clip2">
    <rect width="300" height="874" fill="white" transform="translate(0 148)"/>
    </clipPath>
    <clipPath id="clip3">
    <rect width="300" height="874" fill="white" transform="translate(0 148)"/>
    </clipPath>
    <clipPath id="clip4">
    <rect width="1140" height="50" fill="white" transform="translate(300 924)"/>
    </clipPath>
    <clipPath id="clip5">
    <rect width="540" height="51" fill="white" transform="translate(798 923)"/>
    </clipPath>
    <clipPath id="clip6">
    <rect width="1140" height="774" fill="white" transform="translate(300 143)"/>
    </clipPath>
    <image id="image0" width="800" height="1035" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549708693/spa-svg/s-coa_birmingham.png"/>
    <image id="image1" width="1485" height="1342" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549708333/spa-svg/s-coa_manchester.png"/>
    <image id="image2" width="372" height="340" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549705757/spa-svg/coa_liverpool.png"/>
    <image id="image3" width="180" height="178" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549626012/spa-svg/london_coa.png"/>
    <image id="image4" width="1280" height="931" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701716/spa-svg/uc.jpg"/>
    <image id="image5" width="1280" height="853" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701716/spa-svg/thanks.jpg"/>
    <image id="image6" width="1280" height="853" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701716/spa-svg/birmingham.jpg"/>
    <image id="image7" width="1280" height="914" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701716/spa-svg/manchester.jpg"/>
    <image id="image8" width="1280" height="850" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701716/spa-svg/liverpool.jpg"/>
    <image id="image9" width="1095" height="294" xlink:href="https://res.cloudinary.com/alnat2/image/upload/v1549701640/spa-svg/london.jpg"/>
</defs>
  <script>
    const pageElements = {
  links_class: 'link_active',
  unhide_class: 'visible',
  hide_class: 'hide',
  coas_class: 'coa_active'
};
pageElements.links = document.querySelectorAll('#menu a, #bottom-menu a');
pageElements.mains = document.querySelectorAll('.main_part');
pageElements.coas = document.querySelectorAll('.coas');
pageElements.aside = document.getElementById('aside');

pageElements.links.forEach(i => i.addEventListener('click', e => pageUpdate(e, pageElements)));

function pageUpdate(e, obj) {
  e.preventDefault();
  classRemove(obj.mains, obj.unhide_class);
  classRemove(obj.links, obj.links_class);
  classRemove(obj.coas, obj.coas_class);
  elementActivate(e, obj);
  window.scrollTo({
  top: 0,
  behavior: 'smooth'
});
}
function elementActivate(e, obj) {
  if (e.currentTarget.parentNode.id === 'menu') {
    const firstCoa = obj.coas[0].getAttribute('fill');
    const clickedCoa = `url(#p_${e.currentTarget.getAttribute('xlink:href')})`;
    obj.coas[0].setAttribute('fill', clickedCoa);
    classAdd(obj.coas[0], obj.coas_class);
    for (let i = 1; i < obj.coas.length; i++) {
      if (obj.coas[i].getAttribute('fill') === clickedCoa) {
        obj.coas[i].setAttribute('fill', firstCoa);
        break;
      }
    }
  }
  if (e.currentTarget.getAttribute('xlink:href') === 'construction') {
    classRemove(obj.aside, obj.unhide_class);
    classAdd(obj.aside, obj.hide_class);
  } else {
    classRemove(obj.aside, obj.hide_class);
    classAdd(obj.aside, obj.unhide_class);
  }
  classAdd(e.currentTarget, obj.links_class);
  for (let i = 0; i < obj.mains.length; i++) {
    if (obj.mains[i].id === `main_${e.currentTarget.getAttribute('xlink:href')}`) {
      classAdd(obj.mains[i], obj.unhide_class);
      break;
    }
  }
};
function classAdd(elm, cls) {
  elm.classList.add(cls);
}
function classRemove(arr, cls) {
  if (arr instanceof NodeList) {
    arr.forEach(i => i.classList.remove(cls));
    return;
  }
  arr.classList.remove(cls);
}
  </script>
</svg>
              
            
!

CSS

              
                body {margin: 0;}
              
            
!

JS

              
                
              
            
!
999px

Console