A Pen by Calvin
How do I make an a pen by calvin?
What is a a pen by calvin? How do you make a a pen by calvin? This script and codes were developed by Calvin on 11 August 2022, Thursday.
A Pen by Calvin Previews
A Pen by Calvin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Calvin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html><head> <title>Counterspace</title> <!-- Favicon --> <link rel="icon" type="image/ico" href="favicon.ico"> <!-- Meta --> <meta name="keywords" content="counterspace, johannesburg, south africa, architecture"> <meta name="description" content="A Johannesburg-based collaborative studio of young architecture graduates"> <meta charset="UTF-8"> <meta name="author" content="Henn+Honeyball"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <!-- <script type="text/javascript" src="js/jquery-1.12.2.min.js?v=1.1"></script> <script type="text/javascript" src="js/swiper.min.js?v=1.1"></script> <script type="text/javascript" src="js/velocity.min.js?v=1.1"></script> <script type="text/javascript" src="js/script.js?v=3.1"></script> <style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{ visibility: hidden !important;
}
</style> --> </head> <body> <div class="scrolling"> <header> <div class="frame clear"> <a href="http://counterspace-studio.com/" title="Counterspace"><h1 class="mainLogo left">Calvin Morett</h1></a> <a class="contactBtn right">Contact</a> <a class="mobileModalContact right">Contact</a> <div class="clear"></div> </div> </header> <div id="main-container" class="scroll-pane"> <!-- Mobile Styles Menu --> <div class="mobileMenu"> <a href="#" class="mobileMenuItem mobileModal1" title="About">About</a> <a href="#" class="mobileMenuItem mobileModal5" title="Projects">Over here</a> </div> <!-- Mobile Containers --> <!-- About --> <div class="mobileContainer mobileModalBox1"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">About</h2> <div class="mobileModalContent"> <p>Counterspace is a Johannesburg-based collaborative studio of young architecture graduates, established in 2014 by Sarah de Villiers, Amina Kaskar and Sumayya Vally. Counterspace is dedicated to research-based projects, which take the form of exhibition design, competition work, urban insurgency, and public events. Their work is predominantly concerned with ideas for future and otherness; playing with image and narrative as a means of deconstructing and reconstructing space and city, ultimately with the aim to incite provocative thought around perceptions of Johannesburg.</p> <p>In 2015, the firm was invited to participate in the inaugural Chicago Architecture Biennial, where they showcased their work entitled ‘Lost and Found’, in collaboration with photographer Jason Larkin. Counterspace has also been involved in a multitude of graphic and curatorial work with Local Studio, and the School of Architecture and Planning at the University of the Witwatersrand; as well as intensive social-spatial research on the eastern peripheries of Johannesburg CBD.</p> <p class="underlined"><strong>Online Media Links:</strong><br> Uncubed Magazine<br> 2015<br> <a href="http://www.uncubemagazine.com/blog/">‘From Agency to Urgency: Experiments in the Impossible at the first Chicago Architecture biennial’</a></p> <p class="underlined">The Huffington Post: Arts and Culture<br> 2015<br> <a href="http://www.huffingtonpost.com/patricia-zohn/culturezohn-chicago-showsoff_b_8246060.html">‘Chicago Shows-off; CultureZohn’</a></p> <p class="underlined">Future Cape Town<br> 6 April 2016<br> <a href="http://futurecapetown.com/2016/04/counterspace-a-new-way-of-practising-architecture-future-cape-town/">‘Counterspace: A new way of practising architecture’</a></p> <p class="underlined">Chicago Architecture Biennial<br> 23 November 2016<br> <a href="http://chicagoarchitecturebiennial.org/exhibition/participants/counterspace/">‘Counterspace: What is urgent?’</a></p> <p>Design Indaba<br> 14 March 2016<br> <a href="http://www.designindaba.com/tags/counterspace">‘Architects investigate Johannesburg’s abandoned mine dumps’</a></p> </div> </div> </div> <!-- Exhibitions --> <div class="mobileContainer mobileModalBox2"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">Exhibitions</h2> <div class="mobileModalContent"> <p class="underlined">Counterspace has participated in production and curation of a multitude of exhibitions, their skill set involving graphic design, technical drawing and rendering, book layout design, writing, display stand design, supplier liaison and installation & project management. They have been involved in the following projects:</p> <p class="underlined">La Biennale di Venezia, South African Pavillion<br> May 2014 – November 2014<br> Sale d’Armi, Venice<br> S. Vally as assistant curator</p> <p class="underlined">‘Wits ArchiMart’<br> May 2015<br> Point of Order, Braamfontein<br> S. de Villiers, B. Hirson M. Flanagan, A. Kaskar, S. Vally<br> An exhibition of works by the Master of Architecture class of 2014 at the University of the Witwatersrand.</p> <p class="underlined">National Corobrik Exhibition: Idea Bank<br> April 2015<br> Maslow Hotel Sandton<br> S. de Villiers<br> An exhibition of regional entry to the annual national architecture competition of competing architectural schools around South Africa.</p> <p class="underlined">‘Lost and Found’ S. de Villiers, A. Kaskar, S. Vally<br> October 2015 - January 2016. Chicago Cultural Centre.</p> <p class="underlined">‘Additions and Alterations’ Johannesburg<br> November 2015<br> Fourthwall Books Braamfontein<br> S. de Villiers, M. Flanagan, A. Kaskar, S. Vally<br> An exhibition of recent works by Johannesburg architecture firm, Local Studio.</p> <p class="underlined">‘Additions and Alterations’ Cape Town<br> February 2016<br> The Architect, Cape Town City Centre<br> S. de Villiers, M. Flanagan, A. Kaskar, S. Vally<br> An exhibition of recent works by Johannesburg architecture firm, Local Studio.</p> <p>‘ShowOff Exhibition 2016’ Johannesburg<br> April 2016, Fox Street Studios, Maboneng, Johannesburg.<br> S. de Villiers, A. Kaskar, S. Vally. <br> An exhibition of recent works by Johannesburg collocated firms UrbanWorks, Lorenzo Nassimbeni, Parts and Labour and Counterspace.</p> </div> </div> </div> <!-- Team --> <div class="mobileContainer mobileModalBox3"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">Team</h2> <div class="mobileModalContent"> <!-- Sarah --> <p><strong>Sarah de Villiers</strong><br> <span class="teamMemberQual">M.arch (prof) (Wits)</span><br>Counterspace Johannesburg</p> <p><a href="mailto:[email protected]" title="Email Sarah">[email protected]</a><br> Instagram: se_dv<br> +27 84 958 1969</p> <p class="underlined">In her submittal of her thesis for Masters of Architecture; entitled “Idea Bank: From Watt Street to Wall Street, Wynberg Johannesburg” (University of the Witwatersrand), Sarah made use of various spatial and artistic modes for exploration, offering re-imaginings of versions of social exchange; and exploring of the fantastical heterotopias of money spaces and their power in the city. The thesis won the regional Corobrik of the Year award for 2014. Sarah’s entry in the ‘Bluprints of Paradise’ competition held in the Netherlands; which dealt with reconceptualising the future of suburban utopia, received an honourable mention award in 2010.</p> <!-- Amina --> <p><strong>Amina Kaskar</strong><br> <span class="teamMemberQual">M.arch (prof) (Wits)</span><br>Counterspace Johannesburg</p> <p><a href="mailto:[email protected]" title="Email Sarah">[email protected]</a><br> Instagram: amina_kaskar<br> +27 83 301 0996</p> <p class="underlined">With particular interests embedded in textual and semantic understandings of a city’s layering; Amina provides valuable agility in handling symbolic analyses of urban fabric; and decoding. Her thesis, completed in 2014; illustrates this agility fully; where the stories and myths of Doornfontein, Johannesburg, are rewrapped and rescripted into new forms of digital urban story telling. Following completion of her thesis, Amina was awarded a travelling bursary to Pune, India; in January 2015, under the ‘Study India Programme’.</p> <!-- Sumayya --> <p><strong>Sumayya Vally</strong><br> <span class="teamMemberQual">M.arch (prof) (Wits)</span><br>Counterspace Johannesburg</p> <p><a href="mailto:[email protected]" title="Email Sarah">[email protected]</a><br> Instagram: sumi_v<br> +27 82 754 4551</p> <p>Digital collage and a forensic approach to space expose Sumayya’s particular obsession with future ruin; fictional future space; pitted against the ever emerging and disappearing image of Johannesburg. Whether unpacking the city through a microscope; or satellite imagery; Sumayya has a particular interest in exposing parts of its constituency which are largely invisible. Her interests have admitted her into a host of prominent conceptual/investigatory projects; including a position as assistant curator and film producer for La Biennale di Venezia 2014 (South African Pavilion). Sumayya currently teaches at the University of Johannesburg; tutoring Unit 12 of the Graduate School of Architecture (as part of CROSSINGS, a three-year research on the ‘edges’ of Africa, headed by Dr. Lesley Lokko).</p> </div> </div> </div> <!-- Collaborators --> <div class="mobileContainer mobileModalBox4"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">Collaborators</h2> <div class="mobileModalContent"> <p>Counterspace pursues work which involves collaboration with a wide spectrum of artists, researchers, architects and urban practitioners; in an effort to access space and the city through unconventional avenues. People we have worked with in the past include:</p> <!-- Spatial Practitioners --> <p class="underlined"><strong>Spacial Practitioners:</strong><br> <a href="#" title="1to1 Agency for Engagement (Auret Street Recycling Project, Local Studio Exhibition, Wits Archimart, DIZ Hub)">1to1 Agency for Engagement</a><br> <a href="http://www.atmosstudio.com/" title="Atmos Studio">Atmos Studio</a><br> <a href="https://www.linkedin.com/in/blanca-calvo-boixet-764b9b67" title="Blanca Calvo Boixet (Wits Archimart)">Blanca Calvo Boixet</a><br> <a href="https://www.linkedin.com/in/brett-hirson-87945145" title="Brett Hirson (Wits Archimart)">Brett Hirson</a><br> <a href="http://futurecapetown.com/" title="Future Cape Town (Local Studio Exhibition, Cape Town)">Future Cape Town</a><br> <a href="https://www.linkedin.com/in/ssmayson" title="Simon Mayson (Auret Street Recycling Project)">Simon Mayson</a><br> <a href="#" title="Stephen Steyn (Wits Archimart)">Stephen Steyn</a><br> <a href="http://www.localstudio.co.za/" title="Thomas Chapman, Local Studio (Local Studio Exhibition)">Thomas Chapman</a><br> <a href="http://urbanworks.co.za/" title="Urban Works (ThinOrange)">Urban Works</a></p> <!-- Photographers --> <p class="underlined"><strong>Photographers:</strong><br> <a href="http://davesouthwood.com/" title="Dave Southwood (Local Studio Exhibition)">Dave Southwood</a><br> <a href="#" title="Jabulani Khwela (Auret Street Recycling Project)">Jabulani Khwela</a><br> <a href="http://jasonlarkin.co.uk/" title="Jason Larkin (Lost and Found: Chicago Architecture Biennial)">Jason Larkin</a><br> <a href="#" title="Melissa Bennett (Wits Archimart Local Studio Exhibition)">Melissa Bennett</a></p> <!-- Artists --> <p class="underlined"><strong>Artists:</strong><br> <a href="http://wsoa.wits.ac.za/fine-arts/bettina-malcomess/" title="Bettina Malcomess (Lost and Found: Chicago Architecture Biennial)">Bettina Malcomess</a><br> <a href="http://www.hennhoneyball.com/" title="Henn+Honeyball (Web Design)">Henn+Honeyball</a><br> <a href="http://iomakandal.com/" title="Io Makandal Scheiss (Wits Archimart)">Io Makandal Scheiss</a><br> <a href="http://www.lorenzonassimbeni.com/" title="Lorenzo Nassimbeni (Local Studio Exhibition)">Lorenzo Nassimbeni</a><br> <a href="http://tttymbios.tumblr.com/" title="Michael Tymbios (Local Studio Exhibition)">Michael Tymbios</a><br> <a href="http://www.partsandlabour.co.za/" title="Parts and Labour">Parts and Labour</a><br> <a href="#" title="Mai Mai Community">Mai Mai Community</a><br> <a href="#" title="Mdu Mphethephethe">Mdu Mphethephethe</a></p> <!-- Academic Institutions --> <p><strong>Academic Institutions:</strong><br> <a href="https://www.wits.ac.za/ebe/schools/architecture-and-planning/" title="School of Architecture and Planning, University of the Witwatersrand (Wits Archimart, Yeoville stories)">School of Architecture and Planning, University of the Witwatersrand (Wits Archimart, Yeoville stories)</a><br> <a href="http://wsoa.wits.ac.za/" title="Wits School of the Arts (Wits Archimart)">Wits School of the Arts (Wits Archimart)</a></p> </div> </div> </div> <!-- Mobile Projects --> <div class="mobileContainer mobileModalBox5"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">Projects</h2> <div class="mobileProjectsContainer mobileProjectsListLoadContent"> <!-- Auret --> <a href="#" class="mobileProjectLink mobileProjectModal1 child" title="Auret Street Recycling Project"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/projects/auret/auret1.jpg" class="" alt="Auret Street Recycling Project" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Auret Street Recycling Building Regeneration Project<br> → Architecture, Research</p> </div> </div> </a> <!-- Wits --> <a href="#" class="mobileProjectLink mobileProjectModal2 child" title="Wits Archimart Exhibition"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/projects/wits/wits1.jpg" class="" alt="Wits Archimart Exhibition" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Wits Archimart Exhibition<br> → Exhibition, Research </p> </div> </div> </a> <!-- Lost and Found --> <a href="#" class="mobileProjectLink mobileProjectModal3 child" title="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/projects/lost/lostFeatured.jpg" class="" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Lost and Found: Phantoms of Spaces and Times<br> → Exhibtion, Publication, Research</p> </div> </div> </a> <!-- 7 Steps of Counterespionage --> <a href="#" class="mobileProjectLink mobileProjectModal4 child" title="7 Modes of Counterespionage"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/publications/seven/seven2.jpg" class="" alt="7 Modes of Counterespionage" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>7 Modes of Counterespionage<br> → Publication</p> </div> </div> </a> <!-- Additions and Alterations --> <a href="#" class="mobileProjectLink mobileProjectModal5 child" title="Additions and Alterations"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/projects/additions/additions1.jpg" class="" alt="Additions and Alterations" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Additions & Alterations<br> → Exhibition, Publication, Research</p> </div> </div> </a> <!-- Ideas Bank --> <a href="#" class="mobileProjectLink mobileProjectModal6 child" title="Ideas Bank"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/publications/ideas/ideas2.jpg" class="" alt="Ideas Bank" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Ideas Bank<br> → Architecture, Publication</p> </div> </div> </a> <!-- Pigment Polygraph --> <a href="#" class="mobileProjectLink mobileProjectModal7 child" title="Pigment Polygraph"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/publications/polygraph/polygraph1.jpg" class="" alt="Pigment Polygraph" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>Pigment Polygraph<br> → Architecture, Publication</p> </div> </div> </a> <!-- The Doorn Paperback Project --> <a href="#" class="mobileProjectLink mobileProjectModal8 child" title="The Doorn Paperback Project"> <div class="project-preview left"> <div class="projectPreviewImage"> <img src="img/publications/doorn/doorn1.jpg" class="" alt="The Doorn Paperback Project" style="display: none;"> </div> <div class="projectPreviewTitle"> <p>The Doorn Paperback Project<br> → Architecture, Publication</p> </div> </div> </a> <div class="clear"></div> </div> </div> </div> <!-- Contact --> <div class="mobileContainer mobileModalBox6"> <div class="mobileInnerContainer"> <a href="#" class="modal2_close closeModalButton"></a> <h2 class="mobileHeading">Contact</h2> <div class="mobileModalContent"> <div class="mobileContactContent left"> <h3 class="boldTitle">Counterspace:</h3> <p><a href="mailto:[email protected]" title="Email">[email protected]</a><br> +27 83 301 0996 (Amina)<br> +27 84 958 1969 (Sarah)<br> +27 82 754 4551 (Sumayya)</p> <p><span class="boldTitle">Address:</span><br> Fox Street Studios <br> First Floor <br> 280 Fox Street Studios <br> City and Suburban <br> Johannesburg</p> <p><span class="boldTitle">Post:</span><br> PostNet Suite #534<br> Private Bag x113<br> Melville<br> 2109</p> </div> <div class="mobileContactContent left"> <h3 class="boldTitle">Social Media:</h3> <p><a href="https://www.facebook.com/counterspace.studio/" title="Facebook" target="_blank">Facebook</a><br> <a href="https://twitter.com/_counterspace" title="Twitter" target="_blank">Twitter</a><br> <a href="https://www.instagram.com/_counterspace/" title="Instagram" target="_blank">Instagram</a></p> </div> <div class="clear"></div> </div> </div> </div> <!-- Auret Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject1"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer auretMobileLoadContent"> <h2 class="mobileHeading">Auret Street Recycling Building Regeneration Project</h2> <img src="img/projects/auret/auret1.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <p>Johannesburg’s recyclable waste reclaiming landscape is by its very nature apart of this dichotomy. Through a series of networks reclaimers and their trade mark vehicles move through the city and its surrounds and with deliberate precision; they collect the discarded remnants of consumed products in which they find economic value. They act as vehicles creating fluidity and motion in the larger system of waste recycling.</p> <p>Counterspace engaged with the local recyclers through a number of workshops, mapping out the use of the Auret Street building as a waste organising space as well as a place where the recyclers live. The proposal looked at remedying some of the hazardous areas in the building and mediating an arts and culture project that engaged with the up and coming urban redevelopment of the area. The sensitivity of this experimental project is to be initiated through social media platforms and creating awareness as a form of land activism.</p> <p><span class="projectDetailHeading">Project type:</span> Architecture, Research<br> <span class="projectDetailHeading">Collaborators:</span> 1to1 Agency for Engagement <br>Jabulani Khwela<br> <span class="projectDetailHeading">Project Year:</span> 2015/2016<br> <span class="projectDetailHeading">Client:</span> Propertuity<br> <span class="projectDetailHeading">Location:</span> Corner Auret and Fox Street, City and Suburban</p> <img src="img/projects/auret/auret2.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret3.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret4.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret5.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret6.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret7.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret8.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret9.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret10.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret11.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret12.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret13.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret14.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret15.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret16.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> <img src="img/projects/auret/auret17.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> </div> <!-- Wits Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject2"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer witsMobileLoadContent"> <h2 class="mobileHeading">Wits Archimart Exhibition</h2> <img src="img/projects/wits/wits1.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <p>An Exhibition Of Works Of The Masters Of Architecture Course For 2014 At The Univeristy Of The Witwatersrand.</p> <p>Date: 6 May 2015 - 15 May 2016.</p> <p>ArchiMart showcased the architecture master’s thesis projects of the University of Witwatersrand, class of 2014.<br> Whoosh. Automatic door. Enter. Colours. Scan aisles. Audio interrupt - Happy voice, Sale!<br> Architecture is everywhere, and Everything is architecture;<br> So why do we limit the conversation to architects?<br> ArchiMart aims to render architectural research projects consumable to the types of people who inspired them, to everyone. To us; the supermarket is just that – a space where all and sundry are bound together by everyday-ritual. Here, architecture is ‘consumed’, pulled in to viscerally clash with the everyday, to inspire active criticism, and, ultimately, offer opportunity to recalibrate what we are otherwise passively endure. What is the future of space-making, in Johannesburg, and the world?<br> The class of 2014/15 showcased a wide range of talent and interests A whole host of architectural hallucinations waiting to be bought, consumed and inspire discussion.</p> <p>The Archimart exhibition was a display of the Masters’ thesis architecture projects from the class of 2014 of the University of the Witwatersrand. Counterspace used the theme of the supermarket to comment on the connection between architectural research and its accessibility within everyday life. The exhibition with its 50c coupons, advertisements posters, aisle flags, neon signs and display milk cartons became a space where architecture could be ‘consumed’ and frenzied.</p> <p>Archimart became a mini architecture festival showcasing a wide range of projects from a sensitive religious-political building in the Middle East; to radically proposing a change in socio-monopoly infrastructure in Sandton-Alexandra.</p> <p>Counterspace held successful networking events for professionals, with a tongue in cheek comment on the ‘sale’ of recent graduates into the industry; and pop up cinema which extended to the street, hosting a series of film screenings looking at architecture and narrative. Panel discussions inspired active criticism with debate about the graduate work, the state of architecture, and the future of space-making in Johannesburg.</p> <p><span class="projectDetailHeading">Project type:</span> Research, Exhibiiton<br> <span class="projectDetailHeading">Collaborators:</span> Reshma Chhiba (Wits School of the Arts), Brett Hirson<br> <span class="projectDetailHeading">Project Year:</span> 2015<br> <span class="projectDetailHeading">Client:</span> School of Architecture and Planning, University of the Witwatersrand<br> <span class="projectDetailHeading">Location:</span> The Point of Order Gallery, Noswal Hall, Corner of Bertha and Stiemans Street, Braamfontein</p> <img src="img/projects/wits/wits2.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits3.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits4.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits5.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits6.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits7.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits8.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits9.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits10.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits11.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits12.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits13.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits14.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits15.jpg" class="projectImg" alt="Wits Archimart Exhibition"> <img src="img/projects/wits/wits16.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> </div> <!-- Lost Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject3"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer lostMobileLoadContent"> <h2 class="mobileHeading">Lost and Found: Phantoms of Spaces and Times</h2> <img src="img/projects/lost/lost1.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <p>Date: 3 October 2015 - 3 January 2016.</p> <p>Chicago Architecture Biennial</p> <p>Lost and Found conveys the multiplicity of narratives that are legible in Johannesburg’s landscape of mines. On a satellite map, a zoom-out view of the city shows yellow-and-white sand mountains—massive and imposing man-made nature scripted by subterranean gold—so vast that their monumentality lays bare the scale of exploitation by the colonial and Apartheid regimes. The minescape girdles the areas that belong to differing race groups, not only acting as a symbolic memory of political struggle, but remaining a physical barrier between the various groups that were defined during Apartheid. A reversal of the lens—zooming in on the dust mountains— reveals architectures beyond the limits of formal planning and design. The mountains are sites of invisible cities. A face-mask, an old rubber glove, and a makeshift pick-axe. A frosted glass bottle with a label etched in Dutch script. Plastic drive-in movie posters advertising a Valentine’s Special. A Zion-Christian star badge, which has become host to a coral-like formation of turquoise crystals. In Lost and Found, our minds fill in the stories contained in these mysterious artifacts. Loose connections are fostered between the actual place, the maps, the artifacts. The distinction between physical objects and imagined history is blurred.</p> <p>On a satellite map, a zoom-out view of the city shows yellow-and-white sand mountains— massive and imposing man-made natures, scripted by subterranean gold—so vast that their monumentality lays bare the scale of exploitation by the colonial and Apartheid regimes. The minescape girdles the areas that were once restricted to differing race groups, not only acting as a symbolic memory of political struggle, but remaining a physical barrier between the various groups that were defined during Apartheid.</p> <p>In a reversal of the lens—zooming in on the dust mountains—reveals architectures beyond the limits of formal planning and design. The mountains are sites of invisible cities. A face-mask, an old rubber glove, and a makeshift pick-axe. A frosted glass bottle with a label etched in Dutch script. Plastic drive-in movie posters advertising a Valentine’s Special. A Zion-Christian star badge, which has become host to a coral-like formation of turquoise crystals.</p> <p>The mine dumps are eroding, but as they erode, and layers of dust and sediment and upheaved, histories are being uncovered. For example, an unmarked cemetery was recently unearthed on the Langlaagte mine dump. The bones had turned blue from chemical interference of the acid mine water, but archaeologists were still able to determine, from surrounding evidence, that these were the bones of Chinese labourers. The leftover architectures gave many clues of this history, but it is nowhere to be found in history books.</p> <p>The mine dumps were used as a buffer strip, for a long time in history, thus considered a non- place, an uninhabitable line.</p> <p>But the boundaries themselves are new territories – they are spaces which do not strictly belong to anyone, and a range of ad-hoc activities and architectures have formed within them.</p> <p>Johannesburg mine dumps secrete visceral colours from the metallic pigments and after effects of the mining the earth. The type of mining (gold, coal, diamond) and the geological conditions of the soil affect the formation of the colours of the pigments.</p> <p>This is a key geographic indicator of the fragments. Structured by the colour of the metallic compound, we arranged petri dishes with the evidence of the architectures that we have found, along with corresponding research drawings and mappings. Excerpts of factual texts accompany the fragments, allowing the viewer to collage the stories in their mind, resonant with the way that we compiled the research. Much of the information is missing.</p> <p>These fragments and excerpts not only provide an understanding of past oppressive and capitalist architectural and urban devices within the city, but also alert us to the challenges the architecture must engage with for the future of these lands – whole sections of settlements falling into the hollow ground, a man who fell metres into the ground and burnt from the waist down from coal burning underground in an abandoned mine, closed decades before. New architecture in these spaces will always have to engage with the aggressive and sinister phantoms of the past activities on the land.</p> <p><span class="projectDetailHeading">Project type:</span> Research, Exhibiiton, Publication<br> <span class="projectDetailHeading">Collaborators:</span> Jason Larkin<br> <span class="projectDetailHeading">Project Year:</span> October 2015 - January 2016<br> <span class="projectDetailHeading">Client:</span> Chicago Architecture Biennial, curated by Joseph Grima and Sarah Herda<br> <span class="projectDetailHeading">Location:</span> Chicago Cultural Centre 78 E Washington Street, Chicago, USA</p> <img src="img/projects/lost/lost2.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost3.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost4.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost5.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost6.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost7.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost8.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost9.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost10.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost11.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost12.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> <img src="img/projects/lost/lost13.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times"> </div> </div> <!-- 7 Modes Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject4"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer sevenMobileLoadContent"> <h2 class="mobileHeading">7 Modes of Counterespionage</h2> <img src="img/publications/seven/seven1.jpg" class="projectImg" alt="7 Modes of Counterespionage"> <p>Written by: Sarah de Villiers, Amina Kaskar and Sumayya Vally<br> Submitted as part of the MAS Context Hidden Issue (expected 2016)</p> <p class="italic">“Which side are you on?<br> Which realm is the legitimate, the real?<br> What is rendered opaque, and from whom?”</p> <p>A great deal of Johannesburg’s existence(s) is made up of counter-existences which work despite limitations and what is recognised as the nominal city,- structures formed and designed for survival against economic and spatial deprivation, in the leftovers, slippages and loopholes of the city, which we recognise as the city. Architects unravel the secrets of space through an all seeing plain of plan or section, both not actual perspectives by a person in space, but an all-seeing flattened view, equidistant from a slice in space. In a perspective, there is foreground and background – in section or plan, there is isolation in empirical space.</p> <p>“<span class="italic">Imagine a spy</span>, crouched above the city’s streets, viewing the goings on through windows and alleys from a parapet up above.<br> <span class="italic">Imagine a fugitive</span>, running through the sewer tunnels in the bowels of the city, navigating through the hidden services that connect the individual properties above.”</p> <p>“A vertical slice to forego the horizontal sprawls and runnings-on of the city. We feel Johannesburg needs to be unpacked through an archaeological section; from vantage points high above, to those below, to straddle the complexities and tensions that are spoken of, that run the city.” – excerpts from ‘7 Steps of Counterespionage’, MAS Context, 2016.</p> <p>Some areas studied in the article include:</p> <p>1. Deep level mines (-6500 ft)<br> <span class="indented">a. Zama Zamas</span><br> <span class="indented">“try your luck”</span><br> <span class="indented">b. disappearing houses/sinking sand</span><br> <span class="indented">“the dolomitic situation is satanic”</span><br> 2. Informal recyclers (-20 - +20 ft)<br> <span class="indented">“R1.00 per kilogram of recycled paper”</span><br> 3. Transport interchanges<br> <span class="indented">“secrecy”</span><br> 4. Underground underground<br> <span class="indented">“the villages under the highway”</span><br> 5. Backyard / balcony secrets ( +0 – 200 feet)<br> <span class="indented">“invented, undeclared sub-populations”</span><br> 6. Rituals on man-made mountain (+65 feet)<br> <span class="indented">“an exercise in place-making”</span><br> 7. Sky locations (+200 feet up)<br> <span class="indented">“breathing gap for shortcomings of the city”</span></p> <p><span class="projectDetailHeading">Project type:</span> Publication</p> <img src="img/publications/seven/seven2.jpg" class="projectImg" alt="7 Modes of Counterespionage"> <img src="img/publications/seven/seven3.jpg" class="projectImg" alt="7 Modes of Counterespionage"> <img src="img/publications/seven/seven4.jpg" class="projectImg" alt="7 Modes of Counterespionage"> </div> </div> <!-- Additions Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject5"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer additionsMobileLoadContent"> <h2 class="mobileHeading">Additions & Alterations<br> recent built work by local studio in Johannesburg 2012-2015</h2> <img src="img/projects/additions/additions1.jpg" class="projectImg" alt="Additions and Alterations"> <p>Counterspace was commissioned by Local Studio, a young local architectural practice, to put together an exhibition of their recent capsule of public buildings.<br> We were drawn to the notion of showcasing the building in use. Our animated graphic style displays the day to day soap opera of the life of the buildings.<br> // Superpowers. To us, almost as intriguing as Local Studio’s architectures, are the stories surrounding them. The work is almost always borne from smaller projects undertaken in a spirit of immense generosity.<br> // Superabundance. The exhibition celebrates the narratives of the buildings pre, during and post construction – capturing a small snapshot of the complexities, actors, networks and conversations that extend beyond the architect and the architecture.<br> // Superstudio. The determination to deliver thoughtful architecture. The photographic and drawn exhibits shows the deep appreciating of context and how the building facilitates the spirit of people and place.</p> <p><span class="projectDetailHeading">Project type:</span> Exhibitions, Research, Publication<br> <span class="projectDetailHeading">Client:</span> Local Studio<br> <span class="projectDetailHeading">Collaborators:</span> Jhono Bennett, Dave Southwood, Lorenzo Nassimbeni<br> <span class="projectDetailHeading">Project Year:</span> 2015<br> <span class="projectDetailHeading">Location:</span> Fourthwall Books, Johannesburg</p> <img src="img/projects/additions/additions2.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions3.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions4.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions5.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions6.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions7.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions8.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions9.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions10.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions11.jpg" class="projectImg" alt="Additions and Alterations"> <img src="img/projects/additions/additions12.jpg" class="projectImg" alt="Additions and Alterations"> </div> </div> <!-- Ideas Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject6"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer ideasMobileLoadContent"> <h2 class="mobileHeading">Ideas Bank</h2> <img src="img/publications/ideas/ideas1.jpg" class="projectImg" alt="Ideas Bank"> <p>Written by: Sarah de Villiers</p> <p>Between Watt Street and Wall Street: Idea Bank for New Financial and Social Transactions; in Wynberg, Johannesburg</p> <p class="italic">Submission by Sarah de Villiers as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>What if you could spend an idea to earn money?</p> <p>Investigations into the spatial orders of ‘money institutions’ (including the bank, shopping mall and casino) indicate that they are increasingly experienced as closed protected entities; possibly reflective of concurrent financial barrier-type phenomena which occur at an urban scale. In this somewhat detached enclave, it is all smoke and mirrors: The rules can be broken for the desires of those inside, and keep out the supposed risks of those who are not. Its detachedness is reconstructed through the theoretical perspectives of Michel Foucault and Georg Simmel; this examination providing grasp for spatial tools which, if altered, could recalibrate the way in which privatised spaces open and close themselves to the public.</p> <p>How can a reassembly of spatial and psychological thresholds in financial institutions assist in making capital more accessible to everyday people? The results of this research propose a reworked syntax of physical legibilities which make entry, participation and exit in financial systems understandable and therefore more possible. An idea trading floor is designated as the principal programme; where the possibility of intersection of capital, presented by an investor meeting an innovator with an idea is available, in a stripped down form. What if we could sell stocks for entrepreneurial ideas, in a physical space, partly quotidian like that of a supermarket, and partly alluring like a casino?</p> <p>Various kinds of one-on-one modes of transaction are spatially encouraged, thus attempting to insert an element of humanity in the sometimes highly abstracted realm of venture capital and investment.</p> <p>Fertile ground for such a transaction point is identified at an intersection in Wynberg, Johannesburg; which currently lies suspended along a highly-trafficked pedestrian movement route between Alexandra and Sandton, and is earmarked for a future transport interchange. The programmes of transaction are vertically punctured by a circulation vein to the proposed bus terminal below the site, revealing the processes of seed capital generation for a passing commuter or visitor:</p> <p>Ultimately, if capital has a wall around it (literally and figuratively), perhaps architecture could put a door in it; in doing so making cognizant the presence of the wall; and therefore the possibly to transverse through it.</p> <p><span class="projectDetailHeading">Project type:</span> Architecture, Publication<br> <span class="projectDetailHeading">Download link:</span> <a href="http://hdl.handle.net/10539/17845" title="Download link" target="_blank">http://hdl.handle.net/10539/17845</a><br> <span class="projectDetailHeading">Investigatory Themes:</span> Money Institutions, Financial accessibility, Privatised Enclave, Crowd-funding, Seed capital, Transport interchange, Casino, Stock exchange, Heterotopia, Informal / Formal<br> <span class="projectDetailHeading">Collaborators / Advisors:</span> Thesis Advisor: Kirsten Doermann<br> <span class="projectDetailHeading">Project Year:</span> 2014<br> <span class="projectDetailHeading">Location:</span> Wynberg/Alexandra, Johannesburg</p> <img src="img/publications/ideas/ideas2.jpg" class="projectImg" alt="Ideas Bank"> <img src="img/publications/ideas/ideas3.jpg" class="projectImg" alt="Ideas Bank"> <img src="img/publications/ideas/ideas4.jpg" class="projectImg" alt="Ideas Bank"> </div> </div> <!-- Pigment Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject7"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer pigmentMobileLoadContent"> <h2 class="mobileHeading">Pigment Polygraph</h2> <img src="img/publications/polygraph/polygraph1.jpg" class="projectImg" alt="Pigment Polygraph"> <p>Written by: Sumayya Vally</p> <p>Polygraph: a palimpsest pigment factory: a colour plant as a recording device for the sedimented scars on Johannesburg’s mining landscape</p> <p class="italic">Submission by Sumayya Vally as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>The mining that gave rise to Johannesburg as a city has left in its wake pieces of geologically disturbed, disused, and unusable land. These leftover fragments of landscape carry with them, not only memory of the city’s foundations, but scars of the mining processes that now render them unusable - Not only do these vague-scapes have potential for the memory within them to be unearthed, but they are highly polluted, and seek to be reimagined as productive city spaces. The chosen site, an abandoned piece of mine-land with a concealed old mine shaft; on the edge of a highway on the fringe of the CBD, is simultaneously highly visible to the city, but forgotten to it. Its positioning is unique in that it allows for the potential for the extraction of the mine pollutants and site remediation to become a highly visible process.</p> <p>Understanding and uncovering layers and traces of the site as means of understanding what is possible on this highly polluted landscape became an important architectural and design generator. The architecture consolidates and reimagines the fragments of ruin, both physical and ephemeral, contained on the site, and curates the users experience through these forgotten traces. Its programme - a colour plant, which extracts useful metallic colour pigments from the contaminated earth, becomes a visceral reminder of these past traces ;and a recording device for the current consequences of past mining activity.</p> <p>The approach is an almost critical speculation. The age of the picturesque landscape is no more. Our effects on the land have depleted the earth and diseased its rhythms. But these unstable consequences hold possibilities that can be engaged with imaginatively; rather than merely re-mediated. How can architecture engage with this instability?</p> <p>The project accepts the presence of rising acid mine water; and imagines a new reality emerging from it. The project is a comment on our own epoch; one where waste, toxicity and radiation are so rife, that they are now a quiet, sinister backdrop to our world. More than an apocalyptic future, this project deals with a dystopian present.<br> The precarious site conditions pose questions for an architecture which can engage with the instability, and not merely withstand it. The architectural concern is to render visible and intensify a consciousness of these traces, to investigate a palimpsest infrastructure.</p> <p>Colour, like architecture is a link between the conscious and the subconscious. It is a mediator between the realms. It holds possibilities for suggesting and moulding atmospheres and perceptions.</p> <p>The architecture negotiates all the realms, concerned with past, present and future.<br> It consolidates and makes apparent the traces but it is also developed with an awareness that it becomes part of these traces. It is an intervention which aims to heighten an awareness of the presence of the past in the life of the city; and also as palimpsest infrastructure; as a recording device for the geological happenings of the earth.</p> <p><span class="projectDetailHeading">Project type:</span> Architecture, Publication<br> <span class="projectDetailHeading">Download link:</span> <a href="http://wiredspace.wits.ac.za/handle/10539/17567" title="Download link" target="_blank">http://wiredspace.wits.ac.za/handle/10539/17567</a><br> <span class="projectDetailHeading">Investigatory Themes:</span> Toxicity, Colour, Acid Mine Drainage, Apocalyptic Landscape, Subconcious, Traces<br> <span class="projectDetailHeading">Collaborators / Advisors:</span> Thesis Advisor: Hannah le Roux<br> <span class="projectDetailHeading">Project Year:</span> 2014<br> <span class="projectDetailHeading">Location:</span> Village Main, South East Johannesburg</p> <img src="img/publications/polygraph/polygraph2.jpg" class="projectImg" alt="Pigment Polygraph"> </div> </div> <!-- Doorn Mobile Project --> <div class="mobileContainer mobileProjectContainer mobileProject8"> <a href="#" class="modal3_close closeModalButton"></a> <div class="mobileInnerContainer doornMobileLoadContent"> <h2 class="mobileHeading">The Doorn Paperback Project</h2> <img src="img/publications/doorn/doorn1.jpg" class="projectImg" alt="The Doorn Paperback Project"> <p>Written by: Amina Kaskar</p> <p class="italic">Abandoned Pages, Unsettled Space: An urban dialogue created through literary practice in contemporary Doornfontein</p> <p class="italic">Submission by Amina Kaskar as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>Architecture is the appreciation for story-telling; fiction and literature, history, culture and conversation. It entails the unfolding of a plot, unfamiliar places and eccentric characters. These do not merely exist on dusty old pages in books but are an integral part of our imagination - our subconscious design. This report explores the role of the architect as the reader; and so, this thesis forms what I have ‘read’ this year.</p> <p>This thesis aims to interpret literature as a design methodology in order to understand site and develop a suitable architectural language. The process of oral traditions, written text and digitalised technology are used to deconstruct systems and principles that document change in architecture and the city.</p> <p>This project, The Doorn Paperback Project is located in a contested area set within the in-between yard spaces of New Doornfontein. The unsightly nature of the site gives rise to ephemeral slumming. The cracks that exist within the formal urban fabric are atypically inhabited by the marginalised. These hidden narratives of the people living on the site create new meaning to these abandoned and derelict spaces. The way in which people ‘hack’ the site and use it in ways opposed to what was originally intended forms the reality for which the architecture exists.</p> <p>The architecture needs to ‘tear down’ and ‘dismantle’ formal conditions on the site in order to mediate a space in which ‘life’ can be reinvigorated into the space. Thus the introduction of a literary program responds well to the educational and industrial conditions on the site.</p> <p><span class="projectDetailHeading">Project type:</span> Architecture, Publication<br> <span class="projectDetailHeading">Download link:</span> <a href="http://wiredspace.wits.ac.za/jspui/handle/10539/17871" title="Download link" target="_blank">http://wiredspace.wits.ac.za/jspui/handle/10539/17871</a><br> <span class="projectDetailHeading">Investigatory Themes:</span> In-between, Read, Narrative, Oral Recounts, Story-Telling, Fiction, Literature<br> <span class="projectDetailHeading">Collaborators / Advisors:</span> Thesis Advisor: Hannah le Roux<br> <span class="projectDetailHeading">Project Year:</span> 2014<br> <span class="projectDetailHeading">Location:</span> Doornfontein, Johannesburg</p> <img src="img/publications/doorn/doorn2.jpg" class="projectImg" alt="The Doorn Paperback Project"> <img src="img/publications/doorn/doorn3.jpg" class="projectImg" alt="The Doorn Paperback Project"> </div> </div> <!-- Main Container --> <div id="container" class="infoContainer scroll-pane"> <div class="frame"> <div class="bit-2 __web-inspector-hide-shortcut__"> <div class="area"> <div class="noScrollContainer aboutContainer scrollDownQuarter"> <div class="title aboutTitle"> <h1>Welcome</h1> </div><!--title--> <div class="aboutScrollHere"></div> <div id="about"> <p>Counterspace is a Johannesburg-based collaborative studio of young architecture graduates, established in 2014 by Sarah de Villiers, Amina Kaskar and Sumayya Vally. Counterspace is dedicated to research-based projects, which take the form of exhibition design, competition work, urban insurgency, and public events. Their work is predominantly concerned with ideas for future and otherness; playing with image and narrative as a means of deconstructing and reconstructing space and city, ultimately with the aim to incite provocative thought around perceptions of Johannesburg.</p> <p>In 2015, the firm was invited to participate in the inaugural Chicago Architecture Biennial, where they showcased their work entitled ‘Lost and Found’, in collaboration with photographer Jason Larkin. Counterspace has also been involved in a multitude of graphic and curatorial work with Local Studio, and the School of Architecture and Planning at the University of the Witwatersrand; as well as intensive social-spatial research on the eastern peripheries of Johannesburg CBD.</p> <p class="underlined"><strong>Online Media Links:</strong><br> Uncubed Magazine<br> 2015<br> <a href="http://www.uncubemagazine.com/blog/">‘From Agency to Urgency: Experiments in the Impossible at the first Chicago Architecture biennial’</a></p> <p class="underlined">The Huffington Post: Arts and Culture<br> 2015<br> <a href="http://www.huffingtonpost.com/patricia-zohn/culturezohn-chicago-showsoff_b_8246060.html">‘Chicago Shows-off; CultureZohn’</a></p> <p class="underlined">Future Cape Town<br> 6 April 2016<br> <a href="http://futurecapetown.com/2016/04/counterspace-a-new-way-of-practising-architecture-future-cape-town/">‘Counterspace: A new way of practising architecture’</a></p> <p class="underlined">Chicago Architecture Biennial<br> 23 November 2016<br> <a href="http://chicagoarchitecturebiennial.org/exhibition/participants/counterspace/">‘Counterspace: What is urgent?’</a></p> <p>Design Indaba<br> 14 March 2016<br> <a href="http://www.designindaba.com/tags/counterspace">‘Architects investigate Johannesburg’s abandoned mine dumps’</a></p> </div><!--about--> </div><!--area--> </div> </div><!--bit-2--> <!--bit-2--> <!--bit-2--> <!--bit-2--> </div><!--frame--> </div> </div><!--main-container--> <!-- PROJECTS --> <!-- Auret --> <div class="projectContainer modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box auretLoadContent"><!-- Swiper --> <div class="swiper-container s1"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Auret Street Recycling Building Regeneration Project</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Architecture, Research</p> <p><span class="projectDetailHeading">Collaborators</span><br> 1to1 Agency for Engagement<br> Jabulani Khwela</p> <p><span class="projectDetailHeading">Project Year</span><br> 2015/2016</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Client</span><br> Propertuity</p> <p><span class="projectDetailHeading">Location</span><br> Corner Auret and Fox Street, City and Suburban</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Johannesburg’s recyclable waste reclaiming landscape is by its very nature apart of this dichotomy. Through a series of networks reclaimers and their trade mark vehicles move through the city and its surrounds and with deliberate precision; they collect the discarded remnants of consumed products in which they find economic value. They act as vehicles creating fluidity and motion in the larger system of waste recycling.</p> <p>Counterspace engaged with the local recyclers through a number of workshops, mapping out the use of the Auret Street building as a waste organising space as well as a place where the recyclers live. The proposal looked at remedying some of the hazardous areas in the building and mediating an arts and culture project that engaged with the up and coming urban redevelopment of the area. The sensitivity of this experimental project is to be initiated through social media platforms and creating awareness as a form of land activism.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret1.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret2.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret3.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret4.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret5.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret6.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret7.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret8.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret9.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret10.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret11.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret12.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret13.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret14.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret15.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret16.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/auret/auret17.jpg" class="projectImg" alt="Auret Street Recycling Building Regeneration Project"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Auret --> <!-- Wits --> <div class="projectContainer2 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box witsLoadContent"><!-- Swiper --> <div class="swiper-container s2"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Wits Archimart Exhibition</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Research, Exhibiiton</p> <p><span class="projectDetailHeading">Collaborators</span><br> Reshma Chhiba (Wits School of the Arts)<br> Brett Hirson</p> <p><span class="projectDetailHeading">Project Year</span><br> 2015</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Client</span><br> School of Architecture and Planning<br> University of the Witwatersrand</p> <p><span class="projectDetailHeading">Location</span><br> The Point of Order Gallery<br> Noswal Hall<br> Corner of Bertha and Stiemans Street, Braamfontein</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>An Exhibition Of Works Of The Masters Of Architecture Course For 2014 At The Univeristy Of The Witwatersrand.</p> <p>Date: 6 May 2015 - 15 May 2016.</p> <p>ArchiMart showcased the architecture master’s thesis projects of the University of Witwatersrand, class of 2014.</p> <p>Whoosh. Automatic door. Enter. Colours. Scan aisles. Audio interrupt - Happy voice, Sale!</p> <p>Architecture is everywhere, and everything is architecture; so why do we limit the conversation to architects?</p> <p>ArchiMart aims to render architectural research projects consumable to the types of people who inspired them, to everyone. To us; the supermarket is just that – a space where all and sundry are bound together by everyday-ritual. Here, architecture is ‘consumed’, pulled in to viscerally clash with the everyday, to inspire active criticism, and, ultimately, offer opportunity to recalibrate what we are otherwise passively endure. What is the future of space-making, in Johannesburg, and the world?</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <div class="projectDesc left"> <p>The class of 2014/15 showcased a wide range of talent and interests A whole host of architectural hallucinations waiting to be bought, consumed and inspire discussion.</p> <p>The Archimart exhibition was a display of the Masters’ thesis architecture projects from the class of 2014 of the University of the Witwatersrand. Counterspace used the theme of the supermarket to comment on the connection between architectural research and its accessibility within everyday life. The exhibition with its 50c coupons, advertisements posters, aisle flags, neon signs and display milk cartons became a space where architecture could be ‘consumed’ and frenzied.</p> </div> </div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo"> <div class="projectDesc"> <p>Archimart became a mini architecture festival showcasing a wide range of projects from a sensitive religious-political building in the Middle East; to radically proposing a change in socio-monopoly infrastructure in Sandton-Alexandra.</p> <p>Counterspace held successful networking events for professionals, with a tongue in cheek comment on the ‘sale’ of recent graduates into the industry; and pop up cinema which extended to the street, hosting a series of film screenings looking at architecture and narrative. Panel discussions inspired active criticism with debate about the graduate work, the state of architecture, and the future of space-making in Johannesburg.</p> </div> </div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits1.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits2.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits3.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits4.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits5.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits6.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits7.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits8.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits9.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits10.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits11.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits12.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits13.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits14.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits15.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/wits/wits16.jpg" class="projectImg" alt="Wits Archimart Exhibition"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Wits --> <!-- Lost and Found --> <div class="projectContainer3 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box lostLoadContent"><!-- Swiper --> <div class="swiper-container s3"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Lost and Found: Phantoms of Spaces and Times</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Research, Exhibiiton, Publication</p> <p><span class="projectDetailHeading">Collaborators</span><br> Jason Larkin</p> <p><span class="projectDetailHeading">Project Year</span><br> October 2015 - January 2016</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Client</span><br> Chicago Architecture Biennial, curated by Joseph Grima and Sarah Herda</p> <p><span class="projectDetailHeading">Location</span><br> Chicago Cultural Centre<br> 78 E Washington Street, Chicago, USA</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Date: 3 October 2015 - 3 January 2016.</p> <p>Chicago Architecture Biennial</p> <p>Lost and Found conveys the multiplicity of narratives that are legible in Johannesburg’s landscape of mines. On a satellite map, a zoom-out view of the city shows yellow-and-white sand mountains—massive and imposing man-made nature scripted by subterranean gold—so vast that their monumentality lays bare the scale of exploitation by the colonial and Apartheid regimes. The minescape girdles the areas that belong to differing race groups, not only acting as a symbolic memory of political struggle, but remaining a physical barrier between the various groups that were defined during Apartheid. A reversal of the lens—zooming in on the dust mountains— reveals architectures beyond the limits of formal planning and design. The mountains are sites of invisible cities. A face-mask, an old rubber glove, and a makeshift pick-axe. A frosted glass bottle with a label etched in Dutch script. Plastic drive-in movie posters advertising a Valentine’s Special. A Zion-Christian star badge, which has become host to a coral-like formation of turquoise crystals. In Lost and Found, our minds fill in the stories contained in these mysterious artifacts. Loose connections are fostered between the actual place, the maps, the artifacts. The distinction between physical objects and imagined history is blurred.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo projectDesc left"> <p>On a satellite map, a zoom-out view of the city shows yellow-and-white sand mountains— massive and imposing man-made natures, scripted by subterranean gold—so vast that their monumentality lays bare the scale of exploitation by the colonial and Apartheid regimes. The minescape girdles the areas that were once restricted to differing race groups, not only acting as a symbolic memory of political struggle, but remaining a physical barrier between the various groups that were defined during Apartheid.</p> <p>In a reversal of the lens—zooming in on the dust mountains—reveals architectures beyond the limits of formal planning and design. The mountains are sites of invisible cities. A face-mask, an old rubber glove, and a makeshift pick-axe. A frosted glass bottle with a label etched in Dutch script. Plastic drive-in movie posters advertising a Valentine’s Special. A Zion-Christian star badge, which has become host to a coral-like formation of turquoise crystals.</p> </div> <div class="projectInfo projectDesc secondProjectDesc left"> <p>The mine dumps are eroding, but as they erode, and layers of dust and sediment and upheaved, histories are being uncovered. For example, an unmarked cemetery was recently unearthed on the Langlaagte mine dump. The bones had turned blue from chemical interference of the acid mine water, but archaeologists were still able to determine, from surrounding evidence, that these were the bones of Chinese labourers. The leftover architectures gave many clues of this history, but it is nowhere to be found in history books.</p> <p>The mine dumps were used as a buffer strip, for a long time in history, thus considered a non- place, an uninhabitable line.</p> <p>But the boundaries themselves are new territories – they are spaces which do not strictly belong to anyone, and a range of ad-hoc activities and architectures have formed within them.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo projectDesc left"> <p>Johannesburg mine dumps secrete visceral colours from the metallic pigments and after effects of the mining the earth. The type of mining (gold, coal, diamond) and the geological conditions of the soil affect the formation of the colours of the pigments.</p> <p>This is a key geographic indicator of the fragments. Structured by the colour of the metallic compound, we arranged petri dishes with the evidence of the architectures that we have found, along with corresponding research drawings and mappings. Excerpts of factual texts accompany the fragments, allowing the viewer to collage the stories in their mind, resonant with the way that we compiled the research. Much of the information is missing.</p> <p>These fragments and excerpts not only provide an understanding of past oppressive and capitalist architectural and urban devices within the city, but also alert us to the challenges the architecture must engage with for the future of these lands – whole sections of settlements falling into the hollow ground, a man who fell metres into the ground and burnt from the waist down from coal burning underground in an abandoned mine, closed decades before. New architecture in these spaces will always have to engage with the aggressive and sinister phantoms of the past activities on the land.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost1.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost2.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost3.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost4.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost5.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost6.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost7.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost8.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost9.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost10.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost11.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost12.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/lost/lost13.jpg" class="projectImg" alt="Lost and Found: Phantoms of Spaces and Times Chicago Architecture Biennial"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Lost and Found --> <!-- Seven Steps --> <div class="projectContainer4 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box sevenLoadContent"><!-- Swiper --> <div class="swiper-container s4"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">7 Modes of Counterespionage</h2> <div class="projectDetailsContainer"> <p><span class="projectDetailHeading">Project type</span><br> Publication</p> </div> </div> <div class="projectInfo projectDesc left"> <p>Written by: Sarah de Villiers, Amina Kaskar and Sumayya Vally<br> Submitted as part of the MAS Context Hidden Issue (expected 2016)</p> <p class="italic">“Which side are you on?<br> Which realm is the legitimate, the real?<br> What is rendered opaque, and from whom?”</p> <p>A great deal of Johannesburg’s existence(s) is made up of counter-existences which work despite limitations and what is recognised as the nominal city,- structures formed and designed for survival against economic and spatial deprivation, in the leftovers, slippages and loopholes of the city, which we recognise as the city. Architects unravel the secrets of space through an all seeing plain of plan or section, both not actual perspectives by a person in space, but an all-seeing flattened view, equidistant from a slice in space. In a perspective, there is foreground and background – in section or plan, there is isolation in empirical space.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <p>“<span class="italic">Imagine a spy</span>, crouched above the city’s streets, viewing the goings on through windows and alleys from a parapet up above.<br> <span class="italic">Imagine a fugitive</span>, running through the sewer tunnels in the bowels of the city, navigating through the hidden services that connect the individual properties above.”</p> <p>“A vertical slice to forego the horizontal sprawls and runnings-on of the city. We feel Johannesburg needs to be unpacked through an archaeological section; from vantage points high above, to those below, to straddle the complexities and tensions that are spoken of, that run the city.” – excerpts from ‘7 Steps of Counterespionage’, MAS Context, 2016.</p> </div> </div> <div class="projectInfo left"> <p>Some areas studied in the article include:</p> <p>1. Deep level mines (-6500 ft)<br> <span class="indented">a. Zama Zamas</span><br> <span class="indented">“try your luck”</span><br> <span class="indented">b. disappearing houses/sinking sand</span><br> <span class="indented">“the dolomitic situation is satanic”</span><br> 2. Informal recyclers (-20 - +20 ft)<br> <span class="indented">“R1.00 per kilogram of recycled paper”</span><br> 3. Transport interchanges<br> <span class="indented">“secrecy”</span><br> 4. Underground underground<br> <span class="indented">“the villages under the highway”</span><br> 5. Backyard / balcony secrets ( +0 – 200 feet)<br> <span class="indented">“invented, undeclared sub-populations”</span><br> 6. Rituals on man-made mountain (+65 feet)<br> <span class="indented">“an exercise in place-making”</span><br> 7. Sky locations (+200 feet up)<br> <span class="indented">“breathing gap for shortcomings of the city”</span></p> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/seven/seven1.jpg" class="projectImg" alt="7 Modes of Counterespionage"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/seven/seven2.jpg" class="projectImg" alt="7 Modes of Counterespionage"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/seven/seven3.jpg" class="projectImg" alt="7 Modes of Counterespionage"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/seven/seven4.jpg" class="projectImg" alt="7 Modes of Counterespionage"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Seven Steps --> <!-- Additions and Alterations --> <div class="projectContainer5 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box additionsLoadContent"><!-- Swiper --> <div class="swiper-container s5"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Additions & Alterations<br> recent built work by local studio in Johannesburg 2012-2015</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Exhibitions, Research, Publication</p> <p><span class="projectDetailHeading">Client</span><br> Local Studio</p> <p><span class="projectDetailHeading">Collaborators</span><br> Jhono Bennett<br>Dave Southwood<br>Lorenzo Nassimbeni</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Location</span><br> Fourthwall Books, Johannesburg</p> <p><span class="projectDetailHeading">Project Year</span><br> 2015</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Counterspace was commissioned by Local Studio, a young local architectural practice, to put together an exhibition of their recent capsule of public buildings.</p> <p>We were drawn to the notion of showcasing the building in use. Our animated graphic style displays the day to day soap opera of the life of the buildings.</p> <p>// Superpowers. To us, almost as intriguing as Local Studio’s architectures, are the stories surrounding them. The work is almost always borne from smaller projects undertaken in a spirit of immense generosity.</p> <p>// Superabundance. The exhibition celebrates the narratives of the buildings pre, during and post construction – capturing a small snapshot of the complexities, actors, networks and conversations that extend beyond the architect and the architecture.</p> <p>// Superstudio. The determination to deliver thoughtful architecture. The photographic and drawn exhibits shows the deep appreciating of context and how the building facilitates the spirit of people and place.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions1.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions2.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions3.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions4.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions5.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions6.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions7.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions8.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions9.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions10.jpg" class="projectImg" alt="Additions and Alterations"> </div> <div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions11.jpg" class="projectImg" alt="Additions and Alterations"> </div><div class="swiper-slide imgSlide"> <img src="img/projects/additions/additions12.jpg" class="projectImg" alt="Additions and Alterations"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Additions and Alterations --> <!-- Ideas Bank --> <div class="projectContainer6 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box ideasLoadContent"><!-- Swiper --> <div class="swiper-container s6"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Ideas Bank</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Architecture, Publication</p> <p><span class="projectDetailHeading">Download link</span><br> <a href="http://hdl.handle.net/10539/17845" title="Download link" target="_blank">http://hdl.handle.net/10539/17845</a></p> <p><span class="projectDetailHeading">Location</span><br> Wynberg/Alexandra, Johannesburg</p> <p><span class="projectDetailHeading">Project Year</span><br> 2014</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Collaborators / Advisors</span><br> Thesis Advisor: Kirsten Doermann</p> <p><span class="projectDetailHeading">Investigatory Themes</span><br> Money Institutions, Financial accessibility, Privatised Enclave, Crowd-funding, Seed capital, Transport interchange, Casino, Stock exchange, Heterotopia, Informal / Formal</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Written by: Sarah de Villiers</p> <p>Between Watt Street and Wall Street: Idea Bank for New Financial and Social Transactions; in Wynberg, Johannesburg</p> <p class="italic">Submission by Sarah de Villiers as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>What if you could spend an idea to earn money?</p> <p>Investigations into the spatial orders of ‘money institutions’ (including the bank, shopping mall and casino) indicate that they are increasingly experienced as closed protected entities; possibly reflective of concurrent financial barrier-type phenomena which occur at an urban scale. In this somewhat detached enclave, it is all smoke and mirrors: The rules can be broken for the desires of those inside, and keep out the supposed risks of those who are not. Its detachedness is reconstructed through the theoretical perspectives of Michel Foucault and Georg Simmel; this examination providing grasp for spatial tools which, if altered, could recalibrate the way in which privatised spaces open and close themselves to the public.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <div class="projectDesc left"> <p>How can a reassembly of spatial and psychological thresholds in financial institutions assist in making capital more accessible to everyday people? The results of this research propose a reworked syntax of physical legibilities which make entry, participation and exit in financial systems understandable and therefore more possible. An idea trading floor is designated as the principal programme; where the possibility of intersection of capital, presented by an investor meeting an innovator with an idea is available, in a stripped down form. What if we could sell stocks for entrepreneurial ideas, in a physical space, partly quotidian like that of a supermarket, and partly alluring like a casino?</p> <p>Various kinds of one-on-one modes of transaction are spatially encouraged, thus attempting to insert an element of humanity in the sometimes highly abstracted realm of venture capital and investment.</p> </div> </div> <div class="projectInfo right"> <p>Fertile ground for such a transaction point is identified at an intersection in Wynberg, Johannesburg; which currently lies suspended along a highly-trafficked pedestrian movement route between Alexandra and Sandton, and is earmarked for a future transport interchange. The programmes of transaction are vertically punctured by a circulation vein to the proposed bus terminal below the site, revealing the processes of seed capital generation for a passing commuter or visitor:</p> <p>Ultimately, if capital has a wall around it (literally and figuratively), perhaps architecture could put a door in it; in doing so making cognizant the presence of the wall; and therefore the possibly to transverse through it.</p> </div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/ideas/ideas1.jpg" class="projectImg" alt="Ideas Bank"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/ideas/ideas2.jpg" class="projectImg" alt="Ideas Bank"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/ideas/ideas3.jpg" class="projectImg" alt="Ideas Bank"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/ideas/ideas4.jpg" class="projectImg" alt="Ideas Bank"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Ideas Bank --> <!-- Polygraph --> <div class="projectContainer7 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box polygraphLoadContent"><!-- Swiper --> <div class="swiper-container s7"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">Pigment Polygraph</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Architecture, Publication</p> <p><span class="projectDetailHeading">Download link</span><br> <a href="http://wiredspace.wits.ac.za/handle/10539/17567" title="Download link" target="_blank">http://wiredspace.wits.ac.za/handle/10539/17567</a></p> <p><span class="projectDetailHeading">Investigatory Themes</span><br> Toxicity, Colour, Acid Mine Drainage, Apocalyptic Landscape, Subconcious, Traces</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Collaborators / Advisors</span><br> Thesis Advisor: Hannah le Roux</p> <p><span class="projectDetailHeading">Location</span><br> Village Main, South East Johannesburg</p> <p><span class="projectDetailHeading">Project Year</span><br> 2014</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Written by: Sumayya Vally</p> <p>Polygraph: a palimpsest pigment factory: a colour plant as a recording device for the sedimented scars on Johannesburg’s mining landscape</p> <p class="italic">Submission by Sumayya Vally as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>The mining that gave rise to Johannesburg as a city has left in its wake pieces of geologically disturbed, disused, and unusable land. These leftover fragments of landscape carry with them, not only memory of the city’s foundations, but scars of the mining processes that now render them unusable - Not only do these vague-scapes have potential for the memory within them to be unearthed, but they are highly polluted, and seek to be reimagined as productive city spaces. The chosen site, an abandoned piece of mine-land with a concealed old mine shaft; on the edge of a highway on the fringe of the CBD, is simultaneously highly visible to the city, but forgotten to it. Its positioning is unique in that it allows for the potential for the extraction of the mine pollutants and site remediation to become a highly visible process.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <div class="projectDesc left"> <p>Understanding and uncovering layers and traces of the site as means of understanding what is possible on this highly polluted landscape became an important architectural and design generator. The architecture consolidates and reimagines the fragments of ruin, both physical and ephemeral, contained on the site, and curates the users experience through these forgotten traces. Its programme - a colour plant, which extracts useful metallic colour pigments from the contaminated earth, becomes a visceral reminder of these past traces ;and a recording device for the current consequences of past mining activity.</p> <p>The approach is an almost critical speculation. The age of the picturesque landscape is no more. Our effects on the land have depleted the earth and diseased its rhythms. But these unstable consequences hold possibilities that can be engaged with imaginatively; rather than merely re-mediated. How can architecture engage with this instability?</p> <p>The project accepts the presence of rising acid mine water; and imagines a new reality emerging from it. The project is a comment on our own epoch; one where waste, toxicity and radiation are so rife, that they are now a quiet, sinister backdrop to our world. More than an apocalyptic future, this project deals with a dystopian present.</p> </div> </div> <div class="projectInfo right"> <p>The precarious site conditions pose questions for an architecture which can engage with the instability, and not merely withstand it. The architectural concern is to render visible and intensify a consciousness of these traces, to investigate a palimpsest infrastructure.</p> <p>Colour, like architecture is a link between the conscious and the subconscious. It is a mediator between the realms. It holds possibilities for suggesting and moulding atmospheres and perceptions.</p> <p>The architecture negotiates all the realms, concerned with past, present and future.</p> <p>It consolidates and makes apparent the traces but it is also developed with an awareness that it becomes part of these traces. It is an intervention which aims to heighten an awareness of the presence of the past in the life of the city; and also as palimpsest infrastructure; as a recording device for the geological happenings of the earth.</p> </div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/polygraph/polygraph1.jpg" class="projectImg" alt="Pigment Polygraph"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/polygraph/polygraph2.jpg" class="projectImg" alt="Pigment Polygraph"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /Polygraph --> <!-- The Doorn Paperback Project --> <div class="projectContainer8 modal_box"> <a href="#" class="modal_close closeModalButton"></a> <div class="inner_modal_box doornLoadContent"><!-- Swiper --> <div class="swiper-container s8"> <a class="mainLogo left closeModalButton" href="#">Counterspace</a> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <h2 class="projectTitle">The Doorn Paperback Project</h2> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Project type</span><br> Architecture, Publication</p> <p><span class="projectDetailHeading">Download link</span><br> <a href="http://wiredspace.wits.ac.za/jspui/handle/10539/17871" title="Download link" target="_blank">http://wiredspace.wits.ac.za/jspui/handle/10539/17871</a></p> <p><span class="projectDetailHeading">Investigatory Themes</span><br> In-between, Read, Narrative, Oral Recounts, Story-Telling, Fiction, Literature</p> </div> <div class="projectDetailsContainer left"> <p><span class="projectDetailHeading">Collaborators / Advisors</span><br> Thesis Advisor: Hannah le Roux</p> <p><span class="projectDetailHeading">Location</span><br> Doornfontein, Johannesburg</p> <p><span class="projectDetailHeading">Project Year</span><br> 2014</p> </div> <div class="clear"></div> </div> <div class="projectInfo projectDesc left"> <p>Written by: Amina Kaskar</p> <p class="italic">Abandoned Pages, Unsettled Space: An urban dialogue created through literary practice in contemporary Doornfontein</p> <p class="italic">Submission by Amina Kaskar as part of Masters of Architecture Professional Thesis Dissertation at the University of the Witwatersrand:</p> <p>Architecture is the appreciation for story-telling; fiction and literature, history, culture and conversation. It entails the unfolding of a plot, unfamiliar places and eccentric characters. These do not merely exist on dusty old pages in books but are an integral part of our imagination - our subconscious design. This report explores the role of the architect as the reader; and so, this thesis forms what I have ‘read’ this year.</p> <p>This thesis aims to interpret literature as a design methodology in order to understand site and develop a suitable architectural language. The process of oral traditions, written text and digitalised technology are used to deconstruct systems and principles that document change in architecture and the city.</p> </div> <div class="clear"></div> </div> </div> <div class="swiper-slide"> <div class="projectInfoContainer"> <div class="projectInfo left"> <div class="projectDesc left"> <p>This project, The Doorn Paperback Project is located in a contested area set within the in-between yard spaces of New Doornfontein. The unsightly nature of the site gives rise to ephemeral slumming. The cracks that exist within the formal urban fabric are atypically inhabited by the marginalised. These hidden narratives of the people living on the site create new meaning to these abandoned and derelict spaces. The way in which people ‘hack’ the site and use it in ways opposed to what was originally intended forms the reality for which the architecture exists.</p> <p>The architecture needs to ‘tear down’ and ‘dismantle’ formal conditions on the site in order to mediate a space in which ‘life’ can be reinvigorated into the space. Thus the introduction of a literary program responds well to the educational and industrial conditions on the site.</p> </div> </div> </div> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/doorn/doorn1.jpg" class="projectImg" alt="The Doorn Paperback Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/doorn/doorn2.jpg" class="projectImg" alt="The Doorn Paperback Project"> </div> <div class="swiper-slide imgSlide"> <img src="img/publications/doorn/doorn3.jpg" class="projectImg" alt="The Doorn Paperback Project"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> <!-- /The Doorn Paperback Project --> </div>
</body></html>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Questrial|Roboto" rel="stylesheet">
</body>
</html>
A Pen by Calvin - Script Codes CSS Codes
/* Typography */
/* font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Questrial', sans-serif;
*/
h1, h2 { letter-spacing:10px; font-size: 50px; line-height: 50px; color: #fff; text-transform: uppercase;
font-family: 'Montserrat', Arial, sans-serif; text-align: left;
}
p, a{ font-size: 16px; line-height: 24px; color: #424242;
font-family: 'Roboto', Arial, sans-serif; margin: 0 0 24px 0;
}
p.underlined{ border-bottom: 2px solid #404041; padding-bottom: 24px;
}
#team p.underlined{ margin: 0 0 17px 0; padding: 0 0 29px 0;
}
p a{ color:#424242; text-decoration: none;
}
.italic{
}
.indented{ margin-left: 24px;
}
/* General */
.grid{ background: url('') repeat 0 0; display: none; height: 100%; position: absolute; width: 100%;
}
html{ height: 100%;
}
body { background-size: 1200% 1200%; background: #147b38; height: 100%; overflow: hidden; width: 100%;
}
body.white { background: #fff;
}
.clear {clear: both;}
.clear {zoom: 1;}
.clear::before, .clear::after { content: ""; display: table;
}
.clear::after { clear: both;
}
.right{ float: right; padding-left: 12px;
}
.left{ float: left; padding-right: 12px;
}
/* Header */
header { display: block; height: 74px; width: 100%; padding: 24px 24px 12px 24px;
} header.withBackground{ }
.mainLogo{ background-size: 338px 35px; display: block; height: 35px; margin-top: 0; overflow: hidden; /* width: 338px; */ font-size: 25px; width: 50%;
} .mainLogo a{
font-family: 'Questrial', Helvetica, Arial, sans-serif; font-weight: normal; }
.mainLogo:hover{ cursor: -webkit-zoom-in; cursor: zoom-in;
}
.contactBtn{ color: #fff; cursor: pointer; display: block;
font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 25px; letter-spacing:10px; font-weight: normal; line-height: 25px; margin-top: 15px; text-transform: uppercase; width: 50%;
}
.mobileModalContact{ color: #fff; cursor: pointer; display: block; font-family: 'hk_groteskbold', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; line-height: 30px; margin-bottom: 0; text-transform: uppercase; width: auto;
}
/* Body */
#main-container { padding: 0 12px;
}
#container { width: 50%; max-height: 90%; float: none; overflow: auto;
} .infoContainer{ overflow: hidden; }
.area { height: 43vh; width: 100%; border: 2px solid #147b38; overflow: hidden; -ms-overflow-style:none;
} .area:hover { cursor: pointer; } .noScrollContainer{ height: 100%; overflow: auto; padding-right: 20px; width: 105%; }
.title { height: 100%; position: relative;
}
.area .title h1{ position: relative; text-align: center; top: 50%; transform: translateY(-50%);
}
.whiteArrow{ background: url('img/whiteArrow.png') no-repeat 0 0; display: block; height: 49px; margin: 0 auto; position: relative; top: 70%; transform: translateY(-100%); width: 26px;
}
#about, #exhibitions, #team, #collaborators { background-color: #fff; padding: 24px 24px;
}
/* Team */
.boldTitle{ color: #424242; font-family: 'hk_groteskbold', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; text-transform: capitalize;
}
.teamMemberQual{ font-family: 'hk_groteskitalic';
}
.teamMemberQual span{ font-family: 'hk_groteskregular', Helvetica, Arial, sans-serif;
}
#team img{ width: 100%;
}
/* Collaborators */
.collaboratorName { /* hide text if it more than N lines */ overflow: hidden; /* for set '...' in absolute position */ position: relative; /* max-height = line-height (1.2) * lines max number (3) */ max-height: 48px; width: 100%;
}
/* create the ... */
.collaboratorName:before { color: #424242; /* points in the end */ /* content: '...'; */ /* absolute position */ /* position: absolute; */ /* set position to right bottom corner of block */ right: 0; bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.collaboratorName:after { /* points in the end */ /* content: ''; */ /* absolute position */ /* position: absolute; */ /* set position to right bottom corner of text */ right: 0; /* set width and height */ /* width: 1em; */ /* height: 1em; */ /* margin-top: 0.2em; */ /* bg color = bg color under block */ background: white;
}
.collaborator{ display: block; margin: 12px 0; text-decoration: none; /* width: 29%; */
}
.collaborator.noLeftMargin{ margin-left: 0;
}
.collaborator.noRightMargin{ margin-right: 0;
}
.collaborator img{ width: 100%;
}
.collaborator p{ font-size: 14px;
}
/* Contact Page */
.contactContainer{ background: #fff; height: 100%; overflow: scroll; position: absolute; top: 0; z-index: 101;
} .contactContainer.contactQuarter{ right: -26%; width: 26%; } .contactContainer.contactThird{ right: -34.5%; width: 34.5%; }
.contactInnerContainer{ display: none; padding: 24px 80px 24px 24px; position: relative;
}
.closeContactBtn{ background: url('img/closeBtn.png') no-repeat 0 0; display: block; height: 32px; cursor: pointer; overflow: hidden; right: 24px; position: absolute; text-indent: -9999px; top: 24px; width: 32px;
}
.contactInnerContainer .contactBtn{ color: #404041; font-size: 48px; padding: 0 0 24px 0; width: auto;
}
.contactInnerContainer p{ margin: 0;
}
.contactInnerContainer .boldTitle{ margin-top: 24px;
}
.contactLeftInfo{ display: block; width: 72px;
}
/* Projects */
#container.projectsContainer{ max-height: 90vh; overflow: auto; /*-webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-y: repeat(50%); -o-scroll-snap-type: mandatory; -o-scroll-snap-points-y: repeat(50%); -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(50%); -moz-scroll-snap-type: mandatory; -moz-scroll-snap-points-y: repeat(50%); scroll-snap-type: mandatory; scroll-snap-points-y: repeat(50%);*/
} /* #container.projectsContainer .child{ scroll-snap-coordinate: 0 0; } */
.project-preview { background: transparent; cursor: pointer; height: 43vh; padding: 24px; width: 100%; border: 2px solid #fff; text-decoration: none; transition: background 0.5s; -webkit-transition: background 0.5s;
} .project-preview.whiteBg { background: #fff; transition: background 0.5s; -webkit-transition: background 0.5s; } .projectPreviewImage{ border: 2px solid #fff; height: 80%; margin-bottom: 12px; overflow: hidden; position: relative; text-align: center; width: 100%; } .projectPreviewImage img{ display: none; margin: 0 auto; max-width: 600px; /*width: 110%;*/ position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .projectPreviewTitle p{ color: #fff; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; transition: color 0.5s; -webkit-transition: color 0.5s; } .projectPreviewTitle p.darkerP{ color: #404041; transition: color 0.5s; -webkit-transition: color 0.5s; }
.projectInfoContainer{ background: #fff; max-width: 1280px;
} .projectContainer .mainLogo, .projectContainer2 .mainLogo, .projectContainer3 .mainLogo, .projectContainer4 .mainLogo, .projectContainer5 .mainLogo, .projectContainer6 .mainLogo, .projectContainer7 .mainLogo, .projectContainer8 .mainLogo{ background-size: 338px 35px; margin-bottom: 24px; } .projectInfo{ width: 50%; } .projectTitle{ color: #484848; margin-bottom: 48px; } .projectDetailsContainer{ word-wrap: break-word; padding-right: 24px; width: 174px; } .projectContainer7 .projectDetailsContainer, .projectContainer8 .projectDetailsContainer{ width: 224px; } .projectDetailHeading{ font-family: 'hk_groteskbold', Helvetica, Arial, sans-serif; }
.projectLink,
.mobileProjectLink{ text-decoration: none;
}
.projectImg { margin-bottom: 24px;
}
.projectContainer,
.projectContainer2,
.projectContainer3,
.projectContainer4,
.projectContainer5,
.projectContainer6,
.projectContainer7,
.projectContainer8{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: none; height: 100%; width: 100%; background: #fff; z-index: 100;
}
.secondProjectDesc{ padding-left: 24px;
}
.modal_close,
.modal2_close,
.modal3_close{ background: url('img/closeBtn.png') no-repeat 0 0; position: absolute; top: 24px; right: 24px; display: block; height: 32px; width: 32px; z-index: 500;
}
.modal2_close{ right: 24px; position: fixed; top: 100px;
}
.modal3_close{ right: 24px; position: fixed; top:100px;
}
/* Slider */
.inner_modal_box{ background: #fff; height: 100%; width: 100%; padding: 24px;
}
.swiper-container{ height: 100%;
}
.centered-btns_nav:focus{ outline: none;
}
.imgSlide{ height: 100%; text-align: center;
} .imgSlide img{ display: block; margin: 25% auto 0; max-height: 85%; transform: translateY(-50%); }
.swiper-slide.swiper-slide-next{ opacity: 0;
}
.swiper-slide.swiper-slide-active{ opacity: 1; transition: opacity 1s; -webkit-transition: opacity 1s;
}
/* Mobile */
.mobileMenu{ display: none; padding: 0 12px 12px 12px;
} .mobileMenuItem{ border-bottom: none; border-left: 2px solid #fff; border-right: 2px solid #fff; border-top: 2px solid #fff; color: #fff; display: block; font-family: 'hk_groteskbold', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: normal; line-height: 24px; margin: 0; padding: 24px; text-align: center; text-decoration: none; text-transform: uppercase; width: 100%; } .mobileMenuItem:last-child{ border-bottom: 2px solid #fff; } .mobileContainer{ background: #fff; display: none; left: 0; min-height: 100%; padding: 12px; position: absolute; right: 0; top: 60px; } .mobileInnerContainer{ position: relative; word-wrap: break-word; } .mobileInnerContainer p{ word-wrap: break-word; } .mobileHeading{ background: #fff; color: #484848; font-size: 20px; left: 0; line-height: 15px; font-weight: normal; padding: 24px 0; position: fixed; text-align: center; top: 84px; width: 100%; z-index: 400; } .mobileModalContent{ margin: 0 auto; max-width: 650px; } .mobileModalBox6 .mobileModalContent { max-width: 780px; } .mobileModalContent p, .mobileModalContent .boldTitle, .mobileModalContent a{ font-size: 20px; } .mobileModalContent p.underlined{ border-bottom:1px solid #424242; } .mobileModalContent img{ display: block; margin:0 auto; max-width: 600px; } .mobileProjectsContainer{ width: 100%; /* -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-y: repeat(50%); -o-scroll-snap-type: mandatory; -o-scroll-snap-points-y: repeat(50%); -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(50%); -moz-scroll-snap-type: mandatory; -moz-scroll-snap-points-y: repeat(50%); scroll-snap-type: mandatory; scroll-snap-points-y: repeat(50%); */ } /* .mobileProjectsContainer .child{ scroll-snap-coordinate: 0 0; } */ .mobileProjectContainer{ background: #fff; min-height: 100%; width: 100%; } .mobileProjectContainer .mobileInnerContainer{ height: 100%; margin:0 auto; max-width: 750px; width: 100%; } .mobileProjectContainer img{ display: block; margin: 24px auto; max-width: 100%; } .mobileProjectContainer .mobileHeading{ line-height: 24px; padding-left: 60px; padding-right: 60px; } .mobileContactContent{ padding: 0 24px; width: 50%; }
/* More stuff */
* { margin: 0; padding: 0; box-sizing: border-box; }
.frame { margin: 0 auto; max-width: 100%; width: 85%;
} .frame:after { content: ""; display: table; clear: both; }
[class*='bit-'] { float: left; padding: 12px; } .box { background: #FCD920; font-family: "Futura", sans-serif; font-size: 14px; text-align: center; padding: 20px 0; }
.box--new { background: #87D37C; }
.bit-1 { width: 100%;
}
.bit-2 { width: 100%; }
.bit-3 { width: 33.33333%; }
.bit-4 { width: 25%; }
.bit-5 { width: 20%; }
.bit-6 { width: 16.66667%; }
.bit-7 { width: 14.28571%; }
.bit-8 { width: 12.5%; }
.bit-9 { width: 11.11111%; }
.bit-10 { width: 10%; }
.bit-11 { width: 9.09091%; }
.bit-12 { width: 8.33333%; }
.bit-25 { width: 25%; }
.bit-40 { width: 40%; }
.bit-60 { width: 60%; }
.bit-75 { width: 75%; }
/* Media Queries */
@media (min-width: 1730px){ .mobileModalContact{ display: none; }
}
@media (min-width: 1305px) and (max-width: 1730px){ #container.infoContainer{ width: 75%; margin: 0 auto; } #container.projectsContainer .bit-2{ width: 100%; } .contactBtn{ width: 33.3%; } #container.projectsContainer{ max-height: 88vh; overflow: auto; width: 33.3%; } .area, .project-preview { height: 70vh; } .mobileModalContact{ display: none; }
}
@media (min-width: 0) and (max-width: 1305px){ body{ height: auto; overflow-y: scroll; } header{ padding: 24px 12px 60px 24px; position: fixed; z-index: 400; } #main-container{ position: relative; top: 84px; bottom: 0; height: 100%; } .mobileModalContact{ display: block; } .mobileMenu{ display: block; } #container, .contactBtn, .contactContainer{ display: none; } .project-preview{ height: auto; background: #fff; padding: 24px 12px; width: 50%; border: none; text-decoration: none; transition: none; -webkit-transition: none; } .projectPreviewImage{ border: none; height: 40vh; margin-bottom: 12px; overflow: hidden; text-align: center; width: 100%; } .projectPreviewImage img{ display: block; margin: 0 auto; max-width: 600px; } .projectPreviewTitle p{ color: #484848; font-size: 20px; white-space: nowrap; width: 100%; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; transition: none; -webkit-transition: none; }
}
@media (min-width: 0) and (max-width: 480px){ .mainLogo{ background-size: 300px 37px; height: 37px; margin-top: -4px; text-indent: -9999px; width: 300px; }
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { h1{ font-size: 58px; } p, a{ font-size: 48px; line-height: 60px; margin: 0 0 48px 0; } .mobileModalContent p.underlined{ border-bottom: 8px solid #424242; padding-bottom: 48px; } header{ height: 180px; position: fixed; z-index: 400; } #main-container{ position: relative; top: 180px; } .mobileMenuItem{ border-left: 7px solid #fff; border-right: 7px solid #fff; border-top: 7px solid #fff; font-size: 58px; line-height: 58px; padding: 70px; width: auto; } .mobileMenuItem:last-child{ border-bottom: 7px solid #fff; } .mainLogo{ display: block; height: 104px; margin-top: 24px; overflow: hidden; text-indent: -9999px; width: 300px; } .mobileModalContact{ font-size: 58px; line-height: 58px; margin-top: 42px; } .mobileContactContent{ width: 100%; } .mobileContainer{ top: 0; } .mobileHeading{ background: #fff; font-size: 58px; left: 0; line-height: 58px; padding: 45px 0; position: fixed; top: 172px; width: 100%; z-index: 400; } .mobileModalContent{ max-width: 100%; padding: 140px 24px 24px 24px; background: #fff; bottom: 0; height: 100%; min-height: 100%; position: relative; } .mobileModalContent p, .mobileModalContent .boldTitle, .mobileModalContent a{ font-size: 48px; line-height: 60px; } .mobileModalContent .boldTitle{ margin-top: 24px; } .mobileModalContent img{ margin-bottom: 48px; max-width: 100%; width: 100%; } .mobileProjectsContainer{ padding-top:100px; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-y: repeat(50%); -o-scroll-snap-type: mandatory; -o-scroll-snap-points-y: repeat(50%); -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(50%); -moz-scroll-snap-type: mandatory; -moz-scroll-snap-points-y: repeat(50%); scroll-snap-type: mandatory; scroll-snap-points-y: repeat(50%); } .project-preview{ height: auto; background: #fff; padding: 24px 12px; width: 100%; border: none; text-decoration: none; transition: none; -webkit-transition: none; } .projectPreviewImage{ height: 32vh; width: 100%; } .projectPreviewImage img{ max-width: 100%; width: 100%; } .projectPreviewTitle p{ font-size: 48px; line-height: 60px; } .modal2_close, .modal3_close{ background: url('img/closeBtnBigger.png') no-repeat 0 0; height: 95px; position: fixed; right: 24px; top: 204px; width: 98px; z-index: 500; } .mobileProjectContainer .mobileHeading{ font-size: 58px; line-height: 68px; margin: 0 auto; padding-left: 100px; padding-right: 100px; } .mobileProjectContainer img{ margin-bottom: 24px; padding: 0; width: 100%; } .mobileProjectContainer .mobileInnerContainer{ padding: 180px 12px 12px 12px; max-width: 100%; width: 100%; }
}
@media (max-width: 30em) { .bit-1 { width: 100%; } .bit-2 { width: 100%; } .bit-3 { width: 100%; } .bit-4 { width: 100%; } .bit-5 { width: 100%; } .bit-6 { width: 100%; } .bit-7 { width: 100%; } .bit-8 { width: 100%; } .bit-9 { width: 100%; } .bit-10 { width: 100%; } .bit-11 { width: 100%; } .bit-12 { width: 100%; } }
@media (min-width: 30em) and (max-width: 50em) { .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 { width: 50%; } .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 { width: 100%; } }
@media (min-width: 50em) and (max-width: 68.75em) { .bit-2, .bit-7 { width: 100%; } .bit-4, .bit-8, .bit-10, .bit-12 { width: 50%; } }
}
| Developer | Calvin |
| Username | CalvinMorett |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 30,237 Kb |
| Views | 36,432 |
Do you need developer help for A Pen by Calvin?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Calvin (CalvinMorett) Script Codes
| Name | Size |
| Staff | 3,023 Kb |
| Particle Web | 3,733 Kb |
| R | 4,338 Kb |
| FireHazard Landing Page | 16,725 Kb |
| Sidebar Nav | 16,349 Kb |
| Full Page Slide, Vertical Progress Bar | 3,016 Kb |
| Portfolio Xperiment | 4,320 Kb |
| DILLA - PORT | 8,525 Kb |
| Social Button Transition | 4,633 Kb |
| Sectioned-bootstrap-portfolio | 10,149 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Using Flickr API | MoyArt | 6,761 Kb |
| GrcJS | Vino6 | 2,047 Kb |
| Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
| DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
| SVG Hover Animations | Kjbrum | 10,557 Kb |
| Loading... | Adamjacob | 2,384 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!