https://github.com/dak79/odin-landing
An usage of CSS Flexbox
https://github.com/dak79/odin-landing
css git html
Last synced: about 2 months ago
JSON representation
An usage of CSS Flexbox
- Host: GitHub
- URL: https://github.com/dak79/odin-landing
- Owner: dak79
- Created: 2021-12-10T10:27:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T13:07:15.000Z (about 3 years ago)
- Last Synced: 2025-02-13T19:40:43.834Z (over 1 year ago)
- Topics: css, git, html
- Language: HTML
- Homepage:
- Size: 13.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Landing Page
## Live Preview
[Landing Page](https://dak79.github.io/odin-landing/)
## Description
This project is part of
[The Odin Project - Foundations Path](https://www.theodinproject.com/lessons/foundations-landing-page)
and its goal is to implement a given design in HTML and CSS using Flexbox
Layout.
This the provided design:
[Project Design](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png)
[Color and Font](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/02.png)
## Technologies
- HTML
- CSS
- Git
## Assignment
- Download the design images and take a look at what you’re going to be creating
here.
[Image One (Full Design)](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png),
[Image Two (Color and Fonts)](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/02.png).
- The font that’s being used in the images is Roboto.
- There are many ways to tackle a project like this, and it can be overwhelming
to look at a blank HTML document and not know where to start. Our suggestion:
take it one section at a time.
- The website you’re creating has 4 main sections (and a footer), so pick one
and get it into pretty good shape before moving on. Starting at the top is
always a solid plan.
- For the section you’re working on, begin by getting all the content onto the
page before beginning to style it. In other words, do the HTML and then do the
CSS. You’ll probably have to go back to the HTML once you start styling, but
bouncing back and forth from the beginning will take more time and may cause
more frustration. (Note: you don’t need to use more than one style-sheet.
Using only one CSS file is adequate for this project).
- Many of the elements on this page are very similar to things you saw in our
Flexbox exercises… feel free to go back to those if you need a refresher.
- Do not worry about making your project look nice on a mobile device. We’ll
learn that later.
- When you finish, don’t forget to push it up to GitHub!
## Credits
For this project I used some image.
- Photo by Ksenia Kazak on Unsplash.
- Photo by Ricardo Resende on Unsplash
- Photo by Christina Deravedisian on Unsplash
- Photo by Dim Gunger on Unsplash
- Photo by Hans Isaacson on Unsplash