For our third project we had to design and build our own website, using HTML & CSS, and also a no-code tool called Framer. To start off, we created a VSCode document, and created both a HTML and CSS sheet.
Typefaces - Miller Display, Mixta Sharp Alt. I got these fonts from Adobe Fonts. I chose Miller Display for my headings and subheadings as I wanted to use a serif font that also looked modern and clean, and I used Mixta Sharp Alt as I just love how it looks and how it is quite thin.
Colour Scheme - For the colour scheme I used black for the background, white for the text, and a gold colour which I eye dropped from one of the images for the headings/subheadings.
Images - Here are the images that I chose for my design. I went for an classic Italian theme throughout and I think that these images represent that and also each headline shows.
I then created my website design on Figma, and this is how it turned out.
I think that the design looks really good, and that the addition of the gold colour, thanks to Paul’s critique for the headings and subheadings work well with the black background as it makes it look classy and sophisticated, which is what I was going for. I also think that the images pop out well as they are very bright and colourful, and they also have a warm theme to them which I didn’t realise until after I had finished. I wanted to create a mockup design on Figma before I started coding as I wanted to have something to look at alongside so that I could have a better perspective of what I was doing. I tried to keep the design as simple as possible so that when it came to building it, it wasn’t too difficult.
Here is the HTML for my website:
<DOCTYPE html>
<html lang="en">
<head>
<title>Street of Crocodiles</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="<https://use.typekit.net/kic2pub.css>">
<link rel="stylesheet" href="<https://use.typekit.net/kic2pub.css>">
</head>
<body>
<nav>
<ul id="navbar">
<li class="nav"><a href= "#luminous mornings">Luminous Mornings</a></li>
<li class="nav"><a href= "#the market square">The Market Square</a></li>
<li class="nav"><a href="#stryjska street">Stryjska Street</a></li>
</ul>
</nav>
<img id="cover" src="images/palace.jpg">
<h1>The Street of Crocodiles</h1>
<p id="bruno">By Bruno Schultz</p>
<div id="introduction">
<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>
</div>
<section id="wholething">
<div id="luminous mornings">
<h2>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>
<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>
<img class= "img" src="images/luminousmorning.webp">
</div>
<div id="the market square">
<h2>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.</p>
<p>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>
<img class= "img" src="images/marketsquare.webp">
</div>
<div id="stryjska street">
<h2>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 naïve,
suburban bluebells and unpretentious dimity flowers stood helpless in their starched pink and white shifts, indifferent to the
sunflower's tragedy.</p>
<img class= "img" src="images/italianstreet.webp">
</div>
<footer>
<div class="contactinfo">
<p><a href="<https://www.notion.so/Year-1-459c83fb403b4bc3830a3183fe0ae94d?pvs=4>" id="notion">Check out my Notion</a></p>
<p><a href="<https://outlook.office.com/mail/>" id="email">Get in Contact</a></p>
</div>
<p id="closing">Markup and design: Andrew Todd<br>
Images: unsplash.com<br><br>
This text is used under the terms of the Project Gutenberg License: <em>www.gutenberg.org.</em></p>
</footer>
</section>
</body>
</html>
I then started creating the HTML for my website, dividing it up into h1, h3, p adding images, using lists for the navigation bar and then also giving divs and classes names and id’s so that it would be easier to target specific elements when it came to doing CSS. For the links at the bottom of the page I used href for the source and then added text to show what would be seen on the browser, which could be clicked to take the user to my Notion or Email.