For this project we were tasked to use HTML and CSS to create a single-page website, I used git hub and the no-code framer that we had learned over the past couple of weeks.
I started this webpage the same way as we completed the woman in design webpage by creating a git hub repository and completing the basic format of the webpage including the body text headings and links for the navigation bar.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="uft-8"/>
<meta name="author" content="Aoife Owens">
<title>The Street of Crocodiles</title>
</head>
<body>
<nav>
<ul>
<li><a href="#luminous mornings">Luminous Mornings</a></li>
<li><a href="#the market square">The Market Square</a></li>
<li><a href="#stryjska street">Stryjska Street</a></li>
<li><a href="#contact"> Contact</a></li>
</ul>
</nav>
<header>
<h1>The Street of Crocodiles</h1>
<h2>By Bruno Schultz</h2>
</header>
<p>In July my father went to take the waters and left me, with my mother and elder brother, a prey to the blinding white heat of the summer days. Dizzy with light, we dipped into that enormous book of holidays, its pages blazing with sunshine and scented with the sweet melting pulp of golden pears.</p>
<section>
<h2 id="luminous mornings">Luminous Mornings</h2>
<p>On those luminous mornings Adela returned from the market, like Pomona emerging from the flames of day, spilling from her basket the colourful beauty of the sun - the shiny pink cherries full of juice under their transparent skins, the mysterious black morellos that smelled so much better than they tasted; apricots in whose golden pulp lay the core of long afternoons. And next to that pure poetry of fruit, she unloaded sides of meat with their keyboard of ribs swollen with energy and strength, and seaweeds of vegetables like dead octopuses and squids—the raw material of meals with a yet undefined taste, the vegetative and terrestrial ingredients of dinner, exuding a wild and rustic smell.</p>
<p>The dark second-floor apartment of the house in Market Square was shot through each day by the naked heat of summer: the silence of the shimmering streaks of air, the squares of brightness dreaming their intense dreams on the floor; the sound of a barrel organ rising from the deepest golden vein of day; two or three bars of a chorus, played on a distant piano over and over again, melting in the sun on the white pavement, lost in the fire of high noon.</p>
<p>After tidying up, Adela would plunge the rooms into semidarkness by drawing down the linen blinds. All colours immediately fell an octave lower, the room filled with shadows, as if it had sunk to the bottom of the sea and the light was reflected in mirrors of green water - and the heat of the day began to breathe on the blinds as they stirred slightly in their daydreams.</p>
<blockquote>
<p>"On Saturday afternoons I used to go for a walk with my mother. From the dusk of the hallway, we stepped at once into the brightness of the day. The passers-by, bathed in melting gold, had their eyes half closed against the glare, as if they were drenched with honey. Upper lips were drawn back, exposing the teeth. Everyone in this golden day wore that grimace of heat-as if the sun had forced his worshipers to wear identical masks of gold. The old and the young, women and children, greeted each other with these masks, painted on their faces with thick gold paint; they smiled at each other's pagan faces - the barbaric smiles of Bacchus."</p>
</blockquote>
</section>
<section>
<h2 id="the market square">The Market Square</h2>
<p>Market Square was empty and white-hot, swept by hot winds like a biblical desert. The thorny acacias, growing in this emptiness, looked with their bright leaves like the trees on old tapestries. Although there was no breath of wind, they rustled their foliage in a theatrical gesture, as if wanting to display the elegance of the silver lining of their leaves that resembled the fox-fur lining of a nobleman's coat. The old houses, worn smooth by the winds of innumerable days, played tricks with the reflections of the atmosphere, with echoes and memories of colours scattered in the depth of the cloudless sky. It seemed as if whole generations of summer days, like patient stonemasons cleaning the mildewed plaster from old façades, had removed the deceptive varnish, revealing more and more clearly the true face of the houses, the features that fate had given them and life had shaped for them from the inside.</p>
<p>Now the windows, blinded by the glare of the empty square, had fallen asleep; the balconies declared their emptiness to heaven; the open doorways smelt of coolness and wine.</p>
<p>A bunch of ragamuffins, sheltering in a corner of the square from the flaming broom of the heat, beleaguered a piece of wall, throwing buttons and coins at it over and over again, as if wishing to read in the horoscope of those metal discs the real secret written in the hieroglyphics of cracks and scratched lines. Apart from them, the square was deserted. One expected that, any minute, the Samaritan's donkey, led by the bridle, would stop in front of the wine merchant's vaulted doorway and that two servants would carefully ease a sick man from the red-hot saddle and carry him slowly up the cool stairs to the floor above, already redolent of the Sabbath.</p>
<p>Thus my mother and I ambled along the two sunny sides of Market Square, guiding our broken shadows along the houses as over a keyboard. Under our soft steps the squares of the paving stones slowly filed past—some the pale pink of human skin, some golden, some blue-gray, all flat, warm and velvety in the sun, like sundials, trodden to the point of obliteration, into blessed nothingness.</p>
</section>
<section>
<h2 id="stryjska street">Stryjska Street</h2>
<p>And finally on the corner of Stryjska Street we passed within the shadow of the chemist's shop. A large jar of raspberry juice in the wide window symbolised the coolness of balms which can relieve all kinds of pain. After we passed a few more houses, the street ceased to maintain any pretence of urbanity, like a man returning to his little village who, piece by piece, strips off his Sunday best, slowly changing back into a peasant as he gets closer to his home.</p>
<p>The suburban houses were sinking, windows and all, into the exuberant tangle of blossom in their little gardens. Overlooked by the light of day, weeds and wild flowers of all kinds luxuriated quietly, glad of the interval for dreams beyond the margin of time on the borders of an endless day. An enormous sunflower, lifted on a powerful stem and suffering from hypertrophy, clad in the yellow mourning of the last sorrowful days of its life, bent under the weight of its monstrous girth. But the naive, suburban bluebells and unpretentious dimity flowers stood helpless in their starched pink and white shifts, indifferent to the sunflower's tragedy.</p>
</section>
<footer id="contact">
<p>The content on this page is developed using ChatGPT, content has been edited and is licensed under a Creative Commons Attribution-ShareAlike License, meaning you are allowed to copy, distribute and transmit the work as long as it is attributed to the original authors.</p>
<a href="<https://www.notion.so/IXD-d5adc3ae9f704128ab199d12e419fc98?pvs=4>" target="_blank" title=" Take a look at my work on Notion.">Veiw my work on Notion</a>
<a href="mailto:[email protected]" title="feel free to drop me an email">"Get in Touch Here"</a>
</footer>
</body>
</html>
These are my planning drawings that allowed me to explore differnt ideas for the layput of the website, navigation and the title layout.
When decided what typefaces I was going to use it was hard to find the right combination for typeface of the heading an the main body. I used font joy to help be decide what typefaces would look the best together and it came up with Gilda Display for the headings and Buenard for the main body text. I thought this was a good pairing of the typefaces as it was able to be easily read. I used google font to get the html code and css for the font family of the typeface.
To select the images i used unsplash as these images are free to use. I selected images that related to the text. I had 5 smaller images and 2 main larger images for the title images. i selected images that i could pull the colours from so i had all of the images to have an ornage or a pink under tone.
Using the colour picker on figma I based these colours off the header image which is the sunset so it would match te rest of my website.