diff --git a/starter_code/images/menu.png b/starter_code/images/menu.png new file mode 100644 index 0000000..2574592 Binary files /dev/null and b/starter_code/images/menu.png differ diff --git a/starter_code/images/reference.jpg b/starter_code/images/reference.jpg new file mode 100644 index 0000000..4845ded Binary files /dev/null and b/starter_code/images/reference.jpg differ diff --git a/starter_code/index.html b/starter_code/index.html index bf06bff..37eb859 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,20 +1,164 @@ - - - - - - - - - - - Where work happens | Slack - - - - - - - + + + + + + + + + + + + + Where work happens | Slack + + + +
+ + + + logotipo + + + + navicon +
+ + + +
+ + + + +
+ + + +
+ +
+
+ +
+
+

Where Work Happens

+

Lorem ipsum dolor sit amet consectetur, adipii nemo! Facilis ullam recusandae dolorem amet impedit velit. +

+
+
+
+ +
+ +
+
+ + Get started +
+
+ side +
+ + + +
+
+
+
+
+ side + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + +
+ +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..154505c 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -1,7 +1,143 @@ -/* -background-grey: #F4F3F4; -button-purple: #192592 -main-titles dark-grey: #2C303F; -paragraph grey: #5b5e6d; -nav grey: #5b5e6d; -*/ +img { + width: 100%; +} + +.menu { + border-bottom: 1px solid #ccc; + display: flex; + justify-content: space-between; + padding: 10px; + align-items: center; +} + +.menu nav { + display: none; +} + +.menu .logo { + width: 180px; +} + +menu.navicon { + width: 30px; +} + +.menu img { + width: 140px; +} + +.menu nav ul { + list-style: none; + display: flex; +} + +.menu nav li { + margin-right: 5px; +} + +.menu ul { + display: flex; + margin: 0; + list-style: none; +} + +.menu a { + color: inherit; + margin-left: 20px; + text-decoration: none; +} + +@media screen and (min-width: 650px) { + .menu nav { + display: block; + } +} + +.menu .navicon { + display: none +} + + + + +.maintext { + text-align: center; + padding: 200px; + /*display: flex;*/ + +} + + +.principaltext sidephoto {} + +.email { + + text-decoration: none; + margin-top: 10px; + margin-right: 15px; + margin-bottom: 10px; + margin-left: 20px; + color: black; + +} + +.button { + border: 1px solid; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 100; + text-decoration: none; + color: black; + margin: 150px; + padding: 30px; + display: block; + width: 300px; + text-align: center; + background-color: blue; + align: center; +} + +.button-centered { + border: 1px solid; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 100; + text-decoration: none; + color: black; + margin: 150px auto; + padding: 30px; + display: flex; + width: 200px; + text-align: center; +} + + +.email { + border: 1px solid; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 100; + text-decoration: none; + color: black; + margin: 150px; + padding: 30px; + display: flex; + width: 300px; + text-align: center; + ; + align: center; +} + +.email-centered { + border: 1px solid; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 100; + text-decoration: none; + color: black; + margin: 150px auto; + padding: 30px; + display: flex; + width: 200px; + text-align: center; +} \ No newline at end of file