index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog About Nature</title>
    <script src="https://kit.fontawesome.com/4afaa7f461.js"></script>
    <link rel="stylesheet" href="./assets/stylesheets/style.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-logo">
                <i class="fas fa-leaf"></i>
            </div>

            <div id="menuToggle">
                <input type="checkbox">

                <span></span>
                <span></span>
                <span></span>

                <nav id="menu">
                    <a href="/bsa-2019-html-css-homework-dh/">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                </nav>
            </div>

            <div class="header-icons">
                <i class="fas fa-search search-icon"></i>
                <i class="fab fa-twitter social-icon"></i>
                <i class="fab fa-facebook social-icon"></i>
                <i class="fab fa-instagram social-icon"></i>
                <i class="fab fa-pinterest social-icon"></i>
                <i class="fab fa-linkedin social-icon"></i>
            </div>
        </div>
    </header>

    <div class="content">
        <main>
            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post1cover.png" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        Conservation Fatigue – the feeling of fighting a losing battle
                    </a>
                </h3>
                <p>
                    Working in conservation can feel like fighting a losing battle. Are the adversaries too powerful? Are our efforts too little, too late?

                    The opposing forces we are battling against – profit-focussed business, the oil industry, climate crisis, intensive agriculture – are often faceless, global opponents that don’t want to budge. Working on your small piece of the puzzle (whether that’s managing a reserve, campaigning to change a damaging law, or teaching kids about nature) can feel like trying to stem the incoming tide – oh, and the tide is rising.

                    On top of that, the financial situation of the conservation industry is far from cushy. Until the value of nature is properly accounted for as natural capital, conservation largely lives off small pots and charitable donations. Much time is taken writing grant applications and trying to raise funds before the restorative action can even get off the ground.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.2</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>2</span>
                    <span class="timestamp">May 2</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post2cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        The Ethics of Wildlife Photography
                    </a>
                </h3>
                <p>
                    Wildlife and nature photography have been a game changer for me. It’s got me out of the house on days when I’ve felt low, it’s taught me new skills and encourages me to think outside the box, whether that’s about camera settings, composition or the subject I’m wanting to photograph. Photography helps me see things: the ladybird amidst a sea of green leaves, or the mother fallow deer with her young, backlit in setting sun. I love it, but I will always love the wildlife more.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.5</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>1</span>
                    <span class="timestamp">Apr 18</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post3cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        Is it time to rethink our irrational dislike of invasive species?
                    </a>
                </h3>
                <p>
                    Invasive species are present in most ecosystems, and are named as one of the 4 largest drivers of extinctions world-wide. It is therefore unsurprising that many conservationists strongly dislike them, and their eradication is a major focus for conservation. As would be expected, species which cause the most catastrophic damage have received the most attention, yet this gives the impression that all invaders are sprawling weeds, ravenous herbivores, or vicious predators. In reality, many introduced species are harmless or simply do not survive at all when introduced, and a minority may even be beneficial to native wildlife. In general the world’s ecosystems would be in a better state without them, but it is still fascinating to think about the question of whether all invaders should in fact be considered unwelcome.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.4</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>2</span>
                    <span class="timestamp">Apr 4</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post4cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        The role of the... toilet
                    </a>
                </h3>
                <p>
                    Toilet paper is the one thing that we always seem to be running out of in our house: I live with five other people and with me included, I'd say we go through about 18 rolls a month. This high consumption means that no one seems to notice when we're running out and leads to an emergency trip to the shop to stock up on this essential item.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.4</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>2</span>
                    <span class="timestamp">Mar 3</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post5cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        The Imperilled Mascot
                    </a>
                </h3>
                <p>
                    It was a gloomy morning in the winter, standing on the pier our faces were already constantly whipped by the cold gusty wind.  We boarded Boat 36826, the vessel the researchers of the Hong Kong Cetacean Research Project have been using nearly every day to carry out line-transect surveys to study the dolphins’ habitat usage and distribution. The researchers would be on the deck looking for dolphins (and porpoises) until the sun sets in the horizon. This research project has been ongoing for nearly 20 years.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.0</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>0</span>
                    <span class="timestamp">Oct 11, 2018</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post6cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        Ecological Consultancy: Have You Got The Skills?
                    </a>
                </h3>
                <p>
                    Many young people who are looking for a nature-focussed career are more than aware of the potential career paths out there: ranger/reserve manager, tour guide, research, working within a charity, photography… I could go on. However, there’s one potential career path that I don’t see many young people pursuing, and that is ecological consultancy.

                    I was fortunate enough to be recognised as being capable of carrying out basic bird surveys by an ecological consultant a couple of years ago and have been continuing to carry out surveys across Scotland ever since. My first experience of surveying was probably what helped me get into it, as I was surveying birds and mammals on a large estate in north-west Scotland, frequented by golden eagles, dotterel, azure hawkers, water voles and many other exciting and enigmatic species.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>3.8</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>3</span>
                    <span class="timestamp">Aug 16, 2018</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post7cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        Filming Marine Turtles in Cyprus
                    </a>
                </h3>
                <p>
                    Sitting on a beach under a moonless sky, my eyes were redundant and I was forced to use sound to orientate myself. To my left I could hear the rumbling waves of the Mediterranean Sea, to my right the sibilant whisperings of people. Directly in front of me there was a repetitive swoosh swoosh of sand being flicked, pausing every minute or so and replaced by a sharp rasping inhalation of air.

                    The darkness was suddenly lifted as red LED lights flooded the area, revealing a rounded lump lying in a hollow in the sand. This was my queue to start the camera rolling, documenting the female green turtle as she covered her precious eggs. When finished, she dragged her huge body over the lip of the hollow and awkwardly made her way back into the sea. All in all it was a process that took several hours, and she would do it twice more in the coming weeks, laying hundreds of eggs each time. Having only been in Cyprus less than 24 hours, it was an incredible way to start what would turn out to be a very demanding two weeks of filmmaking.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.3</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>1</span>
                    <span class="timestamp">Aug 6, 2018</span>
                </div>
            </div>

            <div class="card">
                <div class="cover">
                    <img src="./assets/images/post8cover.jpg" alt="card cover">
                </div>
                <h3>
                    <a href="#">
                        The Plastic Problem
                    </a>
                </h3>
                <p>
                    A quick walk along a quiet beach in Thailand reveals a myriad of objects. There’s seaweed, shells and crabs. There’s washed-up wood and old, smooth glass shaped by the sand and tide. There’s dead coral, dead fish and trash as far as the eye can see.

                    This is Koh Lanta, a small island off the coast of Krabi. In its high season many visitors from all over the world frequent its beautiful beaches and relaxed bars for a carefree getaway. The sea is calm, the beaches are blissful visions of white and golden sand.
                </p>
                <div class="stats">
                    <i class="fas fa-star rating-icon"></i>
                    <span>4.8</span>
                    <i class="fas fa-comment-alt comments-icon"></i>
                    <span>5</span>
                    <span class="timestamp">Aug 2, 2018</span>
                </div>
            </div>
        </main>

        <aside id="about" class="author">
            <img class="avatar" src="./assets/images/avatar.jpg" alt="">
            <h2>John Doe</h2>
            <p>
                I'm a real nature lover, so whenever possible, I like to get to the beach or get to a forest or get somewhere there's fresh air.
            </p>
        </aside>

        <aside id="contact" class="sidebar">
            <div class="sidebar-icons">
                <i class="fab fa-twitter social-icon"></i>
                <i class="fab fa-facebook social-icon"></i>
                <i class="fab fa-instagram social-icon"></i>
                <i class="fab fa-pinterest social-icon"></i>
                <i class="fab fa-linkedin social-icon"></i>
            </div>

            <form action="#" method="POST">
                <div class="form-control">
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" placeholder="Name">
                </div>
                <div class="form-control">
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" placeholder="Email">
                </div>
                <div class="form-control">
                    <input type="submit" value="Subscribe">
                </div>
            </form>

            <form action="#" method="GET">
                <div class="form-control">
                    <input type="text" name="search" id="search" placeholder="Search">
                    <i class="fas fa-search search-icon"></i>
                </div>
            </form>

            <div class="tags-cloud">
                <h4>Tags Cloud</h4>
                <span>nature</span>
                <span>global</span>
                <span>climate</span>
                <span>wildlife</span>
                <span>situation</span>
                <span>ground</span>
                <span>photography</span>
                <span>green</span>
                <span>ecosystem</span>
                <span>damage</span>
                <span>survive</span>
                <span>paper</span>
                <span>project</span>
                <span>ecologic</span>
                <span>species</span>
                <span>air</span>
                <span>sea</span>
                <span>plastic</span>
                <span>world</span>
            </div>

            <div class="last-comments">
                <h4>Last Comments</h4>
                <div class="comment">
                    <img src="./assets/images/comment1.jpg" alt="comment avatar">
                    <h6>Jane Doe</h6>
                    <span>Hour ago</span>
                    <p>
                        In reality, many introduced species are harmless or simply do not survive at all when introduced, and a minority may even be beneficial to native wildlife.
                    </p>
                </div>

                <div class="comment">
                    <img src="./assets/images/avatar.jpg" alt="comment avatar">
                    <h6>John Doe</h6>
                    <span>Yesterday</span>
                    <p>
                        The sea is calm, the beaches are blissful visions of white and golden sand.
                    </p>
                </div>

                <div class="comment">
                    <img src="./assets/images/neo.jpeg" alt="comment avatar">
                    <h6>Neo</h6>
                    <span>March 31</span>
                    <p>
                        The Matrix Has You....
                    </p>
                </div>
            </div>
        </aside>
    </div>

    <footer>
        <div class="container">
            <div class="footer-logo">
                <i class="fas fa-leaf"></i>
            </div>
            <p class="contacts"><i class="far fa-envelope email-icon"></i>johndoe@blog.net</p>
            <p class="copyright">&#169; Sam-Sklepav Studio, 2019</p>
        </div>
    </footer>
</body>
</html>